Skip to content Skip to sidebar Skip to footer
Home / Carousel / Javascript / Jquery / Slick.js

Stuck With Slick Carousel "center Mode"

Post a Comment
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://kenwhee

Solution 1:

I think this might be appropriate answer for slick centre mode 

<html><head><metacharset="utf-8"><title>Maganti IT Solution</title><linkrel="stylesheet"type="text/css"href="slick.css"/><linkrel="stylesheet"type="text/css"href="slick-theme.css"/></head><style>.slick-center.slide-h3{
    color: #FFF;
  }
  .slider{
    width: 600px;  
    height:150px;
    margin: 20px auto;    
    text-align: center;
  }
  .slide-h3{
    margin: 10%010%0;
    padding: 40%20%;
    background: #008ed6;
  }
  .sliderdiv{
    margin-right: 5px;
  }
  .slick-slide{
    opacity: .6;
  }
  .slick-center{
    display: block;
    max-width: 10%!important;
    max-height:20%!important;
    opacity: 1;


  }
  </style><body><sectionid="slick-content"><divclass="slider"><div><divclass="slide-h3">1</div></div><div><divclass="slide-h3">2</div></div><div><divclass="slide-h3">3</div></div><div><divclass="slide-h3">4</div></div><div><divclass="slide-h3">5</div></div><div><divclass="slide-h3">6</div></div></div></body><scripttype="text/javascript"src="http://code.jquery.com/jquery-1.11.0.min.js"></script><scripttype="text/javascript"src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><scripttype="text/javascript"src="slick.min.js"></script><scripttype="text/javascript">
    $(document).ready(function(){
     $('.slider').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  speed:1500,
  index: 2,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
    });
  </script></body></html>

Solution 2:

  1. You have 2 sliders defined (center, single-item) while in your html only "single-item" has slides. The "center" slide is wrapping the "single-item" and holds only one child div.
  2. The class single-item was written with spaces making it 3 different classes "single" "-" (although I don't think this one is a class) and "item".

If you intended to make the "single-item" slide to show in centerMode then this is the right code:

<link rel="stylesheet"type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />
< script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js" > </script> 
<linkrel="stylesheet"type="text/css"href="http://kenwheeler.github.io/slick/css/style.css" /><scripttype="text/javascript"src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script><scripttype="text/javascript">
$(document).ready(function() {

$('.single-item').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
     }
    }
  ]
});             
});
</script><sectionid="features"class="blue"><divclass="content"><divclass="single-item"><div><h3>1</h3></div><div><h3>2</h3></div><div><h3>3</h3></div><div><h3>4</h3></div><div><h3>5</h3></div><div><h3>6</h3></div></div></div></section>

Solution 3:

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
    });
				
});
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkhref="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"rel="stylesheet"/><linkhref="http://kenwheeler.github.io/slick/css/style.css"rel="stylesheet"/><scriptsrc="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script><sectionid="features"class="blue"><divclass="center"><divclass="content"><divclass="single-item"><div><h3>1</h3></div><div><h3>2</h3></div><div><h3>3</h3></div><div><h3>4</h3></div><div><h3>5</h3></div><div><h3>6</h3></div></div></div></div></section>

Post a Comment for "Stuck With Slick Carousel "center Mode""