I am using a bootstrap slider.
- On desktop, it has three slides with 4 tiles each
On Tabs, they have to be 4 slides with 3 tiles each
On Mobile, there needs to be 12 different slides
I am thinking of the most effective and optimized way of implementing this.
Option 1 - Create 3 different set of sliders. Make only one visible at a time
Option 2 - Detect the screen width with jquery and programmatically add extra tiles as slides, hide the extra ones. I guess this will be very complicated.
Please help if there is a better way to implement this.
Here it is:
Note you don't actually need the CSS (it just creates the layout for desktop sliders, centers the contents in each item (with flexbox) + colors, but I assume you already got those covered). CSS is un-prefixed and, in case it helps, you'll find the SCSS in the fiddle.
Also, you might want to set different
min-height
s for items on mobile/tablet/desktop.Other than that, it's pretty clean... bootstrap. No custom
JS
, no customCSS
. Just markup.Edit: (as per comment) If you don't want all sliders running at all times and prefer to initialize each based on a resize listener, when changing the
@media
interval (I recommend enquire.js for this - 0.8k minified, runs on any browser/device), place each carousel's markup in a script, with different id's:On page
load
and on changing the media interval, get the contents of the template according to current@media
interval (i.e.$('#mobile-markup').html()
), place it inside the designated DOM container and run.carousel()
on it: