<div class="fac_slider">
<!-- The main images -->
<div class="slide-wrap">
<ul class="bxslider">
<li>
<div class="img"><img src="#" alt="restaurant"></div>
<div class="text"><h4>호텔</h4><p>누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출</p></div>
</li>
<li>
<div class="img"><img src="#" alt="restaurant"></div>
<div class="text"><h4>호텔</h4><p>누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출</p></div>
</li>
<li>
<div class="img"><img src="#" alt="restaurant"></div>
<div class="text"><h4>호텔</h4><p>누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출</p></div>
</li>
<li>
<div class="img"><img src="#" alt="restaurant"></div>
<div class="text"><h4>호텔</h4><p>누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출</p></div>
</li>
<li>
<div class="img"><img src="#" alt="restaurant"></div>
<div class="text"><h4>호텔</h4><p>누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출</p></div>
</li>
<li>
<div class="img"><img src="#" alt="restaurant"></div>
<div class="text"><h4>제주신라호텔</h4><p>누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출</p></div>
</li>
<li>
<div class="img"><img src="#" alt="restaurant"></div>
<div class="text"><h4>제주신라호텔</h4><p>누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출</p></div>
</li>
<li>
<div class="img"><img src="#" alt="restaurant"></div>
<div class="text"><h4>호텔</h4><p>누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출</p></div>
</li>
<li>
<div class="img"><img src="#" alt="restaurant"></div>
<div class="text"><h4>호텔</h4><p>누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출</p></div>
</li>
<li>
<div class="img"><img src="#" alt="restaurant"></div>
<div class="text"><h4>호텔</h4><p>누구나 한 번쯤 꿈꾸는 일상으로부터의 탈출</p></div>
</li>
</ul>
<div class="fac_outside">
<span class="prev"></span><span class="next"></span>
</div>
</div>
<!-- The thumbnails -->
<div class="thumbnails">
<ul class="bxslider-pager">
<li data-slideIndex="0" class="active"><a href=""><img src="#"></a></li>
<li data-slideIndex="1"><a href=""><img src="#"></a></li>
<li data-slideIndex="2"><a href=""><img src="#"></a></li>
<li data-slideIndex="3"><a href=""><img src="#"></a></li>
<li data-slideIndex="4"><a href=""><img src="#"></a></li>
<li data-slideIndex="5"><a href=""><img src="#"></a></li>
<li data-slideIndex="6"><a href=""><img src="#"></a></li>
<li data-slideIndex="7"><a href=""><img src="#"></a></li>
<li data-slideIndex="8"><a href=""><img src="#"></a></li>
<li data-slideIndex="9"><a href=""><img src="#"></a></li>
</ul>
<div class="fac_outside">
<span class="prev"></span><span class="next"></span>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function(){
var realSlider= $(".fac_slider .slide-wrap .bxslider").bxSlider({
auto: false,
pager:false,
infiniteLoop:true,
hideControlOnEnd:true,
nextSelector: '.fac_outside .next',
prevSelector: '.fac_outside .prev',
onSlideBefore:function($slideElement, oldIndex, newIndex){
changeRealThumb(realThumbSlider,newIndex);
console.log($slideElement);
},
onSlideAfter:function($slideElement, oldIndex, newIndex){
changeRealThumb(realThumbSlider,newIndex);
console.log($slideElement);
}
});
var realThumbSlider=$(".fac_slider .thumbnails .bxslider-pager").bxSlider({
auto: false,
slideWidth: 196,
slideMargin: 5,
pager:false,
controls: false,
infiniteLoop:false,
hideControlOnEnd:true
});
linkRealSliders(realSlider,realThumbSlider);
if($(".bxslider-pager li").length<7){
$(".bxslider-pager .bx-next").hide();
}
function linkRealSliders(bigS,thumbS){
$(".bxslider-pager").on("click","a",function(event){
event.preventDefault();
var newIndex=$(this).parent().attr("data-slideIndex");
bigS.goToSlide(newIndex);
});
}
function changeRealThumb(slider,newIndex){
var $thumbS=$(".bxslider-pager");
$thumbS.find('.active').removeClass("active");
$thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");
if(slider.getSlideCount()-newIndex>=6)slider.goToSlide(newIndex);
else slider.goToSlide(slider.getSlideCount()-6);
}
});
.fac_slider {margin-top: 40px; position: relative;}
.fac_slider .bx-wrapper {max-width: 100% !important;}
.fac_slider .slide-wrap {border-bottom: 1px solid #ddd; position: relative;}
.fac_slider .bx-wrapper .bx-viewport .bxslider li {text-align: left;}
.fac_slider .bx-wrapper .bx-viewport .bxslider li .text {padding: 20px 30px 25px; background: #f7f7f7;}
.fac_slider .bx-wrapper .bx-viewport .bxslider li .text h4 {font-size: 22px; margin-bottom: 5px; font-weight: 500;}
.fac_slider .bx-wrapper .bx-viewport .bxslider li .text p {font-size: 17px; color: #373737; font-weight: 100;}
.fac_slider .bx-wrapper .bx-viewport .bxslider li img {width:100%; max-height: 600px;}
.fac_slider .slide-wrap .fac_outside {width: 1200px; height: 80px; position: absolute; margin: 0 auto; bottom: 50%;}
.fac_slider .slide-wrap .fac_outside .prev {position: absolute; left: 30px;}
.fac_slider .slide-wrap .fac_outside .next {position: absolute; right: 30px;}
.fac_slider .slide-wrap .fac_outside .prev a {text-indent: -9999px; left: 30px; width: 44px; height: 80px; background: url(/Midas_common/images/homepage/common/arrow_l_03.png) center center no-repeat;}
.fac_slider .slide-wrap .fac_outside .next a {text-indent: -9999px; right: 30px; width: 44px; height: 80px; background: url(/Midas_common/images/homepage/common/arrow_r_03.png) center center no-repeat;}
.fac_slider .thumbnails {margin-top: 40px; position: relative;}
.fac_slider .thumbnails .fac_outside {}
.fac_slider .thumbnails .fac_outside span {cursor: pointer; position: absolute; top: 50%; margin-top: -13px;}
.fac_slider .thumbnails .fac_outside span.prev {left: 0;}
.fac_slider .thumbnails .fac_outside span.next {right: 0;}
.fac_slider .thumbnails .fac_outside span a {width:30px; height:27px; background:url(/Midas_common/images/homepage/common/spr_slider.png) 0 0 no-repeat; text-indent:-9999px; border-radius: 0;}
.fac_slider .thumbnails .fac_outside span.prev a {background-position:0 0;}
.fac_slider .thumbnails .fac_outside span.next a {background-position:-35px 0;}
.fac_slider .bxslider-pager li img {width: 100%; height: 97.5px;}
.fac_slider .bxslider-pager li {filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); fliter:gray; opacity: 0.4;}
.fac_slider .bxslider-pager li.active {filter:none; -webkit-filter:grayscale(0); opacity: 1;}
댓글