如何在不混合css和jquery的情况下在单个页面中制作2个bootstrap滑块? [英] how to make 2 bootstrap sliders in single page without mixing their css and jquery?

问题描述

我已经在不同的索引中构建了两个滑块，但是当试图将它们都放在一个页面中时，它们的CSS和JQUERY将会混合在一起. ........

i already built the 2 sliders in different indexes ,, but when trying to make both of them in a single page their CSS and JQUERY will get mixed.........................

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

这是Second Slider的CSS

this is CSS of Second 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');
        }
    }
}

});

这是第二个滑块的jQuery

this is JQuery of second slider

仅当您告诉我如何从第一个滑块jquery和css出发时就可以了

only if you tell me how to devide second slider jquery and css from first one its ok

推荐答案

了解如何使用jQuery类选择器起作用.

Learn how jQuery class selectors work.

在这种情况下，您有2个轮播，因此在同一页面上有2个类别为carousel的元素.因此，$('.carousel')可用于选择和处理轮播的两者上的slide.bs.carousel事件.

In this case you have 2 carousels, and therefore 2 elements with the class carousel on the same page. So, $('.carousel') can be used to select and handle the slide.bs.carousel event on both of the carousels.

要确定正在处理哪个轮播实例，请使用$(this). 了解有关$(this)的更多信息.然后，您可以为该单个轮播实例操作CSS .

To determine which carousel instance is being handled, use $(this). Read more about $(this). Then you can manipulate the CSS for that single carousel instance.

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

请不要在没有了解工作原理的情况下复制并粘贴此代码！

Please don't copy-and-paste this code without first understanding how it works!

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

这篇关于如何在不混合css和jquery的情况下在单个页面中制作2个bootstrap滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！