CODEWITHSUNDEEP
jquerypluginscarouselslick.js
sher
sher

Reputation: 15

how can I have responsive page by using slick plugin for sliding image using .your-class and multiple-items class for phone, tablet

I want to create webpage that for phone screen shows one image but I can slide to next and previous image. Then for tablet screen have 2 images slide to next two images and 2 previous images. call these in media query? each of them work correctly but I want to bring them all in different screen size?

// showing single item 
    $('.your-class').slick();

// showing tablet
  $('.multiple-items').slick({
    infinite: true,
    slidesToShow: 2,
    slidesToScroll: 2
    });

// SHOWING 4 COLUMN desktop
    $('.multiple-items4').slick({
  infinite: true,
  slidesToShow: 4,
  slidesToScroll: 4
});

Upvotes: 1

Views: 116

Answers (2)

Umair Khan
Umair Khan

Reputation: 21

you need to give the breakpoints for responsiveness.

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

Upvotes: 2

sher
sher

Reputation: 15

Yes, got it thank a lot, this code works now:

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

Upvotes: 1

Related Questions