Flickity Carousel отключает пользовательскую навигацию при достижении последнего слайда - PullRequest
Новая
       33

Flickity Carousel отключает пользовательскую навигацию при достижении последнего слайда

6 голосов
/ 28 октября 2019

В настоящее время я использую Flickity Carousel , чтобы создать карусель с различными панелями контента фильма.

Карусель использует пользовательскую навигацию для управления ею, а не стандартную, которая поставляется с каруселью. Однако я изо всех сил пытаюсь отключить следующую кнопку навигации, когда вы достигнете конца слайдов карусели. Вот пример того, чего я пытаюсь достичь, и основал свой код на этом.

Из моего примера вы увидите, что кнопка «Предыдущая» работает правильно и отключается, когда вы впервыеземля на карусели. Однако кнопка Next никогда не отключается при достижении конца.

Вот 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>

Ответы [ 3 ]

1 голос
/ 02 ноября 2019

Проблема с вашим кодом заключается в том, что вы устанавливаете параметры groupCells, но используете flkty.cells. «Клетки» представляют весь элемент. Вам нужно использовать «слайды», которые представляют группы в вашем слайдере.

Вот немного измененная версия вашего кода:

$(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>
0 голосов
/ 06 ноября 2019

Вот как я это сделал: 

var PrevNextButton = Flickity.PrevNextButton;
    PrevNextButton.prototype.update = function () {
        // index of first or last cell, if previous or next
        var cells = this.parent.cells;
        // enable is wrapAround and at least 2 cells
        if (this.parent.options.wrapAround && cells.length > 1) {
            this.enable();
            return;
        }
        var lastIndex = cells.length ? cells.length - 1 : 0;
        var boundIndex = this.isPrevious ? 0 : lastIndex;
        var isEnabling;
        if (this.parent.options.contain) {
            var boundCell = cells[boundIndex];
            var selectedCell = cells[this.parent.selectedIndex];
            isEnabling = selectedCell.target != boundCell.target;
        } else {
            isEnabling = this.parent.selectedIndex == boundIndex
        }
        var method = isEnabling ? 'enable' : 'disable';
        this[method]();
    };

Это с более старой версией Flickity, поэтому могут потребоваться тесты. С его помощью я могу отключить / включить следующий / предыдущий (отключить следующий, когда будет достигнут последний слайд, отключить предыдущий, если первый слайд включен), а затем обрабатывать дизайн с помощью CSS :disabled. Этот код находится чуть выше моего FLickity init el.flickity({...}).

Это из metafizzy / flickity / Issues / 289 ( ответил от самого автора Desandro)

РЕДАКТИРОВАТЬ :

Хорошо, я проверил мой пример в вашем коде. Я думаю, что это не удалось из-за groupCells, а Math все еще использовал полный номер ячейки в качестве переменной. Я грязно отредактировал его с некоторыми Math.floor, чтобы использовать номер слайда вместо номера ячейки (образец Desandro, кажется, все еще работает, когда НЕ используются сгруппированные ячейки, но конфигурация 1 ячейка = 1 слайд).

Он работает с включенной функцией flickity next / prev, но я считаю, что вы можете адаптировать ее для использования внешних элементов управления.

Это быстрый взлом, поэтому ему нужны тесты, улучшенная математика и обработка опций flickity. Но это только начало.

https://jsfiddle.net/0c7xqrpw/20/

0 голосов
/ 30 октября 2019

попробуйте установить "if" следующим образом: 

  if ((flkty.selectedIndex - 1) < 0 ) {              
      $prev.attr( 'disabled', 'disabled' );
      $next.removeAttr('disabled'); // <-- remove disabled from the next
  } else if ( (flkty.selectedIndex + 1) == slideCount){
      $next.attr( 'disabled', 'disabled' );
      $prev.removeAttr('disabled'); //<-- remove disabled from the prev
  } else {
      $prev.removeAttr('disabled');
      $next.removeAttr('disabled');
  }
...