将多个光滑幻灯片居中而不切断动画

Question

因此，为了直观地了解我要解释的内容，我有一个 Codepen example 或下面包含的相同示例代码。但本质上，我想知道Slick.js 中是否有我忽略的设置或优雅的 jQuery hack 可以让我完成以下操作：

1. 可见（也称为活动）幻灯片两侧的边距

2. 根据 屏幕尺寸

下面的 sn-p 非常完整，可以全面了解我的目标以及代码所在的环境。我进行了广泛的研究，但显然有一些滑块会像一些奇怪的魔法一样切断你的内容盒子不会打扰我能找到的很多人。

简而言之，我正在寻找一种干净的方法，让滑块在静态时看起来像示例 1，但在过渡期间，它会一直滑出页面，而不仅仅是被一个很小的父元素隐藏。

我目前正在研究解决示例 2 的问题，但它需要我认为是杂乱无章的做法。

$("#slickA").slick({
  slidesToShow: 1
});
$("#slick1").slick({
  slidesToShow: 2
});
$("#slick2").slick({
  slidesToShow: 2
});

.slick-prev,
.slick-next,
.slick-prev:before,
.slick-next:before,
.slick-prev:hover,
.slick-next:hover,
.slick-prev:hover:before,
.slick-next:hover:before {
  color: inherit;
  z-index: 10;
}
.stripe > ul .slick-prev {
  left: 20px;
}
.stripe > ul .slick-next {
  right: 20px;
}
.stripe > .container > p,
.stripe > .container > ul {
  text-align: left;
  padding: 35px;
  margin: 0;
}
.stripe > .container > hr {
  margin: 50px 0;
}
ul.slider {
  padding: 0;
  margin: 0;
}
.slider li {
  list-style: none;
}
.image {
  background: black;
  position: relative;
  width: 100%;
  padding: 0 0 100% 0;
}
#nav-spacer {
  display: block;
  height: 50px;
}
.stripe {
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.default {
  color: White;
  background: DarkCyan;
}
.inverse {
  color: DarkCyan;
  background: White;
}
.grey {
  color: White;
  background: DimGrey;
}
.grey-light {
  color: DimGrey;
  background: White;
}
.color {
  color: DarkOrange;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js" integrity="sha384-ZULtytbCZdmL8PeKalcAKnseGOqrCiPBi3DiB7s4JJmS8gjSbfw0w8SPKpt9WemG" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div id="nav-spacer"></div>
<div class="stripe default">
  <div class="container">

    <div class="starter-template">
      <h1>Bootstrap starter template</h1>
      <p class="lead">Use this document as a way to quickly start any new project.
        <br>All you get is this text and a mostly barebones HTML document.</p>
    </div>

  </div>
</div>
<div class="stripe grey-light">
  <div class="container">
    <hr />
  </div>
</div>
<div class="stripe inverse">
  <div class="container">
    <h2>Slick Example Precursor</h2>
  </div>
  <ul id="slickA" class="slider">
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>
    <li>
      <div class="container">
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </div>
    </li>

  </ul>
  <div class="container">
    <p>
      This is what I would like to see with 2 slides visible at a time with large screens maybe even 3 but on mobile only display 1 slide at a time while maintaining margins.
    </p>
  </div>
</div>
<div class="stripe default">
  <div class="container">
    <h2>Slick Example 1</h2>
    <ul id="slick1" class="slider">
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="col-xs-4">
            <div class="image"></div>
          </div>
          <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
            solely on the bottom line.</div>
        </div>
      </li>


    </ul>
    <p>
      Sure this works but it is hardly visually acceptable as it cuts off the slide the second it hits the edge of the container. But on the upside it only shows 2 slides and has nice margins.
    </p>
  </div>
</div>
<div class="stripe inverse">
  <div class="container">
    <h2>Slick Example 2</h2>
  </div>
  <ul id="slick2" class="slider">
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>
    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>

    <li>
      <div class="row">
        <div class="col-xs-4">
          <div class="image"></div>
        </div>
        <div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
          solely on the bottom line.</div>
      </div>
    </li>

  </ul>
  <div class="container">
    <p>
      This feels closer but I don't want any static content outside the margins.
    </p>
  </div>
</div>
<div class="stripe grey-light">
  <div class="container">
    <hr />
  </div>
</div>

<div class="stripe grey">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>
    </p>
  </div>
</div>
<div class="stripe default">
  <div class="container">
    <p>
      Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
      innovation via workplace diversity and empowerment.
    </p>
  </div>
</div>
<div class="stripe grey-light">
  <div class="container">
    <hr />
  </div>
</div>
<div class="stripe grey">
  <div class="container">
    <p>
      Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content
      in real-time will have multiple touchpoints for offshoring.
    </p>
    <ul>
      <li>
        Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely
        on the bottom line.
      </li>
      <li>
        Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to
        derive convergence on cross-platform integration.
      </li>
      <li>
        Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
      </li>

    </ul>
  </div>
</div>
<div class="stripe inverse">
  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
        <p><a class="btn btn-default" href="#" role="button">View details »</a>
        </p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
        <p><a class="btn btn-default" href="#" role="button">View details »</a>
        </p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-default" href="#" role="button">View details »</a>
        </p>
      </div>
    </div>

    <hr>
  </div>
</div>

Answer 1

Here 是我想出的 hack 修复.... 它当然不是完美的。我很想得到任何帮助来优化或用更好的解决方案替换它。

这是使其工作的核心 javascript：

$slides.each(function(index) {
    var col_width = Math.floor(12 / number_of_slides_per_view);

    var $this = $(this);
    if (index + 1 > (total_number_of_slides - slides_to_skip)) {
        $this.remove();
    } else {
        $this.addClass('col-xs-' + col_width);
        $row.append($this);

        if (index % number_of_slides_per_view == number_of_slides_per_view - 1) {
            $container.append($row);
            $li.append($container);
            $slick_slider.append($li);
            $li = $('<li></li>');
            $container = $('<div></div>').addClass('container');
            $row = $('<div></div>').addClass('row');
        }
    }
});

$slick_slider.slick({
    slidesToShow: 1
});

这确实有效，但使用这样的方法存在严重的缺陷。这为禁用了 javascript 的用户提供了不可接受的回退。如果窗口因任何原因重新调整大小，则需要完全刷新页面才能再次在视觉上可接受。这很容易通过在这个答案上运行嵌入式脚本并全屏显示......它应该一次显示 4 张幻灯片，但是因为所发生的只是容器的扩展，所以代码不会重新运行，也不能没有办法撤消它第一次所做的事情。

var $slick_slider = $("#slickA");

var $li = $('<li></li>');

var $container = $('<div></div>').addClass('container');

var $row = $('<div></div>').addClass('row');

var width = $(window).width();

var $slides = $(".my-slide");

var total_number_of_slides = $slides.length;

var number_of_slides_per_view = 1;

if (width >= 1200) {
	number_of_slides_per_view = 4;
}
if (width >= 992 && width < 1200) {
	number_of_slides_per_view = 3;
}
if (width >= 768 && width < 992) {
	number_of_slides_per_view = 2;
}
if (width >= 0 && width < 768) {
	number_of_slides_per_view = 1;
}

var slides_to_skip = total_number_of_slides % number_of_slides_per_view;

$slides.each(function(index) {
	var col_width = Math.floor(12 / number_of_slides_per_view);

	var $this = $(this);
	if (index + 1 > (total_number_of_slides - slides_to_skip)) {
		$this.remove();
	} else {
		$this.addClass('col-xs-' + col_width);
		$row.append($this);

		if (index % number_of_slides_per_view == number_of_slides_per_view - 1) {
			$container.append($row);
			$li.append($container);
			$slick_slider.append($li);
			$li = $('<li></li>');
			$container = $('<div></div>').addClass('container');
			$row = $('<div></div>').addClass('row');
		}
	}
});

$slick_slider.slick({
	slidesToShow: 1
});

.slick-prev, 
.slick-next,
.slick-prev:before, 
.slick-next:before,
.slick-prev:hover, 
.slick-next:hover,
.slick-prev:hover:before, 
.slick-next:hover:before 
{
	color: inherit;
	z-index: 10;
}
.stripe > ul .slick-prev
{
	left: 20px;
}
.stripe > ul .slick-next
{
	right: 20px;
}


.stripe > .container > p,
.stripe > .container > ul
{
	text-align: left ;
	padding: 35px;
	margin: 0;
}
.stripe > .container > hr
{
	margin: 50px 0;
}
ul.slider
{
	padding: 0;
	margin: 0;
}
.slider li
{
	list-style: none;
}
.image
{
	background: black;
	position: relative;
	width: 100%;
	padding: 0 0 100% 0;
}







#nav-spacer
{
	display: block;
	height: 50px;
}
.stripe
{
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.default
{
  color: White;
  background: DarkCyan;
}


.inverse
{
  color: DarkCyan;
  background: White;
}


.grey
{
  color: White;
  background: DimGrey;
}

.grey-light
{
  color: DimGrey;
  background: White;
}
.color
{
  color: DarkOrange;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js" integrity="sha384-ZULtytbCZdmL8PeKalcAKnseGOqrCiPBi3DiB7s4JJmS8gjSbfw0w8SPKpt9WemG" crossorigin="anonymous"></script>

<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
			<a class="navbar-brand" href="#">Project name</a>
		</div>
		<div id="navbar" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#about">About</a></li>
				<li><a href="#contact">Contact</a></li>
			</ul>
		</div>
	</div>
</nav>
<div id="nav-spacer"></div>
<div class="stripe default">
	<div class="container">

		<div class="starter-template">
			<h1>Bootstrap starter template</h1>
			<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
		</div>

	</div>
</div>
<div class="stripe grey-light">
	<div class="container">
		<hr />
	</div>
</div>
<div class="stripe inverse">
	<div class="container">
		<h2>Slick Responsive Hack Example</h2>
	</div>
	<ul id="slickA" class="slider">
				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>
				<div class="my-slide">
					<div class="col-xs-4">
						<div class="image"></div>
					</div>
					<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
						solely on the bottom line.</div>
				</div>

	</ul>
	<div class="container">
		<p>
			This works but isn't optimal as it takes extra processing on the client side before it is viewable and if the window is resized for some reason then the page will need to be reloaded for it to be visually corrected again.
		</p>
	</div>
</div>
<div class="stripe grey-light">
	<div class="container">
		<hr />
	</div>
</div>

<div class="stripe grey">
	<div class="container">
		<h1>Hello, world!</h1>
		<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
		<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
	</div>
</div>
<div class="stripe default">
	<div class="container">
		<p>
			Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
			innovation via workplace diversity and empowerment.
		</p>
	</div>
</div>
<div class="stripe grey-light">
	<div class="container">
		<hr />
	</div>
</div>
<div class="stripe grey">
	<div class="container">
		<p>
			Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content
			in real-time will have multiple touchpoints for offshoring.
		</p>
		<ul>
			<li>
				Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely
				on the bottom line.
			</li>
			<li>
				Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to
				derive convergence on cross-platform integration.
			</li>
			<li>
				Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
			</li>

		</ul>
	</div>
</div>
<div class="stripe inverse">
	<div class="container">
		<!-- Example row of columns -->
		<div class="row">
			<div class="col-md-4">
				<h2>Heading</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
				<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
			</div>
			<div class="col-md-4">
				<h2>Heading</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
				<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
			</div>
			<div class="col-md-4">
				<h2>Heading</h2>
				<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
				<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
			</div>
		</div>

		<hr>
	</div>
</div>

Answer 2

这是一个更多的 css，更少的 javascript 可能性，但有时它仍然相当小故障，必须有一种方法来优化视觉性能，但这对我来说是个谜。我将把它留在这里，以防有人有办法改进它，或者如果有人发现这足以满足他们的需求，那么他们就可以使用它。

---

我试图在代码 sn-p 中让代码在这里工作，但无法弄清楚它出了什么问题......无论如何，它至少在 Codepen 上工作。

实现中的关键 CSS：

.slick-slide
{
 display: flex;
 justify-content: center;
 align-items: center;
 transition: margin 0.8s;
 margin: 0;
} 

.slick-slide.slick-current
{
 margin-left: 21vw;
}
@media (min-width: 1201px) {
  .slick-slide
  {
   width: calc( 60vw / 4 )
  }
  .slick-slide.slick-current + .slick-slide.slick-active + .slick-slide.slick-active + .slick-slide.slick-active
  {
   margin-right: 21vw;
  }
}
@media (max-width: 1200px) {
  .slick-slide
  {
   width: calc( 60vw / 3 )
  }
  .slick-slide.slick-current + .slick-slide.slick-active + .slick-slide.slick-active
  {
   margin-right: 21vw;
  }
}
@media (max-width: 950px) {
  .slick-slide
  {
   width: calc( 60vw / 2 )
  }
  .slick-slide.slick-current + .slick-slide.slick-active
  {
   margin-right: 21vw;
  }
}
@media (max-width: 760px) {
  .slick-slide
  {
   width: calc( 60vw )
  }
  .slick-slide.slick-current
  {
   margin-right: 21vw;
  }
 }