web-dev-qa-db-fra.com

Désactiver le contrôle précédent sur la première diapositive et désactiver le contrôle suivant sur la dernière diapositive

utilisez Slick et cherchez un moyen de désactiver et de masquer le contrôle prev jusqu'à ce que l'utilisateur clique sur la flèche suivante. De même, je souhaite que le contrôle Next soit désactivé et masqué dès que l'utilisateur atteint la dernière diapositive. 

Une bonne illustration de ce que j'essaie d'accomplir est ici

Slick a-t-il déjà un attribut pour cela que j'ai oublié? Est-ce quelque chose qui peut peut-être être accompli en utilisant CSS en ajoutant une classe désactivée?

La seule chose semblable que j'ai trouvée est ceci 

$('.pages .slider').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    infinite: false,
    onAfterChange: function(slide, index) {
        if(index == 4){
        $('.pages .slider').slickPause();

Mais ce n'est pas exactement ce que je recherche.

javascriptjqueryslick.js
8
gwar9

Solution

Vous pouvez ajouter le css pointer-events: none à votre bouton. Cette propriété css désactive tous les événements d'un élément. Donc, quelque chose comme ça.

// Slick stuff
   ...
   onAfterChange: function(slide, index) {
       if(index === 4) {
           $('.slick-next').css('pointer-events', 'none')
       }
       else {
           $('.slick-next').css('pointer-events', 'all')
       }
   }

Et quelque chose sur la même directive pour l'élément .slick-prev.

Dans cette solution, vous devriez extraire la fonction de la configuration et y mettre une référence avec quelque chose comme ceci.

// Inside slick config
onAfterChange: afterChange

// Below somewhere
var afterChange = function(slide, index) { //stuff here }

Vérifiez également s'il existe un moyen d'obtenir la longueur du curseur et de le vérifier au lieu de coder en dur 4 dans l'instruction if. Vous pouvez probablement faire quelque chose comme $('.slide').length

Modifier

Voici comment implémenter la fonction afterChange().

$(document).ready(function(){
    $('.scrollable').slick({
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 3,
        swipeToSlide: true,
        swipe: true,
        arrows: true,
        infinite: false,
     });

     $('.scrollable').on('afterChange', function (event, slick, currentSlide) {

        if(currentSlide === 2) {
            $('.slick-next').addClass('hidden');
        }
        else {
            $('.slick-next').removeClass('hidden');
        }

        if(currentSlide === 0) {
            $('.slick-prev').addClass('hidden');
        }
        else {
            $('.slick-prev').removeClass('hidden');
        }  
    })
});

Et quelques CSS, si vous voulez faire de l’animation, vous devriez le faire ici.

.slick-prev.hidden,
.slick-next.hidden {
    opacity: 0;
    pointer-events:none;
}
6
Raphael Parent

Il suffit d'utiliser infite: false et de créer un fichier CSS personnalisé pour la classe slick-disabled. Par exemple.

JS - jQuery 

$('.my-slider').slick({
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1
});

CSS

.slick-disabled {
    opacity: 0;
    pointer-events:none;
}
20
Jefferson Vasconcelos

Ajouter du code CSS:

.slick-disabled {
    display: none !important;
}
2
user10652642

Il existe un moyen simple de styler les boutons Précédent/Suivant si le premier ou le dernier élément est atteint. Assurez-vous que le mode infini est défini sur false. Puis coiffez les boutons comme ceci:

.slick-arrow[aria-disabled="true"]{
	opacity: .5;
}

C'est tout ce dont vous avez besoin!

1
Andre Nimczick

Une solution très simple est:

  1. définissez l'infini sur false. par exemple

    $('.my-slider').slick({
 infinite: false });

  2. ajouter le css suivant

    .slick-disabled { display: none; pointer-events:none; }

et c'est tout.

1
York Wang

J'ai modifié le comportement de slick.js directement, comme ceci:

// making the prevArrow not show on init:
if (_.options.infinite !== true) {
    _.$prevArrow
    .addClass('slick-disabled')
    .attr('aria-disabled', 'true')
    .css('display', 'none'); // The new line of code!
}

Et:

if (_.options.arrows === true &&
    _.slideCount > _.options.slidesToShow &&
    !_.options.infinite
) {
    _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    _.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');

    if (_.currentSlide === 0) {
        _.$prevArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
        _.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    } else if (_.currentSlide >= _.slideCount - _.options.slidesToShow && _.options.centerMode === false) {
        _.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
        _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    } else if (_.currentSlide >= _.slideCount - 1 && _.options.centerMode === true) {
        _.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
        _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    }
}

Juste une question d'utilisation de la méthode jquery .css() et de la définition de display. Semble travailler assez doucement.

0
MrBoJangles

une autre façon de le faire est de glisser vers la même diapositive lorsque vous glissez (précédent) sur la première diapo ou glissez (suivant) sur la dernière diapositive. Utilisez la méthode swiper swiper.SlideTo (n, n, m);

0
user7824557