Question

光滑的中心模式轮播 - 我想在移动视图中只有3个产品图片。请帮忙

<!DOCTYPE html>
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" type="text/css" href="slick/style.css"/>
</head>
<body>
<div class="content">
    <div class="slider center">
      <div><h3><img src="images/image1.png"><p>Toilet Cleaning Gel</p></h3></div>
      <div><h3><img src="images/image2.png"><p>Multi-Surface Bathroom Cleaner</p></h3></div>
      <div><h3><img src="images/image3.png"><p>Bathroom Cleaner</p></h3></div>
      <div><h3><img src="images/image1.png"><p>Toilet Cleaning Gel</p></h3></div>
      <div><h3><img src="images/image2.png"><p>Multi-Surface Bathroom Cleaner</p></h3></div>
      <div><h3><img src="images/image3.png"><p>Bathroom Cleaner</p></h3></div>
    </div>


</div>

<script type="text/javascript" src="slick/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.js"></script>

<script type="text/javascript">
    $(document).ready(function(){

      $('.center').slick({
        dots: true,
        centerMode: true,
        infinite: true,
        centerPadding: '60px',
        slidesToShow: 3,
        speed: 500,
        responsive: [{
            breakpoint: 768,
            settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 3
            }
        }, {
            breakpoint: 480,
            settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 3
            }
        }]
    });
    });
  </script>




</body>
</html>

我只想要3种产品。但它显示了5种产品。 width是从slick.js动态生成的。请告诉我哪里有更新。

Answer 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<br><img src"http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg"></div></div>
    <div><div class="slide-h3">3<br><img src"http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg"></div></div>
    <div><div class="slide-h3">4<br><img src"http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg"></div></div>
    <div><div class="slide-h3">5<br><img src"http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg"></div></div>
    <div><div class="slide-h3">6<br><img src"http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg"></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>

Answer 2

不确定是否理解得很好，但如果通过3个产品图像计算中心模式两侧显示的半图像，则只需将设置更改为仅显示1张幻灯片：

<script type="text/javascript">
$(document).ready(function(){

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

光滑的中心模式轮播 - 我想在移动视图中只有3个产品图像

2 个答案: