Geek Answers Handbook

How to change the boot carousel for mobile devices and tabs

I am using the bootstrap slider.

  • On the desktop, it has three slides with 4 fragments each

enter image description here

  • In the tabs they should be 4 slides with 3 fragments each

  • There must be 12 different slides on the mobile device

I think of the most effective and optimized way to implement it.

Option 1 Create 3 different sets of sliders. Make only one visible at a time

Option 2 Determine the width of the screen using jquery and programmatically add additional tiles in the form of slides, hide the extra ones. I think it will be very difficult.

Please help if there is a better way to implement this.

+7
javascript jquery slider carousel bootstrap-carousel
source share
1 answer

Here he is:

.carousel-inner .item.active { display: flex; } .carousel-inner .item { background-color: #212121; color: white; padding: 0 15px; } #desktopCarousel .carousel-inner .item > .row { min-height: 480px; } #tabletCarousel .carousel-inner .item > .row { min-height: 360px; } .carousel-inner .item > .row { flex-grow: 1; min-height: 320px; display: flex; flex-wrap: wrap; align-items: stretch; } .carousel-inner .item > .row [class^="col-"] { flex-grow: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; text-align: center; } .carousel-inner .item > .row .row { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: stretch; } .carousel-inner .item > .row .row [class^="col-"] { display: flex; flex-direction: column; align-items: stretch; justify-content: center; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="desktopCarousel" class="carousel slide hidden-xs hidden-sm" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#desktopCarousel" data-slide-to="0" class="active"></li> <li data-target="#desktopCarousel" data-slide-to="1"></li> <li data-target="#desktopCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="row"> <div class="col-sm-6"> First item </div> <div class="col-sm-6"> <div class="row"> <div class="col-sm-6"> Second item </div> <div class="col-sm-6"> Third item </div> </div> <div class="row"> <div class="col-sm-12"> Fourth item </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-6"> Fifth item </div> <div class="col-sm-6"> <div class="row"> <div class="col-sm-6"> Sixth item </div> <div class="col-sm-6"> Seventh item </div> </div> <div class="row"> <div class="col-sm-12"> Eighth item </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-6"> Nineth item </div> <div class="col-sm-6"> <div class="row"> <div class="col-sm-6"> Tenth item </div> <div class="col-sm-6"> Eleventh item </div> </div> <div class="row"> <div class="col-sm-12"> Twelfth item </div> </div> </div> </div> </div> </div> <a class="left carousel-control" href="#desktopCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#desktopCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div id="tabletCarousel" class="carousel slide hidden-xs hidden-md hidden-lg" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#tabletCarousel" data-slide-to="0" class="active"></li> <li data-target="#tabletCarousel" data-slide-to="1"></li> <li data-target="#tabletCarousel" data-slide-to="2"></li> <li data-target="#tabletCarousel" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="row"> <div class="col-sm-6"> First item </div> <div class="col-sm-6"> <div class="row"> <div class="col-sm-12"> Second item </div> <div class="col-sm-12"> Third item </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-6"> Fourth item </div> <div class="col-sm-6"> <div class="row"> <div class="col-sm-12"> Fifth item </div> <div class="col-sm-12"> Sixth item </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-6"> Seventh item </div> <div class="col-sm-6"> <div class="row"> <div class="col-sm-12"> Eighth item </div> <div class="col-sm-21"> Nineth item </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-6"> Tenth item </div> <div class="col-sm-6"> <div class="row"> <div class="col-sm-12"> Eleventh item </div> <div class="col-sm-12"> Twelvth item </div> </div> </div> </div> </div> </div> <a class="left carousel-control" href="#tabletCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#tabletCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div id="mobileCarousel" class="carousel slide hidden-sm hidden-md hidden-lg" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#mobileCarousel" data-slide-to="0" class="active"></li> <li data-target="#mobileCarousel" data-slide-to="1"></li> <li data-target="#mobileCarousel" data-slide-to="2"></li> <li data-target="#mobileCarousel" data-slide-to="3"></li> <li data-target="#mobileCarousel" data-slide-to="4"></li> <li data-target="#mobileCarousel" data-slide-to="5"></li> <li data-target="#mobileCarousel" data-slide-to="6"></li> <li data-target="#mobileCarousel" data-slide-to="7"></li> <li data-target="#mobileCarousel" data-slide-to="8"></li> <li data-target="#mobileCarousel" data-slide-to="9"></li> <li data-target="#mobileCarousel" data-slide-to="10"></li> <li data-target="#mobileCarousel" data-slide-to="11"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="row"> <div class="col-sm-12"> First item </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-12"> Second item </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-12"> Third item </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-12"> Fourth item </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-12"> Fifth item </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-12"> Sixth item </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-12"> Seventh item </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-12"> Eighth item </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-12"> Nineth item </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-12"> Tenth item </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-12"> Eleventh item </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-12"> Twelveth item </div> </div> </div> </div> <a class="left carousel-control" href="#mobileCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#mobileCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

Note that you don’t really need CSS (it just creates a layout for the desktop sliders, centers the content in each element (with flexbox) + colors, but I assume that you already got the ones that were covered). CSS has no prefix, and if that helps, you will find SCSS in the fiddle .

In addition, you can set different min-height for items on a mobile device / tablet / desktop.

Other than that, it's pretty clean ... bootstrap. No custom JS , no custom CSS . Just markup.

Edit: (as per comment). If you do not want all the sliders to work constantly and prefer to initialize each one based on the size listener, when changing the @media interval (I recommend enquire.js for this - 0.8 thousand min, works on any browser / device), place each markup carousels in a script, with different identifiers:

 <script id="desktop-markup" type="text/template"> <div id="desktopCarousel" class="carousel slide" data-ride="carousel"> <!-- carousel markup here --> </div> </script> <script id="tablet-markup" type="text/template"> <div id="tabletCarousel" class="carousel slide" data-ride="carousel"> <!-- carousel markup here --> </div> </script> <script id="mobile-markup" type="text/template"> <div id="mobileCarousel" class="carousel slide" data-ride="carousel"> <!-- carousel markup here --> </div> </script>

On the load page and when changing the media interval, get the contents of the template in accordance with the current @media interval (i.e. $('#mobile-markup').html() ), put it in the specified DOM container and run .carousel() On him:

 $('.carousel-container').html( $('#mobile-markup').html() ).find('.carousel').carousel(options); // where options is optional. :) // see http://getbootstrap.com/javascript/#carousel-options
+8
source share

More articles:


All Articles