Toujours faire défiler les glissières de swiper vers le haut

Question

J'utilise swiper.js. Je voudrais toujours faire défiler les nouvelles diapositives actives vers le haut, donc quand une nouvelle diapositive entre dans la fenêtre d'affichage, le contenu doit être fait défiler vers le haut.

J'ai un violon ici: https://jsfiddle.net/p406sfe4/8/

Je pensais que ce script peut accomplir ce que j'ai besoin, mais il ne semble pas fonctionner:

swiper.on('slideChangeEnd', function(s) { 
    s.slides.each(function() { 
    if ($(this).index() !== s.activeIndex) $(this)[0].scrollTop = 0 
    }); 
}); 

Merci!

Answer 1

À moins que vous ne limitiez la hauteur du conteneur/des diapositives - provoquant un débordement - le contenu défilant ne sera pas réellement à l'intérieur de chaque diapositive. Dans ce cas, vous devriez vous concentrer sur la propriété scrollTop du conteneur de swap ou d'un autre élément parent.

Indépendamment de ce que vous faites défiler, l'événement fonctionnera mieux s'il est ajouté à la configuration d'initialisation. Pour utiliser le code de votre jsfiddle:

var swiper = new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination', 
    paginationClickable: true, 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    spaceBetween: 30, 
    hashnav: true, 
    autoHeight: true, 

    // attach callback here 
    onSlideChangeEnd: function (swiperObj) { 
    $('.swiper-container').css('scrollTop', '0'); 
    } 
});