Forked from kiennt2/swiper slider with thumbs carousel
Created
August 17, 2017 21:09
-
-
Save HelgaZhizhka/51c1f3c914a4ee47625604000cb9c630 to your computer and use it in GitHub Desktop.
swiper slider with thumbs carousel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Lib : http://www.idangero.us/sliders/swiper/ | |
ver:2.4.3 | |
<script> | |
// swiper Slider - Thumb Carousel - author: kien.hnaptech@gmail.com ========================================================== | |
$(document).ready(function(){ | |
if($(".swiper-slider-wrapper").length > 0){ | |
var swiperWithThumbCarousel = new Swiper('.swiper-main-slider',{ | |
speed:500, | |
autoplay:4000, | |
loop: true, | |
calculateHeight:true, | |
resizeReInit:true, | |
onInit: function(){ | |
setParentHeight(".swiper-main-slider",".swiper-slider-wrapper"); | |
}, | |
onSlideChangeStart: function(){ | |
$(".swiper-thumbs-carousel .swiper-slide a.active").removeClass('active'); | |
$(".swiper-thumbs-carousel .swiper-slide a").each(function(){ | |
var tabIndex = $(this).attr("tabindex"); | |
if(tabIndex == swiperWithThumbCarousel.activeLoopIndex) { | |
$(this).addClass('active'); | |
swiperThumbCarousel.swipeTo(swiperWithThumbCarousel.activeLoopIndex); | |
} | |
}); | |
if(swiperWithThumbCarousel.activeLoopIndex === 0){ | |
swiperThumbCarousel.swipeTo(0); | |
} | |
} | |
}); | |
var swiperThumbCarousel = new Swiper('.swiper-thumbs-carousel',{ | |
speed:500, | |
slidesPerView: 'auto', | |
calculateHeight:true | |
}); | |
$(".swiper-thumbs-carousel .swiper-slide a").on('touchstart mousedown',function(e){ | |
e.preventDefault(); | |
swiperWithThumbCarousel.swipeTo( $(this).attr("tabindex") ); | |
}); | |
$(".swiper-thumbs-carousel .swiper-slide a").click(function(e){ | |
e.preventDefault(); | |
}); | |
$('.swiper-carousel-prev').on('click', function(e){ | |
e.preventDefault(); | |
swiperWithThumbCarousel.swipePrev(); | |
swiperThumbCarousel.swipePrev(); | |
}); | |
$('.swiper-carousel-next').on('click', function(e){ | |
e.preventDefault(); | |
swiperWithThumbCarousel.swipeNext(); | |
swiperThumbCarousel.swipeNext(); | |
}); | |
$(window).resize(function(){ | |
setTimeout(function () { | |
swiperWithThumbCarousel.reInit(); | |
}, 200); | |
}); | |
} | |
}); | |
function setParentHeight(selector,parent){ | |
$(selector).parent(parent).css("height",$(selector).height()); | |
} | |
//============================================================ | |
</script> | |
<div class="clearer"> | |
<div class="swiper-slider-wrapper"> | |
<div class="swiper-container swiper-main-slider"> | |
<div class="swiper-wrapper"> | |
<div class="swiper-slide"> | |
<div class="content-slide"> | |
<img src="img/img-558-375.png" alt=""/> | |
</div> | |
</div> | |
<div class="swiper-slide"> | |
<div class="content-slide"> | |
<img src="img/img-558-375.png" alt=""/> | |
</div> | |
</div> | |
<div class="swiper-slide"> | |
<div class="content-slide"> | |
<img src="img/img-558-375.png" alt=""/> | |
</div> | |
</div> | |
<div class="swiper-slide"> | |
<div class="content-slide"> | |
<img src="img/img-558-375.png" alt=""/> | |
</div> | |
</div> | |
<div class="swiper-slide"> | |
<div class="content-slide"> | |
<img src="img/img-558-375.png" alt=""/> | |
</div> | |
</div> | |
<div class="swiper-slide"> | |
<div class="content-slide"> | |
<img src="img/img-558-375.png" alt=""/> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="f-fix swiper-thumbs-slider"> | |
<div class="swiper-thumbs-slider-padding"> | |
<div class="swiper-container swiper-thumbs-carousel"> | |
<div class="swiper-wrapper"> | |
<div class="swiper-slide"> | |
<a href="#" class="active" tabindex="0" ><img src="img/img-558-375.png" alt="" /></a> | |
</div> | |
<div class="swiper-slide"> | |
<a href="#" tabindex="1"><img src="img/img-558-375.png" alt=""/></a> | |
</div> | |
<div class="swiper-slide"> | |
<a href="#" tabindex="2"><img src="img/img-558-375.png" alt=""/></a> | |
</div> | |
<div class="swiper-slide"> | |
<a href="#" tabindex="3"><img src="img/img-558-375.png" alt=""/></a> | |
</div> | |
<div class="swiper-slide"> | |
<a href="#" tabindex="4"><img src="img/img-558-375.png" alt=""/></a> | |
</div> | |
<div class="swiper-slide"> | |
<a href="#" tabindex="5"><img src="img/img-558-375.png" alt=""/></a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<a href="#" class="swiper-carousel-prev">prev</a> | |
<a href="#" class="swiper-carousel-next">next</a> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment