La barre de progression du curseur ne correspond pas au nombre de diapositives

Question

J'ai créé un carrousel contenant des éléments 7

Par défaut, ce carrousel affichera les éléments 5

Lors de ma démo, j'ai rencontré deux problèmes :

1. Le curseur est réglé sur boucle infinie, mais lorsqu'il revient à la diapositive 1, la barre de progression ne se réinitialise pas. ≪/li>
2. Une fois que le curseur atteint la fin, il revient immédiatement à la diapositive 1 (au lieu d'une transition douce). ≪/li>
3. Une fois la 7ème diapositive (7ème carte) visible, la barre de progression devrait se terminer. ≪/li>

$slider.slick("getSlick").slideCount's console.log renvoie 7, qui correspond au nombre d'éléments dans le curseur. Je ne sais donc pas quelle est la cause de ces problèmes.

(function($) {

  const $slider = $('#slider');
  var $progressBar = $('.progressBar__bar');

  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
    $progressBar.css('background-size', calc + '% 100%').attr('aria-valuenow', calc);
  });

  $slider.slick({
    slidesToShow : 5,
    slidesToScroll : 1,
    vitesse: 400,
    flèches : vrai,
    mobileFirst : vrai,
  });


})(jQuery);

.cardSlider {
  remplissage : 100px 0 ;
  fond : noir ;
  Couleur blanche;
}

.carte {
  la couleur noire;
  remplissage : 50 px ;
  alignement du texte : centre ;
}

.progressBar__bar {
  marge supérieure : 82 px ;
  position : relative ;
  bloc de visualisation;
  largeur : 100 % ;
  hauteur : 3px ;
  débordement caché;
  image d'arrière-plan : dégradé linéaire (à droite, jaune, jaune) ;
  répétition d'arrière-plan : pas de répétition ;
  taille de l'arrière-plan : 5 % 100 % ;
  transition : facilité d'entrée et de sortie de la taille de l'arrière-plan de 0,5 s ;
}

.progressBar__bar[aria-valuenow="0"] {
  taille de l'arrière-plan : 5 % 100 % !important ;
}

.progressBar__bar[aria-valuenow] {
  hauteur : 5px ;
}

.progressBar__bar:avant {
  contenu: "";
  position : absolue ;
  gauche : 0 ;
  haut : 50 % ;
  transformer : traduire (0%, -50 %);
  largeur : 100 % ;
  hauteur : 0,5 pt ;
  couleur de fond : blanc ;
}

.slick-slide {
  marge : 0px 10px ;
  affichage : aucun ;
  flotteur : gauche ;
  hauteur : 100 % ;
  hauteur minimale : 1 px ;
  aperçu : aucun !important ;
}

.slick-slide.slick-loading {
  affichage : aucun ;
}

.slick-slide.dragging img {
  événements de pointeur : aucun ;
}

.slick-slide img {
  largeur : 100 % ;
  bloc de visualisation;
}

.slick-slider {
  position : relative ;
  bloc de visualisation;
  dimensionnement de la boîte : bordure-boîte ;
  -webkit-touch-callout : aucun ;
  -khtml-user-select : aucun ;
  action tactile : pan-y ;
  -webkit-tap-highlight-color : transparent ;
}

.slick-liste {
  position : relative ;
  bloc de visualisation;
  débordement caché;
  marge : 0 ;
  remplissage : 0 ;
}

.slick-list:focus {
  contour : aucun ;
}

.slick-list.dragging {
  curseur : pointeur ;
  curseur : main ;
}

.slick-piste,
.slick-liste {
  transformer : traduire3d(0, 0, 0);
  transition : toutes les 150 ms de facilité ;
}

.slick-piste {
  position : relative ;
  haut : 0 ;
  gauche : 0 ;
  aligner les éléments : centre ;
  largeur : 100 % ;
}

.slick-track:avant,
.slick-track:après {
  affichage : tableau ;
  contenu: "";
}

.slick-track:après {
  clarifier les deux;
}

.slick-initialisé .slick-slide {
  bloc de visualisation;
}≪/pré>






  


    

      

        


          

            Carte 1
          

          

            Carte 2
          

          

            Carte 3
          

          

            Carte 4
          

          

            Carte 5
          

          

            Carte 6
          

          

            Carte 7
          

        
      
    

    

      

        

          

        
      
    

  
 

Answer 1

Je pense que la barre de progression fonctionne actuellement correctement dans votre code.

Pour le deuxième point que vous avez mentionné concernant la transition en douceur, veuillez supprimer le CSS suivant de votre code et essayez-le.

.slick-track,.slick-list {
   transform: translate3d(0, 0, 0);
  transition: all 150ms ease; 
}

Mise à jour

Veuillez consulter les modifications ci-dessous. J'ai également joint le lien Codepen ici : https://codepen.io/nandu1993/pen/xxjdZjd

.progressBar__bar {
  margin-top: 82px;
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background-image: linear-gradient(to right, yellow, yellow);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s ease-in-out;
}



$(document).ready(function () {

  const slider = $('#slider');
  var progressBar = $('.progressBar__bar');
  //for first time load
  slider.on('init', function (event, slick, currentSlide, nextSlide) {
    currentDot = $(".slick-dots .slick-active").index() + 1;
    dots = slider.find('.slick-dots li').length;
    calc = (currentDot / dots) * 100;
    progressBar.css('background-size', calc + '% 100%').attr('aria-valuenow', calc);
  });

  slider.on('afterChange', function (event, slick, currentSlide, nextSlide) {
    var currentDot = $(".slick-dots .slick-active").index() + 1;
    var dots = slider.find('.slick-dots li').length;
    var calc = (currentDot / dots) * 100;

    progressBar.css('background-size', calc + '% 100%').attr('aria-valuenow', calc);
  });

  slider.slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    autoplay: false,
    arrows: true,
    mobileFirst: true,
  });
});