logo标签列表

被Slick Carousel的“中心模式”卡住了

javascriptjquerycarouselslick.js
9
我已经花费了相当多的时间来研究Slick走马灯，但是我真的无法理解如何实现Slick网站上的“中心模式”：http://kenwheeler.github.io/slick/。

它看起来像这样：

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>

如果有人能提供原因并解决此问题，我将不胜感激。谢谢。
1
什么没有起作用？你想让它做什么？ - Austin Mullins
3个回答
2

我认为这可能是slick中心模式的适当答案。

<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
  1. 您定义了2个滑块（center、single-item），但在html中只有“single-item”有幻灯片。“center”幻灯片包裹着“single-item”，只有一个子div。
  2. 类名“single-item”中有空格，使其变成了3个不同的类名：“single”、“-”（尽管我认为这不是一个类）和“item”。

如果您想让“single-item”幻灯片在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>
0

在清理代码片段以使其正确工作（将HTML移动到HTML部分，删除多余和错误的空格）之后，我无法确定您的代码有什么问题。也许只是语法错误？

我注意到的主要问题是您在一个明显应该具有类别single-item的元素上使用了class="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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接