Stuck with Slick Carousel “Center mode”

问题

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://kenwheeler.github.io/slick/

It looks something like this:

Slick

I've got the current code in place, but it's still not giving me what I want:

< 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> 
<link rel="stylesheet" type="text/css
" href="
http: //kenwheeler.github.io/slick/css/style.css">
  < script type = "text/javascript"
src = "http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js" > < /script>


<script type="text/javascript
">
$(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
    });
				
});
</script>



<section id="
features " class="
blue ">
<div class="
center ">
    <div class="
content ">
        <div class="
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>

If anyone has any suggestions as to why this might not be working, I'd really appreciate the help.

Thanks.

回答1:

I think this might be appropriate answer for slick centre mode

<html>
  <head>
  <meta charset="utf-8">
  <title>Maganti IT Solution</title>
  <link rel="stylesheet" type="text/css" href="slick.css"/>
  <link rel="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% 0 10% 0;
    padding: 40% 20%;
    background: #008ed6;
  }
  .slider div{
    margin-right: 5px;
  }
  .slick-slide{
    opacity: .6;
  }
  .slick-center{
    display: block;
    max-width: 10% !important;
    max-height:20% !important;
    opacity: 1;


  }
  </style>
  <body>
  <section id="slick-content">

  <div class="slider">
    <div><div class="slide-h3">1</div></div>
    <div><div class="slide-h3">2</div></div>
    <div><div class="slide-h3">3</div></div>
    <div><div class="slide-h3">4</div></div>
    <div><div class="slide-h3">5</div></div>
    <div><div class="slide-h3">6</div></div>

  </div>
</body>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick.min.js"></script>

  <script type="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>

回答2:

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.
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> 
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/style.css" />
 <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"> </script>


<script type="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>



<section id="features" class="blue">
<div class="content">
    <div class="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>

回答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
    });
				
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/css/style.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>

<section id="features" class="blue">
  <div class="center">
    <div class="content">
        <div class="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>

来源：https://stackoverflow.com/questions/28950755/stuck-with-slick-carousel-center-mode

标签

javascript

jquery

carousel

slick.js