卡在光滑的轮播“中心模式”中答案

【问题标题】：Stuck with Slick Carousel "Center mode"卡在光滑的轮播“中心模式”中
【发布时间】：2015-03-09 20:01:21
【问题描述】：

我已经玩了几个小时的 Slick 轮播，实在不知道如何实现 Slick 网站上的“中心模式”：http://kenwheeler.github.io/slick/

看起来像这样：

我已经有了当前的代码，但它仍然没有给我我想要的：

< 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>

如果有人对为什么这可能不起作用有任何建议，我将非常感谢您的帮助。

谢谢。

【问题讨论】：

什么不起作用？你想让它做什么？

标签： javascript jquery carousel slick.js

【解决方案1】：

我认为这可能是光滑中心模式的合适答案

<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】：

您定义了 2 个滑块（中心，单项），而在您的 html 中只有“单项”有幻灯片。 “中心”幻灯片包裹着“单项”，仅包含一个子 div。
类单项用空格写成 3 个不同的类“单项”“-”（虽然我不认为这是一个类）和“项”。

如果您打算让“单项”幻灯片在 centerMode 中显示，那么这是正确的代码：

<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】：

清理您的 sn-p 以使其正常工作（将 HTML 移至 HTML 部分，删除无关和错误的空格）后，我不知道您的代码有什么问题。也许只是语法错误？

我注意到的主要事情是您在一个元素上使用了class="single - item"，该元素显然应该具有single-item 类，因为这是用于创建滑块的选择器。我不知道那是在您的原始代码中还是只是复制不正确。

$(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>

【讨论】：