swiper slider with thumbs carousel

swiper slider with thumbs carousel

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>

I wrote a small plugin using the Swiper API that enables you to add custom thumbnails and link them to your Swiper instance.

https://github.com/gijsroge/Swiper-Thumbnails