次のボタンと前のボタンのサムネイル

Question

フクロウカルーセルを使用している場合は、次のおよび前の矢印の代わりに次と前のイメージのサムネイルを使用できます。

例：https://www.solebox.com/

ない場合は、この仕事をして、他のjQueryのスライダーは本当に便利な情報だろう！

Answer 1

上記の機能を達成するには、Owl Carousel 2があります。あなたは、以下の画像を表示するために、以下のカスタム機能を持っている必要があります。

var mainSlider; 
 

 
$(document).ready(function() { 
 

 
    mainSlider = $('.owl-carousel'); 
 

 
    mainSlider.owlCarousel({ 
 
    autoplay: true, 
 
    autoplayTimeout: 5000, 
 
    lazyLoad: true, 
 
    loop: true, 
 
    items: 1, 
 
    smartSpeed: 500, 
 
    }); 
 

 
    mainSlider.on('changed.owl.carousel', function(property) { 
 
    var current = property.item.index; 
 
    var prev = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('data-navipicture'); 
 
    var next = $(property.target).find(".owl-item").eq(current).next().find("img").attr('data-navipicture'); 
 

 
    $('.navPrev').find('img').attr('src', prev); 
 
    $('.navNext').find('img').attr('src', next); 
 
    }); 
 

 
}); 
 

 
$('.navNext').on('click', function() { 
 
    mainSlider.trigger('next.owl.carousel', [300]); 
 
    return false; 
 
}); 
 

 
$('.navPrev').on('click', function() { 
 
    mainSlider.trigger('prev.owl.carousel', [300]); 
 
    return false; 
 
});

.navPrev { 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 15px; 
 
    z-index: 2; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-size: 100px 100px; 
 
} 
 

 
.navPrev:hover { 
 
    top: 39%; 
 
    left: 8px; 
 
    width: 118px; 
 
    height: 118px; 
 
    background-size: 118px 118px; 
 
} 
 

 
.navPrev span { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
} 
 

 
.navPrev:hover span { 
 
    width: 118px; 
 
    height: 118px; 
 
} 
 

 
.navPrev span img { 
 
    position: relative; 
 
    margin: auto 0px; 
 
    cursor: pointer; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.navPrev:hover span img { 
 
    width: 118px; 
 
    height: 118px; 
 
} 
 

 
.navNext { 
 
    position: absolute; 
 
    top: 40%; 
 
    right: 15px; 
 
    z-index: 2; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-size: 100px 100px; 
 
} 
 

 
.navNext:hover { 
 
    top: 39%; 
 
    right: 8px; 
 
    width: 118px; 
 
    height: 118px; 
 
    background-size: 118px 118px; 
 
} 
 

 
.navNext span { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
} 
 

 
.navNext:hover span { 
 
    width: 118px; 
 
    height: 118px; 
 
} 
 

 
.navNext span img { 
 
    position: relative; 
 
    margin: auto 0px; 
 
    cursor: pointer; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.navNext:hover span img { 
 
    width: 118px; 
 
    height: 118px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> 
 
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" /> 
 

 
<div class="owl-carousel"> 
 
    <div class="item"> 
 
    <a href="#"> <img src="https://placeimg.com/640/480/animals" alt="" data-navipicture="https://placeimg.com/640/480/animals"> 
 
    </a> 
 
    </div> 
 
    <div class="item"> 
 
    <a href="#"> <img src="https://placeimg.com/640/480/arch" alt="" data-navipicture="https://placeimg.com/640/480/arch"> 
 
    </a> 
 
    </div> 
 
    <div class="item"> 
 
    <a href="#"> <img src="https://placeimg.com/640/480/nature" alt="" data-navipicture="https://placeimg.com/640/480/nature"> 
 
    </a> 
 
    </div> 
 
</div> 
 
<div class="navPrev"> 
 
    <span> 
 
       <img src="https://placeimg.com/640/480/animals" alt=""> 
 
      </span> 
 
</div> 
 
<div class="navNext"> 
 
    <span> 
 
       <img src="https://placeimg.com/640/480/arch" alt=""> 
 
      </span> 
 
</div>