光滑显示2行，台式机6个项目和1行，移动设备1个项目 [英] Slick show 2 row, 6 items on desktop and 1 row, 1 item on mobile

问题描述

有人可以帮我弄清楚为什么我的代码无法正常工作吗?我正在尝试在全宽度上完成2行和6项，在移动设备上完成1行和1项.

Could someone help me figure out why my code isn't working? I'm trying to accomplish 2 rows and 6 items on the full width and 1 row with 1 item on mobile.

$('.your-class').slick({
        slidesToShow: 1,
  rows:2,
  slidesPerRow: 3,
    responsive: [{ 
        breakpoint: 500,
        settings: {
            arrows: true,
            infinite: false,
              rows:1,
  slidesPerRow: 1,
            slidesToShow: 1,    
        } 
    }]
});

<div class="your-class">
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
</div>

http://codepen.io/Kibs/pen/aNzvBG

谢谢

推荐答案

您必须在slick.js中更改一些代码，因此您必须使用未缩小的js版本来执行此操作.因此，在slick.js中找到以下两种方法:

You have to change some code in slick.js so you have to use the not minified js version to do that. So, find these two methods in slick.js:

• Slick.prototype.buildRows = function(){...}
• Slick.prototype.cleanUpRows = function(){...}

并将if条件从if( .options.rows> 1)更改为if( .options.rows> 0)

and change the if condition from if(.options.rows > 1) to if(.options.rows > 0)

模板:

<div class="carousel">
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
    </div>

CSS:

.slick-slide{
  img{
    width: 100%;
  }
}

JS:

$('.carousel').slick({
    dots: true,
    slidesPerRow: 3,
    rows: 2,
    responsive: [
    {
      breakpoint: 478,
      settings: {
        slidesPerRow: 1,
        rows: 1,
      }
    }
  ]
});

对我有用的

这篇关于光滑显示2行，台式机6个项目和1行，移动设备1个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！