comment faire 2 Bootstrap sliders en une seule page sans mélanger leur css et jquery?

j'ai déjà construit les 2 glisseurs dans des index différents, mais en essayant de les faire tous les deux dans une seule page leur CSS et JQUERY seront mélangés......................... 

@media (min-width: 768px) {

/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
    display: block;
}

.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
    transition: none;
}

.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  position: relative;
  transform: translate3d(0, 0, 0);
}

.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -25%;
    z-index: -1;
    display: block;
    visibility: visible;
}

/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
}

/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
}

/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
}

C'est CSS De deuxième Slider 

$('#carouselExample').on('slide.bs.carousel', function (e) {

var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 4;
var totalItems = $('.carousel-item').length;

if (idx >= totalItems-(itemsPerSlide-1)) {
    var it = itemsPerSlide - (totalItems - idx);
    for (var i=0; i<it; i++) {
        // append slides to end
        if (e.direction=="left") {
            $('.carousel-item').eq(i).appendTo('.carousel-inner');
        }
        else {
            $('.carousel-item').eq(0).appendTo('.carousel-inner');
        }
    }
}

});

C'est JQuery de deuxième glisseur

seulement si vous me dites comment dévider le deuxième slider jquery et css du premier son ok

0
demandé sur Ahmed Najat 2018-03-23 15:52:23

1 réponses

Apprendre comment jQuery sélecteurs de classe travail .

Dans ce cas, vous avez 2 carrousels, et donc 2 éléments avec la classe carousel sur la même page. Ainsi, $('.carousel') peut être utilisé pour sélectionner et gérer l'événement slide.bs.carousel sur les deux des carrousels.

pour déterminer quelle instance du Carrousel est traitée, utilisez $(ceci). plus d'informations à propos $(this) . Ensuite ,vous pouvez manipuler le CSS pour cette seule instance de carrousel . 

$('.carousel').on('slide.bs.carousel', function (e) {

    var $e = $(e.relatedTarget);
    var $t = $(this);
    var $inner = $t.find('.carousel-inner');
    var idx = $e.index();
    var itemsPerSlide = 3;
    var totalItems = $t.find('.carousel-item').length;

    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $t.find('.carousel-item').eq(i).appendTo($inner);
            }
            else {
                $t.find('.carousel-item').eq(0).appendTo($inner);
            }
        }
    }
});

Merci de ne pas copier-coller ce code sans compréhension comment ça marche !

https://www.codeply.com/go/FiFtXFmt22

0
répondu Zim 2018-03-23 13:52:44