19'C 흐림
서울 강남구
슬라이드 기본 설정 옵션 값:
$(document).ready(function(){
auto: true, // 슬라이드 자동 실행
stopAuto: false, // next, prev 버튼 클릭 시 이벤트 버블 차단
pager: false, // 밑에 1234 뜨는거
oneToOneTouch: false // 스와이프 효과
});
썸네일 슬라이드 기본 설정 옵션 값:
/* 썸네일 슬라이더 */
var realSlider = $("ul#bxslider").bxSlider({
speed: 1000,
pager: false,
nextText: '',
prevText: '',
infiniteLoop: false,
hideControlOnEnd: true,
onSlideBefore: function ($slideElement, oldIndex, newIndex) {
changeRealThumb(realThumbSlider, newIndex);
}
});
var realThumbSlider = $("ul#bxslider-pager").bxSlider({
minSlides: 5,
maxSlides: 5,
slideWidth: 156,
slideMargin: 12,
moveSlides: 1,
pager: false,
controls: false,
speed: 1000,
infiniteLoop: false,
hideControlOnEnd: true,
nextText: '<span></span>',
prevText: '<span></span>',
onSlideBefore: function ($slideElement, oldIndex, newIndex) {
$("#sliderThumbReal ul .active").removeClass("active");
$slideElement.addClass("active");
}
});
linkRealSliders(realSlider, realThumbSlider);
if ($("#bxslider-pager li").length < 5) {
$("#bxslider-pager .bx-next").hide();
}
// sincronizza sliders realizzazioni
function linkRealSliders(bigS, thumbS) {
$("ul#bxslider-pager").on("click", "a", function (event) {
event.preventDefault();
var newIndex = $(this).parent().attr("data-slideIndex");
bigS.goToSlide(newIndex);
});
}
//slider!=$thumbSlider. slider is the realslider
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 >= 4) slider.goToSlide(newIndex);
else slider.goToSlide(slider.getSlideCount() - 4);
}
썸네일 html 마크업:
<!-- The main images -->
<ul id="bxslider">
<li><img src="/images/sub/L1.jpg"></li>
<li><img src="/images/sub/L2.jpg"></li>
<li><img src="/images/sub/L3.jpg"></li>
<li><img src="/images/sub/L4.jpg"></li>
<li><img src="/images/sub/L5.jpg"></li>
<li><img src="/images/sub/L6.jpg"></li>
<li><img src="/images/sub/L7.jpg"></li>
<li><img src="/images/sub/L8.jpg"></li>
<li><img src="/images/sub/L9.jpg"></li>
<li><img src="/images/sub/L10.jpg"></li>
<li><img src="/images/sub/L11.jpg"></li>
<li><img src="/images/sub/L12.jpg"></li>
<li><img src="/images/sub/L13.jpg"></li>
<li><img src="/images/sub/L14.jpg"></li>
<li><img src="/images/sub/L15.jpg"></li>
<li><img src="/images/sub/L16.jpg"></li>
<li><img src="/images/sub/L17.jpg"></li>
<li><img src="/images/sub/L18.jpg"></li>
</ul>
<!-- The thumbnails -->
<ul id="bxslider-pager">
<li data-slideIndex="0" class="active"><a href="javascript:void(0);"><img src="/images/sub/1.jpg"></a></li>
<li data-slideIndex="1"><a href="javascript:void(0);"><img src="/images/sub/2.jpg"></a></li>
<li data-slideIndex="2"><a href="javascript:void(0);"><img src="/images/sub/3.jpg"></a></li>
<li data-slideIndex="3"><a href="javascript:void(0);"><img src="/images/sub/4.jpg"></a></li>
<li data-slideIndex="4"><a href="javascript:void(0);"><img src="/images/sub/5.jpg"></a></li>
<li data-slideIndex="5"><a href="javascript:void(0);"><img src="/images/sub/6.jpg"></a></li>
<li data-slideIndex="6"><a href="javascript:void(0);"><img src="/images/sub/7.jpg"></a></li>
<li data-slideIndex="7"><a href="javascript:void(0);"><img src="/images/sub/8.jpg"></a></li>
<li data-slideIndex="8"><a href="javascript:void(0);"><img src="/images/sub/9.jpg"></a></li>
<li data-slideIndex="9"><a href="javascript:void(0);"><img src="/images/sub/10.jpg"></a></li>
<li data-slideIndex="10"><a href="javascript:void(0);"><img src="/images/sub/11.jpg"></a></li>
<li data-slideIndex="11"><a href="javascript:void(0);"><img src="/images/sub/12.jpg"></a></li>
<li data-slideIndex="12"><a href="javascript:void(0);"><img src="/images/sub/13.jpg"></a></li>
<li data-slideIndex="13"><a href="javascript:void(0);"><img src="/images/sub/14.jpg"></a></li>
<li data-slideIndex="14"><a href="javascript:void(0);"><img src="/images/sub/15.jpg"></a></li>
<li data-slideIndex="15"><a href="javascript:void(0);"><img src="/images/sub/16.jpg"></a></li>
<li data-slideIndex="16"><a href="javascript:void(0);"><img src="/images/sub/17.jpg"></a></li>
<li data-slideIndex="17"><a href="javascript:void(0);"><img src="/images/sub/18.jpg"></a></li>
</ul>