Как изменить размер / переустановить с помощью ползунков Flickity? - PullRequest
Новая
       104

Как изменить размер / переустановить с помощью ползунков Flickity?

0 голосов
/ 27 апреля 2020

Я строю свой ползунок Flickity на основе предыдущего вопроса , который я поднял.

А теперь я хотел бы создать еще одну функцию, которая заключается в добавлении вкладки. функция, чтобы показать / скрыть несколько ползунков.

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

Я пытался использовать функцию изменения размера, как указано в API do c 

$('.button').on( 'click', function() {
  $carousel.show()
    // resize after un-hiding Flickity
    .flickity('resize');
});

Но затем я получил ошибку журнала консоли Uncaught TypeError: $(...).flickity is not a function

Может кто-нибудь помочь взглянуть и дать мне несколько советов? Кроме того, у меня есть счетчик номера страницы следующим образом: 

//check slide status
        var flkty = new Flickity('.carousel');
        var carouselStatus = document.querySelector('.carousel-status');

        function updateStatus() {
          var slideNumber = flkty.selectedIndex + 1;
          carouselStatus.textContent = slideNumber + '/' + flkty.slides.length;
        }
        updateStatus();

        flkty.on( 'select', updateStatus );

Могу ли я обновить это одновременно с изменением вкладок?

Большое спасибо за потраченное время! 

$(document).ready(function() {  
    // inital active slide background-color
    $('#carousel1 .carousel-cell').css('background-color', $('#carousel1 .carousel-cell.is-selected').data('bgcolor'));

    // set the background color on the active slide by clicking on the next/preview button or on dragging a slide
    $('body').on('click', 'button.flickity-button, #carousel1 .carousel-cell', function(){
        $('#carousel1 .carousel-cell').each(function(){ 
            // set active slide's background color to all slides
            if ($(this).hasClass('is-selected')) {
                $('#carousel1 .carousel-cell').css('background-color', $(this).data('bgcolor'));
            } 
        });
    });
    
    //check slide status
        var flkty = new Flickity('.carousel');
        var carouselStatus = document.querySelector('.carousel-status');

        function updateStatus() {
          var slideNumber = flkty.selectedIndex + 1;
          carouselStatus.textContent = slideNumber + '/' + flkty.slides.length;
        }
        updateStatus();

        flkty.on( 'select', updateStatus );
  
  $('body').on('click','.carousel_tab a',function(){
  if($(this).hasClass('tab1')){
    $('#carousel2').hide();
    $('#carousel1').show();
    $('.carousel_tab').removeClass('selected');
    $(this).addClass('selected');
  }else if($(this).hasClass('tab2')){
           $('#carousel1').hide();
    $('#carousel2').show();
    $('.carousel_tab').removeClass('selected');
    $(this).addClass('selected');
           }   
  })
});
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.carousel {
  background: #FAFAFA;
}

.carousel-cell {
  width: 33.333%;
  height: 400px;
  margin-right: 10px;
  background: #333;
}

.carousel-cell-image {
  display: block;
  max-height: 100%;
  margin: 0 auto;
  max-width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}


/* fade in lazy loaded image */
.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {
  opacity: 1;
}

.carousel_tab a{
  margin: 0 10px;
  padding: 10px;
}
.carousel_tab a.selected{
  background: red;
}

#carousel2{
  display: none;
}
<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 rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<p class="carousel_tab"><a href="javascript:void(0);" class="tab1 selected">Tab 1</a><a href="javascript:void(0);" class="tab2">Tab 2</a></p>

<div id="carousel1" class="carousel" data-flickity='{ "lazyLoad": true, "wrapAround": true }'>
  <div class="carousel-cell" style="color: #f0f0f0;" data-bgcolor="#ff0">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/tulip.jpg" />
  </div>
  <div class="carousel-cell" style="color: #cc4141;" data-bgcolor="#cc4141">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg" />
  </div>
  <div class="carousel-cell" style="color: #413391;" data-bgcolor="#413391">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/raspberries.jpg" />
  </div>
  <div class="carousel-cell" style="color: #b0f0f5;" data-bgcolor="#b0f0f5">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/wolf.jpg" />
  </div>
</div>

<div id="carousel2" class="carousel" data-flickity='{ "lazyLoad": true, "wrapAround": true }'>
  <div class="carousel-cell" style="color: #f0f0f0;" data-bgcolor="#ff0">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/tulip.jpg" />
  </div>
  <div class="carousel-cell" style="color: #cc4141;" data-bgcolor="#cc4141">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg" />
  </div>
  <div class="carousel-cell" style="color: #413391;" data-bgcolor="#413391">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/raspberries.jpg" />
  </div>
  <div class="carousel-cell" style="color: #b0f0f5;" data-bgcolor="#b0f0f5">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/wolf.jpg" />
  </div>
</div>

<p class="carousel-status"></p>
...