CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapcarousel
user5638822
user5638822

Reputation:

How to create a Bootstrap carousel with different set up depending of the screen size?

I have the following problem.

I am working with a bootstrap carousel which I would like to do the following.

When the screen is between MD and LG size I would like to have 3 items with 2 elements in row inside (image a). However when the screen resizes to SM and XS I would to have 6 items with 1 element in each item. (image B) I don’t know how to make it, and if it is possible.

ATM I am thinking to create 2 different carousels one for LG and MD and other for only SM XS and with @media queries show the carousel A or B. But my client wants just 1 carousel because he needs to use his data base on it, and if he has 2 different carousels that will mean more work for him.

Any advice will be very welcome.

PS: I have attached an image and example of code. enter image description here

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Affiliate marketing network delivering high quality affiliate programs for email marketing affiliates in the UK">
<meta name="Keywords" content="the affiliate people, affiliate people, affiliate marketing, affiliate network, affiliate programs, affiliate, affiliate program, affiliate marketing network, email markerting affiliates, email affiliate programs">
<meta name="robots" content="index,follow">

<title>
	test</title>


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Css -->
<link rel="stylesheet" type="text/css" href="TAP_css.css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="animate.min.css">


 <!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="TAP_js.js"></script>
            
            
            
 

              


<style> 
body,td,th {
	font-family: "Open Sans";
	font-size: 16px;
	color: #555;
	background-color: #fff;
}
 </style>

</head>

<body>


<!-- Reviews -->
<div class="rev_bg" id="test_bg">

<div class="container">
<div class="row">
<h3 class="rev_h3" id="test_h3"> TESTIMONIALS </h3> 
<p class="rev_t">Our clients and affiliates thoughts about us.
 Read more <span> <a  href="LINK HERE">The&nbsp;test&nbsp;teste&nbsp;testimonials </a> </span></p>
<hr class="rev_hr">

</div>
</div>



		<!-- CAROUSEL REV -->
<div class="container rev_carousel ">
<div class="row">


  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators rev_in20">
      <li data-target="#myCarousel" data-slide-to="0" class="active rev_bg1"></li>
      <li data-target="#myCarousel" data-slide-to="1" class="rev_bg1"></li>
      <li class="rev_bg1" data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
    
    
    <div class="item active"> 
    	<div class="row">
        <div class="col-md-6">1A TEST </div>
        <div class="col-md-6">1B TEST </div>
    	</div>
    </div>
    <div class="item">2 </div>
    <div class="item">3 </div>
    <div class="item">4 </div>
    <div class="item">5 </div>
    <div class="item">6 </div>
    
    

     
    </div>

    <!-- Left and right controls -->
    <a class="nobackground" href="#myCarousel" role="button" data-slide="prev">
      <span  class="glyphicon glyphicon-chevron-left rev_c_lef" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right nobackground " href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right rev_c_rig" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</div>
		<!--- END CAROUSEL REV -->

		
		

</div>
<!-- E Reviews -->



</body>
</html>

Upvotes: 2

Views: 3431

Answers (2)

Dolphine
Dolphine

Reputation: 119

Try this CSS

.carousel-showsixmoveone .carousel-control {
  width: 4%;
  background-image: none;
}
.carousel-showsixmoveone .carousel-control.left {
  margin-left: 15px;
}
.carousel-showsixmoveone .carousel-control.right {
  margin-right: 15px;
}
.carousel-showsixmoveone .cloneditem-1,
.carousel-showsixmoveone .cloneditem-2,
.carousel-showsixmoveone .cloneditem-3,
.carousel-showsixmoveone .cloneditem-4,
.carousel-showsixmoveone .cloneditem-5 {
  display: none;
}
@media all and (min-width: 768px) {
  .carousel-showsixmoveone .carousel-inner > .active.left,
  .carousel-showsixmoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showsixmoveone .carousel-inner > .active.right,
  .carousel-showsixmoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showsixmoveone .carousel-inner > .left,
  .carousel-showsixmoveone .carousel-inner > .prev.right,
  .carousel-showsixmoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner .cloneditem-1,
  .carousel-showsixmoveone .carousel-inner .cloneditem-2 {
    display: block;
  }
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-showsixmoveone .carousel-inner > .item.active.right,
  .carousel-showsixmoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .item.active.left,
  .carousel-showsixmoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .item.left,
  .carousel-showsixmoveone .carousel-inner > .item.prev.right,
  .carousel-showsixmoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
@media all and (min-width: 992px) {
  .carousel-showsixmoveone .carousel-inner > .active.left,
  .carousel-showsixmoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showsixmoveone .carousel-inner > .active.right,
  .carousel-showsixmoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showsixmoveone .carousel-inner > .left,
  .carousel-showsixmoveone .carousel-inner > .prev.right,
  .carousel-showsixmoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner .cloneditem-3,
  .carousel-showsixmoveone .carousel-inner .cloneditem-4,
  .carousel-showsixmoveone .carousel-inner .cloneditem-5 {
    display: block;
  }
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-showsixmoveone .carousel-inner > .item.active.right,
  .carousel-showsixmoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .item.active.left,
  .carousel-showsixmoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showsixmoveone .carousel-inner > .item.left,
  .carousel-showsixmoveone .carousel-inner > .item.prev.right,
  .carousel-showsixmoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
.container {
  margin-top: 50px;
}
body {
  font-family: 'Bitter', sans-serif;
  color: #E54A41;
  background-image: url('//static.rtpdesign.co.uk/blog/img/background.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 20%;
}
p {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  margin-bottom: 2em;
}

JS

(function(){
  $('#carousel123').carousel({ interval: false });
}());

(function(){
  $('.carousel-showsixmoveone .item').each(function(){
    var itemToClone = $(this);

    for (var i=1;i<2;i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-"+(i))
        .appendTo($(this));
    }
  });
}());


HTML

<div class="container">

  <div class="row">
    <div class="col-md-12">
      <div class="carousel carousel-showsixmoveone slide" id="carousel123">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive"></a></div>
          </div>          
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-xs-12 col-sm-12 col-md-6"><a href="#"><img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive"></a></div>
          </div>
        </div>
        <a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/dolphine/t344h8k6/1/

Upvotes: 1

allcaps
allcaps

Reputation: 11228

Just create a carousel with slides and put two div elements in each slide. First div visible at small viewport containing one image, second div visible in bigger viewport size containing two images.

Pseudo code:

<carousel>
    <slide>
       <wrapper visible at mobile>
          <image />
       </wrapper visible at mobile>
       <wrapper visible at desktop>
          <image />
          <image />
       </wrapper visible at desktop>
    </slide>
    ...
</carousel>

It's not perfect: The to be displayed images need to be a multiple of 2. The mobile viewport carousel will contain double the items needed.

This is no problem if you hide the slide indicators on mobile.

Upvotes: 0

Related Questions