CODEWITHSUNDEEP
javascriptjquerytransformcarouselslick.js
AlonsoCT
AlonsoCT

Reputation: 191

Switch vertical carousel (desktop) to horizontal carousel in mobile

They know a one plugin that let me change/transform a vertical (desktop view) carousel to a horizontal carousel on mobile devices?

Now I'm working with slick plugin but I can't get the result that I need, this is my JS code:

          $('.demo-slider).slick({
                      vertical: true;
                    });
           var windowWidth = $(window).width();
              if(windowWidth < 768){
                  $('.demo-slider').slick('unslick',function(){
                   $('.demo-slider).slick({
                      vertical: false;
                    });
                });
           }

Upvotes: 2

Views: 8276

Answers (2)

Anton Mikhaylenko
Anton Mikhaylenko

Reputation: 91

$('.demo-slider').slick({   
vertical: true,
responsive: [               
{
    breakpoint: 767,
    settings: {
    vertical: false
    }
}]
});

Slick have own responsive breakpoints. This will be work much better

Upvotes: 7

serraosays
serraosays

Reputation: 7899

I think where you are going wrong is you're initializing slick() twice (you also forgot closing ' on your jQuery selectors). I would switch the faux media query to be out of slick()'s initialization, like this:

// 1- Get window width 
var windowWidth = $(window).width();

// 2- For all devices under or at 768px, use horizontal orientation
if(windowWidth <= 768) {
  $('.demo-slider').slick({
    vertical: false,
  });
} 
// 3- For all devices over 768px, use vertical orientation
else {
  $('.demo-slider').slick({
    vertical: true,
  });
}

*note, I've never used slickslider, just looking at your JS.

Upvotes: 3

Related Questions