Сова Карусель - отключить следующую кнопку на последнем слайде
Я только начал использовать Сову Карусель. Заметил, что в owl.carousel.js есть ошибка. При использовании параметра slideBy: "страница" и предыдущая, и следующая навигация по-прежнему работают, когда они отключены, и на первой или последней странице.
Например: если я щелкнул мышью по следующей стрелке, и она отправила меня на последнюю страницу элементов, и я снова щелкнул по следующей стрелке (даже если она неактивна), она все еще активна, а затем отправила меня обратно на первую страницу.
То же самое происходит на первой странице, но с предыдущей стрелкой.
В любом случае, чтобы это исправить?
HTML
<div class="thumbnails owl-carousel owl-theme">
<a class="thumbnail " title="" href="">
<img src="http://topfreeintro.bdjm5gygfhwdb5d.maxcdn-edge.com/wp-content/uploads/2018/08/No-Text-Intro-Template-108-160x160.jpg?x84593" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://cdn.shopify.com/s/files/1/2152/8743/products/CGEAR_CG05Y1101045NP_COMFORT_MAT_FOREST_GREEN_PRODUCT_3_72dpi_c3929ecd-5b2c-4ec3-83aa-c5a37df2badd_160x160.jpg?v=1547876502" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="http://topfreeintro.bdjm5gygfhwdb5d.maxcdn-edge.com/wp-content/uploads/2018/08/No-Text-Intro-Template-105-160x160.jpg?x84593" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://v-play.net/wp-content/uploads/2016/07/free_music_for_games_purple-planet.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://cdn.shopify.com/s/files/1/0225/1115/products/textures-free-hand-painted-wall-texture-01-1_compact.jpg?v=1497443190" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://images-na.ssl-images-amazon.com/images/I/61AD6ZRsqAL._AC_UL160_SR160,160_.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://www.jesselanewellness.com/wp-content/uploads/2016/02/Healthy-Dairy-Free-Dessert-Book-Tour-Life-of-Eden.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://thumbs.dreamstime.com/t/violet-purple-orchid-flowers-decorated-wood-can-be-used-as-background-free-space-your-text-violet-purple-orchid-108412326.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
</div>
CSS
.product-gallery .thumbnails {
margin: 2em 0 0;
}
.column {
float: left;
padding-left: 20px;
padding-right: 20px;
}
.main {
text-align: center;
}
.product-gallery .main a {
display: inline-block;
max-width: 100%;
}
img {
height: auto;
vertical-align: top;
max-width: 100%;
}
ДЕМО JSFIDDLE
2 ответа
Проблема в том, что ваша кнопка "Сова-следующий" захватывает отключенный класс, но сама по себе кнопка все еще активна.
Вы хотите, чтобы ваше приложение отключало кнопку "Сова-следующий" при нажатии на последнюю страницу ваших элементов карусели. Вы можете достичь этого, используя объект события owl, передав функцию обратного вызова. Сова api события
Попробуйте следующее:
$('.owl-carousel').owlCarousel({
loop:false,
margin:10,
nav:true,
slideBy:'page',
responsive:{
0:{
items:4
},
600:{
items:4
},
1000:{
items:4
}
}
});
$('.owl-carousel').on('changed.owl.carousel', function(e) {
$('button.owl-next').removeAttr('disabled');
$('button.owl-prev').removeAttr('disabled');
if ( ( e.page.index + 1 ) >= e.page.count ){
$('button.owl-next').attr('disabled', 'disabled');
} else {
$('button.owl-next').removeAttr('disabled');
}
if ( e.page.index == 0 ){
$('button.owl-prev').attr('disabled', 'disabled');
} else {
$('button.owl-prev').removeAttr('disabled');
}
});<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="thumbnails owl-carousel owl-theme">
<a class="thumbnail " title="" href="">
<img src="http://topfreeintro.bdjm5gygfhwdb5d.maxcdn-edge.com/wp-content/uploads/2018/08/No-Text-Intro-Template-108-160x160.jpg?x84593" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://cdn.shopify.com/s/files/1/2152/8743/products/CGEAR_CG05Y1101045NP_COMFORT_MAT_FOREST_GREEN_PRODUCT_3_72dpi_c3929ecd-5b2c-4ec3-83aa-c5a37df2badd_160x160.jpg?v=1547876502" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="http://topfreeintro.bdjm5gygfhwdb5d.maxcdn-edge.com/wp-content/uploads/2018/08/No-Text-Intro-Template-105-160x160.jpg?x84593" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://v-play.net/wp-content/uploads/2016/07/free_music_for_games_purple-planet.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://cdn.shopify.com/s/files/1/0225/1115/products/textures-free-hand-painted-wall-texture-01-1_compact.jpg?v=1497443190" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://images-na.ssl-images-amazon.com/images/I/61AD6ZRsqAL._AC_UL160_SR160,160_.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://www.jesselanewellness.com/wp-content/uploads/2016/02/Healthy-Dairy-Free-Dessert-Book-Tour-Life-of-Eden.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
<a class="thumbnail " title="" href="">
<img src="https://thumbs.dreamstime.com/t/violet-purple-orchid-flowers-decorated-wood-can-be-used-as-background-free-space-your-text-violet-purple-orchid-108412326.jpg" alt="The Gwen Teething Toy - Thumbnail TEST">
</a>
</div>Вы можете попробовать это, это сработало для меня
$('#owl-carousel .carousel-items-wrapper').owlCarousel({
loop:false,
nav:true,
dots: false,
navText:["<i class='icon-feather-chevron-left'></i>","<i class='icon-feather-chevron-right'></i>"],
margin:20,
autoplay:false,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:4
}
}
});
$('#owl-carousel .carousel-items-wrapper').on('changed.owl.carousel', function(e) {
var items = e.item.count; // Number of items
var item = e.item.index; // Position of the current item
var size = e.page.size; // Number of items per page
// You can make this work by hiding/showing it via jQuery
// or we add a custom-class to it
$(this).find(".owl-prev").show();
$(this).find(".owl-next").show();
// OR
// $(this).find(".owl-prev").removeClass("owl-nav-hidden");
// $(this).find(".owl-next").removeClass("owl-nav-hidden");
if(item == 0){
console.log("We have reached the beginning...");
$(this).find(".owl-prev").hide();
// OR
// $(this).find(".owl-prev").addClass("owl-nav-hidden");
}
if(item == (items - size)){
console.log("We have reached the End...");
$(this).find(".owl-next").hide();
// OR
// $(this).find(".owl-next").addClass("owl-nav-hidden");
}
});