如何在中心模式下创建 Slick Slider JS 幻灯片答案

【问题标题】：How to create a Slick Slider JS slideshow in center mode如何在中心模式下创建 Slick Slider JS 幻灯片
【发布时间】：2019-12-27 16:23:18
【问题描述】：

我想使用出色的 Slick Slider(https://kenwheeler.github.io/slick/) 来实现轮播，我之前用它来处理图像没有任何问题。我正在尝试创建一个像示例一样的“中心模式”幻灯片，除了使用多个 div；

我想做这样的事情；

这些是我想在 codepen 上使用的 div - https://codepen.io/grabthereef/pen/mdymmgM

     <!-- Single Card -->
     <div class="single_slide">
      <div class="row">
        <div class="col-lg-4">
          <div class="top-text">
            <h1>DG Aurum</h1>
          </div>
          <div class="view-button">
            <button type="button" class="btn btn-outline-danger-opposite shadow btn-sm m-1">Live View</button>
          </div>            
        </div>
        <div class="col-lg-8 text-center">
          <img src="https://i.imgur.com/jieUOmw.jpg" class="shadow website-image" alt="website image">
        </div>
      </div>
    </div>

问题是当我添加 Slick Slider 代码时，它会弄乱页面的布局；

https://codepen.io/grabthereef/pen/gObWBVG

我已尝试查看此处的其他问题，但找不到适合我的解决方案，我对 JS 还很陌生。

【问题讨论】：

标签： javascript html css slick.js

【解决方案1】：

如果你继续加载光滑的滑块 css 文件，那应该可以为你解决问题 //cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css。我只是在我自己的 codepen https://codepen.io/dthenley/pen/PowJbgN 上制作了一个非常简单的光滑滑块版本并从那里开始之后才发现这一点。在我添加 css 代码之前，我的滑块所做的与您所做的几乎相同。我还加载了一个文档准备功能

$(document).ready(function(){
  $('.your-class').slick();
});

【讨论】：