CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Hidden
Hidden

Reputation: 3628

How to turn off carousel when resized?

I am using the <div id=Slider class="carousel slide" data-ride=carousel> displaying some images and text.

How can I disable the carousel when a mobile device is at the site? I want to improve the google score for mobile device.

If screen width <= 767 then remove carousel

Anyone can help with a js hack / css setting?

Upvotes: 1

Views: 2481

Answers (3)

Joe Swindell
Joe Swindell

Reputation: 671

With bootstrap you can simply add a class to hide elements based on size.

<768px

<div id=Slider class="carousel slide hidden-xs" data-ride=carousel>

=768px

 <div id=Slider class="carousel slide hidden-sm" data-ride=carousel>

=992px

<div id=Slider class="carousel slide hidden-md" data-ride=carousel>

=1200px

<div id=Slider class="carousel slide hidden-lg" data-ride=carousel>

Upvotes: 1

InsaneCoder
InsaneCoder

Reputation: 8288

If I understood correctly, you simply need .hidden-xs class to disable that carousel.

.hidden-xs -->  Extra small (less than 768px) hidden

Learn more here.

Upvotes: 3

Dan Orlovsky
Dan Orlovsky

Reputation: 1093

If I'm understanding you correctly, you simply need to use a media query on the screen with CSS3.

Here is a list of media queries for all the different screen sizes: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

So, yours would look something like:

@media only screen and (max-device-width: 768px){
    #Slider{
        display: none;
    }
}

This is saying: if the max width display is 768pixels, do not display the container with the id of (whatever the ID is).

Upvotes: 0

Related Questions