スワイパーのカスタムページネーションは1回だけスライドします

Question

swiperと非常に単純な画像スライダーを作成し、スワイパーの「paginationCustomRender」jQueryとデータ属性を使用してカスタムページを追加しました。小さな関数は、スライダに、ページング内のラベルの1つがクリックされたときに目的のスライドを「slideTo（）」するように指示しますが、一度しか機能しない場合、関数は再び開始しません。 私が検索したことから、ほとんどの人がスワイパーの組み込みオプションを使用していないことを知り、自分自身で作成したので、私は何をすべきか、それを行うための最良の方法は何かを考えていました。ここでは、事前

で

おかげで私のHTMLです：

<div class="main_slider_wrapper left"> 
      <div class="swiper-container"> 
       <div class="swiper-wrapper"> 
        <div class="slide_item swiper-slide" data-name="slide-1"> 
         <a href="#"> 
          <img src="assets/img/pages/home/main-slider/Banner1.jpg" alt=""> 
         </a> 
        </div> 
        <!-- /slide_item --> 
        <div class="slide_item swiper-slide" data-name="slide-2"> 
         <a href="#"> 
          <img src="assets/img/pages/home/main-slider/Banner2.jpg" alt=""> 
         </a> 
        </div> 
        <!-- /slide_item --> 
        <div class="slide_item swiper-slide" data-name="slide-3"> 
         <a href="#"> 
          <img src="assets/img/pages/home/main-slider/Banner3.jpg" alt=""> 
         </a> 
        </div> 
        <!-- /slide_item --> 
       </div> 
       <!-- /swiper-wrapper --> 
       <div class="swiper-button-prev fawesome fa-chevron-left"></div> 
       <div class="swiper-button-next fawesome fa-chevron-right"></div> 
       <div class="main_slider_pagination_wrapper swiper-pagination"></div> 
      </div> 
      <!-- /swiper-container --> 
     </div> 

、ここでは、JSです：

function mainSliderFn() { 
    var mainSliderElement = $('.main_slider_wrapper .swiper-container')[0]; 
    var mainSliderNext = $('.main_slider_wrapper .swiper-button-next')[0]; 
    var mainSliderPrev = $('.main_slider_wrapper .swiper-button-prev')[0]; 
    mainSlider = new Swiper(mainSliderElement, { 
     direction: 'horizontal', 
     loop: false, 
     spaceBetween: 0, 
     slidesPerView: 1, 
     autoResize: false, 
     speed: 1500, 
     nextButton: mainSliderNext, 
     prevButton: mainSliderPrev, 

     pagination: '.main_slider_pagination_wrapper', 
     paginationClickable: true, 
     paginationType: "custom", 
     paginationCustomRender: function(swiper, current, total) { 
      var names = []; 
      $(".main_slider_wrapper .slide_item").each(function(i) { 
       names.push($(this).data("name")); 
      }); 
      var text = "<span style='background-color:white;padding:20px;'>"; 
      for (let i = 1; i <= total; i++) { 
       if (current != i) { 
       text += "<span class='main_slider_label swiper-pagination-clickable' data-index='"+i+"'>" + names[i-1] + "</span>"; 
       } else { 
       text += "<span class='main_slider_label swiper-pagination-clickable active_label' data-index='"+i+"'>" + names[i-1] + "</span>"; 
       } 

      } 
      text += "</span>"; 
      return text; 
     }, 
    }); 
}; 
function clickableLabelsFn(){ 
    $('.main_slider_label').on('click', function(e){ 
     var clicked = $(this); 
     var mytarget = $(clicked).data('index'); 
     if(!$(clicked).hasClass('active_label')) 
     { 
      mainSlider.slideTo(mytarget-1); 
     } 
    }); 
}; 
$(document).ready(function() { 
    mainSliderFn(); 
    clickableLabelsFn(); 
}); 

Answer 1

私はswiper大好きですが、時にはそれがお尻本当の痛みをすることができます使用して現在のところ、このプラグインは完全に機能するカスタムページネーションをサポートしていないため、iDangeroグループはいくつかの変更を加える必要があります。

だからここ

は私のソリューションです：

function clickableLabelsFn(){ 

    // Making Labels 
    var names = []; 
    total = mainSlider.slides.length; 
    activeSlide = mainSlider.activeIndex; 
    var labelsWrapper = $('.main_slider_labels_wrapper'); 

    $(".main_slider_wrapper .slide_item").each(function(i) { 
     names.push($(this).data("name")); 
    }); 
    for(var counter = 1; counter <= total; counter++) 
    { 
     if(activeSlide+1 != counter) 
     { 
      var labesHtml = $("<span></span>") 
          .addClass("main_slider_label") 
          .data('index', counter) 
          .text(names[counter-1]); 
      labelsWrapper.append(labesHtml); 
     } 
     else{ 
      var labesHtml = $("<span></span>") 
          .addClass("main_slider_label active_label") 
          .data('index', counter) 
          .text(names[counter-1]); 
      labelsWrapper.append(labesHtml); 
     } 
    } 

    mainSlider.on('SlideChangeStart', function(){ 
     var current = mainSlider.activeIndex; 
     $('.main_slider_label').each(function() { 
      var thisLabel = $(this); 
      var dataIndex = $(thisLabel).data('index'); 
      if(dataIndex == current+1){ 
       $(thisLabel).addClass('active_label'); 
       $(thisLabel).siblings().removeClass('active_label'); 
      } 
     }); 
    }); 

    $('.main_slider_label').on('click', function(e){ 
     var clicked = $(this); 
     var sliderTarget = $(clicked).data('index'); 
     if(!$(clicked).hasClass('active_label')) 
     { 
      mainSlider.slideTo(sliderTarget-1);    
     } 
    }); 
}; 

あなたはバグか何かを見つけた場合、私は

Answer 2

ファーストを教えてくださいこれらのカスタムページネーションタブをありがとう、私はあなたのコードを使用するが、私は同じ問題を抱えていました。私はそのページを一度クリックするだけでしたが、ここでは私のために働いた解決策です。 デモを持っているか、どのようにこの作業を手に入れた、再生のための「onTransitionEnd」コールバック

onTransitionEnd: function(){ 
       $('.slider-tab').on('click', function(){ //slider-tab is a single tab 
        var target = $(this).data('index'); 
        blockSwiper.slideTo(target); 
        return; 
       }) 
      } 

と完全なコードで

$(document).find('.block-swiper').each(function (index) { 
     var $this = $(this); 
     var swiperTabs = $(this).find('.swiper-tabs'); 
     var blockSwiper = new Swiper($this, { 
      pagination: swiperTabs, 
      paginationClickable: true, 
      paginationType: 'custom', 
      slidesPerView: 1, 
      loop:true, 
      paginationCustomRender: function(swiper, current, total) { 
       var names = []; 
       var icons = []; 
       $this.find(".swiper-slide").each(function(i) { 
        names.push($(this).data("name")); 
        icons.push($(this).data("icon")); 
       }); 
       var text = "<div>"; 
       for (let i = 1; i <= total; i++) { 
        if (current != i) { 
         text += "<div class='slider-tab' data-index='"+i+"'>" + "<i class='fa " + icons[i-1] + " aria-hidden='true'></i>" + names[i-1] + "</div>"; 
        } else { 
         text += "<div class='slider-tab active' data-index='"+i+"'>" + "<i class='fa " + icons[i-1] + " aria-hidden='true'></i>" + names[i-1] + "</div>"; 
        } 
       } 
       text += "</div>"; 
       return text; 
      }, 
      onTransitionEnd: function(){ 
       $('.slider-tab').on('click', function(){ 
        var target = $(this).data('index'); 
        blockSwiper.slideTo(target); 
        return; 
       }) 
      } 
     }); 



    }); 

`