i using bootstrap slider.
- on desktop, has 3 slides 4 tiles each
on tabs, have 4 slides 3 tiles each
on mobile, there needs 12 different slides
i thinking of effective , optimized way of implementing this.
option 1 - create 3 different set of sliders. make 1 visible @ time
option 2 - detect screen width jquery , programmatically add tiles slides, hide ones. guess complicated.
please if there better way implement this.
here 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 don't need css (it creates layout desktop sliders, centers contents in each item (with flexbox) + colors, assume got covered). css un-prefixed and, in case helps, you'll find scss in the fiddle.
also, might want set different min-heights items on mobile/tablet/desktop.
other that, it's pretty clean... bootstrap. no custom js, no custom css. markup.
edit: (as per comment) if don't want sliders running @ times , prefer initialize each based on resize listener, when changing @media interval (i recommend enquire.js - 0.8k minified, runs on browser/device), place each carousel's markup in script, different id's:
<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 page load , on changing media interval, contents of template according current @media interval (i.e. $('#mobile-markup').html()), place inside designated dom container , run .carousel() on it:
$('.carousel-container').html( $('#mobile-markup').html() ).find('.carousel').carousel(options); // options optional. :) // see http://getbootstrap.com/javascript/#carousel-options 
Comments
Post a Comment