Сова Карусель - отключить следующую кнопку на последнем слайде - PullRequest
Новая
       14

Сова Карусель - отключить следующую кнопку на последнем слайде

0 голосов
/ 26 января 2019

Я только начал использовать Сову Карусель.Заметил, что в 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%;
}

DEMO JSFIDDLE

1 Ответ

0 голосов
/ 12 февраля 2019

Проблема в том, что ваша кнопка «Сова следующий» захватывает отключенный класс, но сама по себе кнопка все еще активна.

Вы хотите, чтобы ваше приложение отключало кнопку сова-следующий при нажатии на последнюю страницу ваших элементов карусели. Вы можете достичь этого, используя объект события 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>
...