jquery - 在没有动画中断的情况下居中多个 Slick Slides-6ren

jquery - 在没有动画中断的情况下居中多个 Slick Slides

转载作者：行者123 更新时间：2023-11-28 12:07:46

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

可见(也称为事件)幻灯片两侧的边距
响应式地确定有多少幻灯片是可见的屏幕尺寸

以下代码片段非常完整，可以全面描述我的目标和代码所在的环境。我已经进行了广泛的查看，但显然有一些 slider 会像一些奇怪的魔术盒一样切断你的内容不会打扰我能找到的很多人。

简而言之，我正在寻找一种干净的方法，让 slider 在静态时看起来像示例 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>

最佳答案

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>

关于jquery - 在没有动画中断的情况下居中多个 Slick Slides，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37311066/

文章推荐： jquery - 在 fontawesome 中堆叠图标

文章推荐： php - 刷新前显示 DIV

文章推荐： css - 如何在 Wordpress 中编辑博客标题

文章推荐： javascript - JavaScript 在与 == 进行比较时如何转换类型？

slick - 无法访问 Slick 查询的删除方法
这是非常非常令人沮丧的。一段时间以来，我一直在尝试使用 Slick，但障碍不断涌现。 Slick 的概念真的很棒，但是很难学，而且不像Scala，它没有“初学者”、“中级”和“高级”风格，各个阶段的人
slick - 如何使用可选外键查询 Slick 以返回所有有关系和无关系的记录？
我在 Event 上定义了一个可选的外键，它转到 EventType。我想查询所有事件，即使是那些具有 None (null) 事件类型的事件。这是在 Event 上定义的外键。 def eventT
slick - 在 Slick 案例类中定义多对一引用
Another question通过在“一”案例类 (Directorate) 中定义一个返回“多”类的 Seq 的方法来回答如何定义一对多关联(服务区)。但它没有解决问题的“双向”部分。使用该示例
slick - 我可以将 sysdate 设置为 Slick 表的日期列的默认值吗
我有一个向表中添加日期列的要求，默认值是由 oracle 的 sysdate 设置的，如下所示例子{...CREATED_ON DATE 默认系统日期我想使用 slick table ddl 创建
slick.js - 鼠标悬停在 slick.js 滑动时不要立即停止
当我设置 speed: 1000 , pauseOnHover工作正常，但一旦我将其设置为 speed: 10000 , pauseOnHover不能立即工作 - 它在几秒钟后工作。代码: $('#
slick - 在 Slick 3.x 中捕获异常
我正在 try catch Slick 3.x 中的 SQL 错误。下面的代码不打印任何内容，但如果在调试下跟踪，它工作正常(它打印失败)。这段代码有什么问题？ object TestSlick ex
slick - 在 Slick 3.x 中捕获异常
我正在 try catch Slick 3.x 中的 SQL 错误。下面的代码不打印任何内容，但如果在调试下跟踪，它工作正常(它打印失败)。这段代码有什么问题？ object TestSlick ex
slick - 如何使 insertOrUpdate 成为 Slick 中的已编译查询？
我一直在使用 Slick's insertOrUpdate since its release in 2.1版本没有任何问题。现在我正在尝试提高我的代码性能，而 insertOrUpdate 是瓶颈
slick - 在 Slick 3.x 中定义和读取可为空的日期列
我有一个列类型为日期的表。此列接受空值，因此，我将其声明为一个选项(请参阅下面的字段 perDate)。问题显然是从/到 java.time.LocalDate 的隐式转换/java.sql.Date
javascript - Slick Slider - 根据事件幻灯片将 slick 事件类应用于
我试图在拖动幻灯片时向 a 标签添加“slick active”类。该类在单击时应用，但无法弄清楚如何将其应用到其他类! 如果能帮助破译我的代码，我们将不胜感激! JS $(document).rea
jquery - Slick Slider slick-center 幻灯片动画
我有透明背景的 slider ，我想在悬停中心 div 时为 slider 背景制作动画，但在 slider 移动后，悬停效果会卡在所有以前具有“光滑中心”类的幻灯片上。任何建议如何解决它？ Sp 到
scala - Slick 3.1 - 将 Slick 表格行对象转换为案例类
我使用 Slick 3.1 代码生成器来创建默认对象和特征 Tables.scala 下面的方法有效，但我想隐式或显式地将 UserRow 和 PasswordsRow 转换为 User 和 User
slick.js - Slick Slider - Slider Syncing - 滚动缩略图而不更改主要内容？
我正在使用 Slick Slider 和 Slider Syncing 选项。是否可以滚动“缩略图”(示例中为 .slider-nav)而不更改主图像(示例中为 .slider-for)？我只想在您
javascript - 如何使用 vue-slick 捕获 Slick 事件？
似乎 vue-slick 还没有提供任何事件(afterChange、beforeChange、Swipe...)。就像 jQuery 版本一样。我应该使用 MutationObserver 来监听
javascript - Slick.js:Slick slider 无法正确拖动(弹回到第一张幻灯片)
问题我正在 WordPress 网站上设置一个灵活的 slider /轮播。一切工作/显示都很完美，但是 slider 已停止正确拖动。我仍然可以用鼠标物理拖动 slider ，它会按应有的方式进
javascript - slick 的 slider 图像仅在单击 slick 箭头后加载
我正在尝试使用 slick 库实现 slider 同步。我有一组来自后端的名为 pictures 的图像。我遍历这些图像，将它们填充到我的 slider-for 和 slider-nav div 下。
javascript - Slick Carousel Uncaught TypeError : $(. ..).slick 不是函数
不知何故，我无法正确使用 slick carousel ( http://kenwheeler.github.io/slick/ )。我收到以下错误: Uncaught TypeError: $(.
slick.js - 如何使 AOS 不与 Slick slider 一起工作？
我正在使用 AOS 在滚动条上显示 html 元素。它单独运行良好，但当我在包含 Slick slider 的页面上使用它时，应用 AOS 的元素不显示。元素被隐藏，如果有很多滚动，看起来浏览器向 A
slick.js - 如何使 AOS 不与 Slick slider 一起工作？
我正在使用 AOS 在滚动条上显示 html 元素。它单独运行良好，但当我在包含 Slick slider 的页面上使用它时，应用 AOS 的元素不显示。元素被隐藏，如果有很多滚动，看起来浏览器向 A
javascript - 如何解释 slick.js/slick-theme.css 奇怪的圆点样式加载问题？
在我测试slick.js 前端 slider 插件时，我发现在Chrome 浏览器中，有时导航点在class ".slick-dots li button:before" 突然变了来自内容:'•'

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 在没有动画中断的情况下居中多个 Slick Slides