CODEWITHSUNDEEP
twitter-bootstrapcarousel
Sined
Sined

Reputation: 21

Bootstrap 3.3.4 Multi item slider (Carousel)

I'm trying to get working Boostrap carousel with separate 4 items. I use this JS code:

$('.carousel[data-type="multi"] .item').each(function() {
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});

And this CSS:

@media only screen (max-width: 767px) and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
  }
}
@media only screen (min-width: 767px) and (max-width: 992px ) and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(50%, 0, 0);
      transform: translate3d(50%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
  }
}
@media only screen (min-width: 992px ) and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(25%, 0, 0);
      -moz-transform: translate3d(25%, 0, 0);
      -ms-transform: translate3d(25%, 0, 0);
      transform: translate3d(25%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-25%, 0, 0);
      -moz-transform: translate3d(-25%, 0, 0);
      -ms-transform: translate3d(-25%, 0, 0);
      transform: translate3d(-25%, 0, 0);
  }
}

And this solution works in newest Chrome, but doesn't work in Firefox, IE, Mobile Chrome and Mobile Firefox. What I'm doing wrong? I think, that problem may be in transform support in other browsers... And second question: How to make in mobile visible only one item? So in PC I can see 4 items, on mobile only 1 item.

Items looks like this:

<div class="item active">
    <div class="col-md-3 col-sm-6 col-xs-12">
      something...
    </div>
</div>

Upvotes: 2

Views: 3347

Answers (1)

donutello
donutello

Reputation: 653

I found this solution for your problem. I've used 4 items in one line, and changed CSS like this:

.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(25%, 0, 0);
    -ms-transform: translate3d(25%, 0, 0);
    -o-transform: translate3d(25%, 0, 0);
    transform: translate3d(25%, 0, 0);
 }

.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
  left: 0;
  -webkit-transform: translate3d(-25%, 0, 0);
  -ms-transform: translate3d(-25%, 0, 0);
  -o-transform: translate3d(-25%, 0, 0);
  transform: translate3d(-25%, 0, 0);
}

.carousel-inner .active.left { left: -25%; }
.carousel-inner .active.right { left: 25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev        { left: -25%; }

And javaScript code is like:

$('.carousel .item').each(function () {
 var next = $(this).next();
 if (!next.length) {
     next = $(this).siblings(':first');
 }
 next.children(':first-child').clone().appendTo($(this));

 for (var i = 0; i < 2; i++) {
     next = next.next();
     if (!next.length) {
         next = $(this).siblings(':first');
     }

     next.children(':first-child').clone().appendTo($(this));
 }
});

Upvotes: 1

Related Questions