Bootstrap Karussell, modifiziert, um mehrere Artikel anzuzeigen. Nicht richtig funktioniert Firefox und IE

Question

Ich verbringe einige Zeit damit, Änderungen des Bootstrap-Karussells zu finden, das in der Lage ist, mehrere Elemente in einer Ansicht anzuzeigen. Anstelle eines Artikels. Alle Beispiele, die ich gefunden habe, haben jedoch einige kleinere Probleme. Das beste Beispiel, das ich gefunden habe, ist dieses: http://codepen.io/Jazzzper86/pen/BKVzNg.

Es funktioniert gut in Chrome aber, aber nicht in Firefox und Internet Explorer. Kennt jemand ein Beispiel für ein Bootstrap-Karussell, das in allen Browsern funktioniert? Und wenn nicht, welche Art von Karussell wäre eine gute Alternative? Vielen Dank!

das Javascript, das verwendet wird:

// Instantiate the Bootstrap carousel 
$('.multi-item-carousel').carousel({ 
    interval: false 
}); 

// for every slide in carousel, copy the next slide's item in the slide. 
// Do the same for the next, next item. 
$('.multi-item-carousel .item').each(function(){ 
    var next = $(this).next(); 
    if (!next.length) { 
    next = $(this).siblings(':first'); 
    } 
    next.children(':first-child').clone().appendTo($(this)); 

    if (next.next().length>0) { 
    next.next().children(':first-child').clone().appendTo($(this)); 
    } else { 
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
    } 
}); 

Die CSS (weniger), die verwendet wird:

.multi-item-carousel{ 
    .carousel-inner{ 
    > .item{ 
     transition: 500ms ease-in-out left; 
    } 
    .active{ 
     &.left{ 
     left:-33%; 
     } 
     &.right{ 
     left:33%; 
     } 
    } 
    .next{ 
     left: 33%; 
    } 
    .prev{ 
     left: -33%; 
    } 
    @media all and (transform-3d), (-webkit-transform-3d) { 
     > .item{ 
     // use your favourite prefixer here 
     transition: 500ms ease-in-out all; 
     backface-visibility: visible; 
     transform: none!important; 
     } 
    } 
    } 
    .carouse-control{ 
    &.left, &.right{ 
     background-image: none; 
    } 
    } 
} 

// non-related styling: 
body{ 
    background: #333; 
    color: #ddd; 
} 
h1{ 
    color: white; 
    font-size: 2.25em; 
    text-align: center; 
    margin-top: 1em; 
    margin-bottom: 2em; 
    text-shadow: 0px 2px 0px rgba(0, 0, 0, 1); 
} 

Die HTML

<div class="container"> 
    <h1>Use Bootstrap's carousel to show multiple items per slide.</h1> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="carousel slide multi-item-carousel" id="theCarousel"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
      <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div> 
      </div> 
      <div class="item"> 
      <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div> 
      </div> 
      <div class="item"> 
      <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div> 
      </div> 
      <div class="item"> 
      <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div> 
      </div> 
      <div class="item"> 
      <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div> 
      </div> 
      <div class="item"> 
      <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div> 
      </div> 
     </div> 
     <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
     <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

I https://bootsnipp.com/snippets/zDQkr

Lauf gefunden Dies Code-Snippet auf voller Breite Fenster

$(document).ready(function() { 
 
    var itemsMainDiv = ('.MultiCarousel'); 
 
    var itemsDiv = ('.MultiCarousel-inner'); 
 
    var itemWidth = ""; 
 

 
    $('.leftLst, .rightLst').click(function() { 
 
     var condition = $(this).hasClass("leftLst"); 
 
     if (condition) 
 
      click(0, this); 
 
     else 
 
      click(1, this) 
 
    }); 
 

 
    ResCarouselSize(); 
 

 

 

 

 
    $(window).resize(function() { 
 
     ResCarouselSize(); 
 
    }); 
 

 
    //this function define the size of the items 
 
    function ResCarouselSize() { 
 
     var incno = 0; 
 
     var dataItems = ("data-items"); 
 
     var itemClass = ('.item'); 
 
     var id = 0; 
 
     var btnParentSb = ''; 
 
     var itemsSplit = ''; 
 
     var sampwidth = $(itemsMainDiv).width(); 
 
     var bodyWidth = $('body').width(); 
 
     $(itemsDiv).each(function() { 
 
      id = id + 1; 
 
      var itemNumbers = $(this).find(itemClass).length; 
 
      btnParentSb = $(this).parent().attr(dataItems); 
 
      itemsSplit = btnParentSb.split(','); 
 
      $(this).parent().attr("id", "MultiCarousel" + id); 
 

 

 
      if (bodyWidth >= 1200) { 
 
       incno = itemsSplit[3]; 
 
       itemWidth = sampwidth/incno; 
 
      } 
 
      else if (bodyWidth >= 992) { 
 
       incno = itemsSplit[2]; 
 
       itemWidth = sampwidth/incno; 
 
      } 
 
      else if (bodyWidth >= 768) { 
 
       incno = itemsSplit[1]; 
 
       itemWidth = sampwidth/incno; 
 
      } 
 
      else { 
 
       incno = itemsSplit[0]; 
 
       itemWidth = sampwidth/incno; 
 
      } 
 
      $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers }); 
 
      $(this).find(itemClass).each(function() { 
 
       $(this).outerWidth(itemWidth); 
 
      }); 
 

 
      $(".leftLst").addClass("over"); 
 
      $(".rightLst").removeClass("over"); 
 

 
     }); 
 
    } 
 

 

 
    //this function used to move the items 
 
    function ResCarousel(e, el, s) { 
 
     var leftBtn = ('.leftLst'); 
 
     var rightBtn = ('.rightLst'); 
 
     var translateXval = ''; 
 
     var divStyle = $(el + ' ' + itemsDiv).css('transform'); 
 
     var values = divStyle.match(/-?[\d\.]+/g); 
 
     var xds = Math.abs(values[4]); 
 
     if (e == 0) { 
 
      translateXval = parseInt(xds) - parseInt(itemWidth * s); 
 
      $(el + ' ' + rightBtn).removeClass("over"); 
 

 
      if (translateXval <= itemWidth/2) { 
 
       translateXval = 0; 
 
       $(el + ' ' + leftBtn).addClass("over"); 
 
      } 
 
     } 
 
     else if (e == 1) { 
 
      var itemsCondition = $(el).find(itemsDiv).width() - $(el).width(); 
 
      translateXval = parseInt(xds) + parseInt(itemWidth * s); 
 
      $(el + ' ' + leftBtn).removeClass("over"); 
 

 
      if (translateXval >= itemsCondition - itemWidth/2) { 
 
       translateXval = itemsCondition; 
 
       $(el + ' ' + rightBtn).addClass("over"); 
 
      } 
 
     } 
 
     $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)'); 
 
    } 
 

 
    //It is used to get some elements from btn 
 
    function click(ell, ee) { 
 
     var Parent = "#" + $(ee).parent().attr("id"); 
 
     var slide = $(Parent).attr("data-slide"); 
 
     ResCarousel(ell, Parent, slide); 
 
    } 
 

 
});

.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; } 
 
    .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; } 
 
     .MultiCarousel .MultiCarousel-inner .item {width: 190px; float: left;} 
 
     .MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;} 
 
    .MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); } 
 
    .MultiCarousel .leftLst { left:0; } 
 
    .MultiCarousel .rightLst { right:0; } 
 
    
 
     .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel" data-interval="1000"> 
 
      <div class="MultiCarousel-inner"> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="pad15"> 
 
         <p class="lead">Multi Item Carousel</p> 
 
         <p>₹ 1</p> 
 
         <p>₹ 6000</p> 
 
         <p>50% off</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <button class="btn btn-primary leftLst">PREV</button> 
 
      <button class="btn btn-primary rightLst">NEXT</button> 
 
     </div> 
 
\t </div> 
 
</div>

pp.com/snippets/zDQkr