CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
ShaneKm
ShaneKm

Reputation: 21328

Bootstrap using different jQuery plugin depending on resolution

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 ?

Upvotes: 0

Views: 85

Answers (2)

BENARD Patrick
BENARD Patrick

Reputation: 30975

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>

Upvotes: 1

Anup
Anup

Reputation: 9738

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;
}
}

Upvotes: 2

Related Questions