I would like to use two types of sliders.
First one : a simple gallery slider when viewing a page on a mobile device.
And a second one : a more complex slider when viewing the page on a computer.
What's the best way of doing this ?
Add a comment
|
2 Answers
You can use Media Query for this, Create 2 sliders differently
<div id="ComplexSlider" style="display: none;">
// All your code
</div>
<div id="Mobilelider" style="display: none;">
// All your code
</div>
@media (max-width: 320px){
#ComplexSlider{
display: none;
}
#MobileSlider{
display: block;
}
}
@media (min-width: 321px){
#ComplexSlider{
display: block;
}
#MobileSlider{
display: none;
}
}
Comments
Look at the doc : http://getbootstrap.com/css/#responsive-utilities-classes
You just have to specify which device you want to make visible or not in the class attribute.
.hidden-xs won't print on extra small device
.hidden-sm won't print on small device
.hidden-md won't print on medium device
.hidden-lg won't print on large device
<div id="ComplexSlider" class="hidden-xs ">
...
</div>
<div id="Mobilelider" class="hidden-sm hidden-md hidden-lg">
...
</div>