javascript - Flickity Carousel 在到达最后一张幻灯片时禁用自定义导航

标签 javascript jquery html flickity

我目前正在使用 Flickity Carousel创建具有不同电影内容面板的轮播。

轮播正在使用 custom navigation来控制它，而不是旋转木马附带的标准控制。然而，当您到达轮播幻灯片的末尾时，我正在努力禁用下一个导航按钮。 Here is an example我想要实现的目标，并以此为基础编写了我的代码。

您将从我的示例中看到，“上一个”按钮可以正常工作，并且当您第一次登陆轮播时会被禁用。但是，到达末尾时，“下一步”按钮永远不会被禁用。

这是一个JSFiddle

我的代码:

$(document).ready(function () {
  $('.carousel-container').each(function (i, container) {
        var options = {
            cellAlign:'left',
            groupCells:'3',
            pageDots: false,
            prevNextButtons: false
        };

        $('.carousel__slides').flickity(options);
        var $container = $(container);
        var $slider = $container.find('.carousel__slides');
        var flkty = $slider.data('flickity');
        var selectedIndex = flkty.selectedIndex;
        var slideCount = flkty.slides.length;
        var $prev = $container.find('.prev');
        var $next = $container.find('.next');

        // previous
        $prev.on('click', function () {
            $slider.flickity('previous');
        });

        // next
        $next.on('click', function () {
            $slider.flickity('next');
        });

        $slider.on( 'select.flickity', function() {

            // enable/disable previous/next buttons
            if ( !flkty.cells[ flkty.selectedIndex - 1 ] ) {
              $prev.attr( 'disabled', 'disabled' );
              $next.removeAttr('disabled'); // <-- remove disabled from the next
            } else if ( !flkty.cells[ flkty.selectedIndex +1 ] ) {
              $next.attr( 'disabled', 'disabled' );
              $prev.removeAttr('disabled'); //<-- remove disabled from the prev
            } else {
              $prev.removeAttr('disabled');
              $next.removeAttr('disabled');
            }
        });
    });
});
.carousel-container {
  position:relative;
  }

.carousel__slide {
  width: 20%;
  max-width:286px;
  opacity: 0.5;
    
}

.carousel__slide.is-selected {
  opacity: 1;
}


.carousel__nav {
  display:block;
}

.carousel__nav button {
  width:65px;
  height:50px;
  background:red;
  border-radius:0 100% 100% 0;
  position: absolute;
  top: 80px;
  cursor:pointer;
  border:none;
  outline:0;
  transition-duration: 0.3s;
  transition-property: all;
}

.carousel__nav button:hover,
.carousel__nav button:active,
.carousel__nav button:focus {
  background:green;
  outline:0;
}

.carousel__nav button:disabled {
  background:black;
   opacity: 0.5;
}

.carousel__nav button i {
  content:'';
  display:block;
  margin:0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10.5px 0 10.5px 14px;
  border-color: transparent transparent transparent white;
}

.carousel__nav .prev {
  left:0;
}

.carousel__nav .prev i {
  transform:rotate(180deg);
}

.carousel__nav .next {
  right:0;
  border-radius:100% 0 0 100%;
}


.film-section {
  margin-top:50px;
}

.film-item {
  padding:0 15px;
}

.film-item p {
  font-size:1.4rem;
  line-height:2.6rem;
  margin-bottom:0;
}

.film-item__image {
    position:relative;
}

.film-item__play {
  width:65px;
  height:65px;
  border-radius:100% 0 0 0;
  position:absolute;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.4);
  border:none;
  transition-duration: 0.3s;
  transition-property: all;
}

.film-item__play:hover,
.film-item__play:active,
.film-item__play:focus {
    background:red;
    outline:0;
}

.film-item__play:after {
    content:'';
    display:block;
    margin:0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10.5px 0 10.5px 14px;
    border-color: transparent transparent transparent white;
    position:absolute;
    top:31px;
    left:33px;
}

.heading-content {
    display:none;
    opacity: 0;
    visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet"/>

<div class="carousel-container">
  <div class="carousel__slides">
      <div class="carousel__slide">
        <div class="offset-slide"></div>
      </div>
      <div class="carousel__slide">
        <div class="film-item">
          <div class="film-item__image">
            <img class="w-100" src="http://placekitten.com/510/380" alt="">
          </div>
          <h3>Heading</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
        </div>
      </div>
      <div class="carousel__slide">
          <div class="film-item">
            <div class="film-item__image">
              <img class="w-100" src="http://placekitten.com/510/380" alt="">
            </div>
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
          </div>
      </div>
      <div class="carousel__slide">
          <div class="film-item">
            <div class="film-item__image">
              <img class="w-100" src="http://placekitten.com/510/380" alt="">
            </div>
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
          </div>
      </div>
      <div class="carousel__slide">
          <div class="film-item">
            <div class="film-item__image">
              <img class="w-100" src="http://placekitten.com/510/380" alt="">
            </div>
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
          </div>
      </div>
      <div class="carousel__slide">
          <div class="film-item">
            <div class="film-item__image">
              <img class="w-100" src="http://placekitten.com/510/380" alt="">
            </div>
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
          </div>
      </div>
      <div class="carousel__slide">
          <div class="film-item">
            <div class="film-item__image">
              <img class="w-100" src="http://placekitten.com/510/380" alt="">
            </div>
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
          </div>
      </div>
      <div class="carousel__slide">
          <div class="film-item">
            <div class="film-item__image">
              <img class="w-100" src="http://placekitten.com/510/380" alt="">
              <h3 class="js-video-heading heading-content">Universitat Oberta de Catalunya</h3>
            </div>
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
          </div>
      </div>
      <div class="carousel__slide">
          <div class="film-item">
            <div class="film-item__image">
              <img class="w-100" src="http://placekitten.com/510/380" alt="">
            </div>
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
          </div>
      </div>
      <div class="carousel__slide">
          <div class="film-item">
            <div class="film-item__image">
              <img class="w-100" src="http://placekitten.com/510/380" alt="">
            </div>
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
          </div>
      </div>
      <div class="carousel__slide">
        <div class="offset-slide"></div>
      </div>
  </div>
  <div class="carousel__nav">
    <button class="prev" disabled><i></i></button>
    <button class="next"><i></i></button>
  </div>
</div>

最佳答案

您代码的问题是您设置了 groupCells 选项，但使用了 flkty.cells。 “细胞”代表所有元素。您需要使用代表 slider 中的组的“幻灯片”。

这是代码的稍微修改版本: 

$(document).ready(function() {
  $('.carousel-container').each(function(i, container) {
    var options = {
      cellAlign: 'left',
      groupCells: '3',
      pageDots: false,
      prevNextButtons: false
    };

    $('.carousel__slides').flickity(options);
    var $container = $(container);
    var $slider = $container.find('.carousel__slides');
    var flkty = $slider.data('flickity');
    var selectedIndex = flkty.selectedIndex;
    var slideCount = flkty.slides.length;
    var $prev = $container.find('.prev');
    var $next = $container.find('.next');

    // previous
    $prev.on('click', function() {
      $slider.flickity('previous');
    });

    // next
    $next.on('click', function() {
      $slider.flickity('next');
    });

    $slider.on('select.flickity', function() {
      // enable/disable previous/next buttons
      if (!flkty.slides[flkty.selectedIndex - 1]) {
        $prev.attr('disabled', 'disabled');
        $next.removeAttr('disabled'); // <-- remove disabled from the next
      } else if (!flkty.slides[flkty.selectedIndex + 1]) {
        $next.attr('disabled', 'disabled');
        $prev.removeAttr('disabled'); //<-- remove disabled from the prev
      } else {
        $prev.removeAttr('disabled');
        $next.removeAttr('disabled');
      }
    });
  });
});
.carousel-container {
  position:relative;
  }

.carousel__slide {
  width: 20%;
  max-width:286px;
  opacity: 0.5;
    
}

.carousel__slide.is-selected {
  opacity: 1;
}


.carousel__nav {
  display:block;
}

.carousel__nav button {
  width:65px;
  height:50px;
  background:red;
  border-radius:0 100% 100% 0;
  position: absolute;
  top: 80px;
  cursor:pointer;
  border:none;
  outline:0;
  transition-duration: 0.3s;
  transition-property: all;
}

.carousel__nav button:hover,
.carousel__nav button:active,
.carousel__nav button:focus {
  background:green;
  outline:0;
}

.carousel__nav button:disabled {
  background:black;
   opacity: 0.5;
}

.carousel__nav button i {
  content:'';
  display:block;
  margin:0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10.5px 0 10.5px 14px;
  border-color: transparent transparent transparent white;
}

.carousel__nav .prev {
  left:0;
}

.carousel__nav .prev i {
  transform:rotate(180deg);
}

.carousel__nav .next {
  right:0;
  border-radius:100% 0 0 100%;
}


.film-section {
  margin-top:50px;
}

.film-item {
  padding:0 15px;
}

.film-item p {
  font-size:1.4rem;
  line-height:2.6rem;
  margin-bottom:0;
}

.film-item__image {
    position:relative;
}

.film-item__play {
  width:65px;
  height:65px;
  border-radius:100% 0 0 0;
  position:absolute;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.4);
  border:none;
  transition-duration: 0.3s;
  transition-property: all;
}

.film-item__play:hover,
.film-item__play:active,
.film-item__play:focus {
    background:red;
    outline:0;
}

.film-item__play:after {
    content:'';
    display:block;
    margin:0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10.5px 0 10.5px 14px;
    border-color: transparent transparent transparent white;
    position:absolute;
    top:31px;
    left:33px;
}

.heading-content {
    display:none;
    opacity: 0;
    visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/flickity@2.2.1/dist/flickity.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script>
<div class="carousel-container">
  <div class="carousel__slides">
    <div class="carousel__slide">
      <div class="offset-slide"></div>
    </div>
    <div class="carousel__slide">
      <div class="film-item">
        <div class="film-item__image">
          <img class="w-100" src="http://placekitten.com/510/380" alt="">
        </div>
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
      </div>
    </div>
    <div class="carousel__slide">
      <div class="film-item">
        <div class="film-item__image">
          <img class="w-100" src="http://placekitten.com/510/380" alt="">
        </div>
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
      </div>
    </div>
    <div class="carousel__slide">
      <div class="film-item">
        <div class="film-item__image">
          <img class="w-100" src="http://placekitten.com/510/380" alt="">
        </div>
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
      </div>
    </div>
    <div class="carousel__slide">
      <div class="film-item">
        <div class="film-item__image">
          <img class="w-100" src="http://placekitten.com/510/380" alt="">
        </div>
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
      </div>
    </div>
    <div class="carousel__slide">
      <div class="film-item">
        <div class="film-item__image">
          <img class="w-100" src="http://placekitten.com/510/380" alt="">
        </div>
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
      </div>
    </div>
    <div class="carousel__slide">
      <div class="film-item">
        <div class="film-item__image">
          <img class="w-100" src="http://placekitten.com/510/380" alt="">
        </div>
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
      </div>
    </div>
    <div class="carousel__slide">
      <div class="film-item">
        <div class="film-item__image">
          <img class="w-100" src="http://placekitten.com/510/380" alt="">
          <h3 class="js-video-heading heading-content">Universitat Oberta de Catalunya</h3>
        </div>
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
      </div>
    </div>
    <div class="carousel__slide">
      <div class="film-item">
        <div class="film-item__image">
          <img class="w-100" src="http://placekitten.com/510/380" alt="">
        </div>
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
      </div>
    </div>
    <div class="carousel__slide">
      <div class="film-item">
        <div class="film-item__image">
          <img class="w-100" src="http://placekitten.com/510/380" alt="">
        </div>
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
      </div>
    </div>
    <div class="carousel__slide">
      <div class="offset-slide"></div>
    </div>
  </div>
  <div class="carousel__nav">
    <button class="prev" disabled><i></i></button>
    <button class="next"><i></i></button>
  </div>
</div>

关于javascript - Flickity Carousel 在到达最后一张幻灯片时禁用自定义导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58592911/

上一篇：jquery - 当 table 很大时，面板主体没有调整大小？

下一篇：仅针对特定元素的 JavaScript SelectionChange 事件

相关文章：

javascript - jquery - 如何检查父元素是 tbody 还是 thead？

javascript - 为什么 JavaScript 添加的按钮没有默认间距？

javascript - 如何在 jQuery 中循环一组 ID 并匹配另一组元素的事件元素属性？

javascript - JavaScript 中的无限及超越

javascript - Windows 8 应用程序在手指滑动时触发事件

JavaScript 赋值和条件在一行

javascript - 日历 View 有时在 html5 中不起作用

javascript - 使用 javascript/AJAX 将数据插入 MySQL 数据库

jquery - 如何让我的 jQuery UI "close"按钮显示在 DIV 的右上角而不妨碍文本的流动？

html - 在 div 中居中超链接

©2024 IT工具网  联系我们