Stuck with Slick Carousel “Center mode”

Question

I\'ve been toying around with Slick carousel for a fair few hours, and really can\'t get my head around how to implement the \"center mode\" that\'s on the Slick website: http:/

Answer 1

After cleaning up your snippet to work correctly (moved HTML to the HTML part, removed extraneous and erroneous white space), I can't tell what isn't working with your code. Maybe it was just syntax errors?

The main thing I noticed was that you had class="single - item" on an element that was clearly meant to have the class single-item, as that was the selector used to create your slider. I don't know if that was in your original code or if it was just copied incorrectly.

$(document).ready(function() {

    
    $('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

    $('.single-item').slick({
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    });
				
});

  

    

        

            
1
            
2
            
3
            
4
            
5
            
6