下一个和上一个按钮的缩略图猫头鹰旋转木马

Question

有谁知道如果使用猫头鹰旋转木马，我们可以使用下一个和上一个图像的缩略图代替下一个和前一个箭头。

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

如果没有，任何其他jQuery的滑块做这件工作将是非常有用的信息！

Answer 1

您可以从实现上述功能猫头鹰传送带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>