pagination personnalisée de swiper glisse seulement une fois

Question

J'ai fait une glissière d'image très simple avec swiper puis ai ajouté la pagination personnalisée en utilisant le "paginationCustomRender" jQuery et les attributs de données elle produit la pagination juste bien et tout fonctionne en glissant mais n'est pas cliquable donc j'ai ajouté un petite fonction pour indiquer à mon curseur de "slideTo()" la diapositive ciblée lorsque l'on clique sur l'une des étiquettes de la pagination mais cela ne fonctionne qu'une seule fois et la fonction ne redémarre pas. J'ai cherché et de ce que j'ai découvert la plupart des gens n'ont pas utilisé les options intégrées de swiper et l'ont fait eux-mêmes alors je me demandais ce que je devrais faire et quelle est la meilleure approche pour le faire.

Merci à l'avance

voici mon code 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> 

et voici les 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

J'adore Chipeur mais en utilisant parfois il peut être une vraie douleur la crosse semble que le groupe iDangero a besoin de faire quelques changements car actuellement ce plugin ne supporte pas la pagination personnalisée entièrement fonctionnelle,

Alors, voici ma solution:

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);    
     } 
    }); 
}; 

Si vous avez trouvé un bug ou quelque chose s'il vous plaît laissez-moi savoir

Answer 2

d'abord vous remercier pour les onglets de pagination personnalisée, j'ai utilisé votre code mais j'ai eu le même problème: Je ne pouvais cliquer qu'une fois sur ces paginations, voici la solution qui a fonctionné pour moi. Ajouter votre changement de diapositive dans « onTransitionEnd » rappel

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

et le code complet

$(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; 
       }) 
      } 
     }); 



    }); 

`