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 在与 == 进行比较时如何转换类型？

javascript - Jquery Slide up and Slide down -first li always slide down
我嵌套了 ul li 列表 > dentry > 隔离 Material 活髓剂 eclipse 刻剂 > dentry 矫正 > dentry 药品 > 口服使用下面的 html De
android - fragment 交易动画 : slide in and slide out
我查看了一些关于 fragment 之间的动画交易的教程。我已经将这种方法用于动画并且效果很好: fragmentTransaction.setCustomAnimations(android.R.a
html - CSS : Panel body slide down and slide up
我有面板。我希望面板主体在单击面板标题的加号图标时向下滑动和向上滑动。我不会使用 jquery。我必须使用纯 CSS3 来完成。我正在使用 Angular 2 来处理条件。 .slide_down
javascript - jquery循环2 : how to get a slide by its slide number
我正在使用周期 2 ( http://jquery.malsup.com/cycle2/ ) 创建轮播，但我无法弄清楚如何通过“幻灯片编号”访问幻灯片。我可以使用cycle.API循环遍历幻灯片数组
R官包: Add slide numbers that reflect current slide position
我是记者和官员软件包的狂热用户，目前正试图过渡到官员的 Powerpoint 工作流程。我正在使用包含幻灯片编号占位符的幻灯片模板。使用 Reporters 时，我可以使用 doc % add_
google-slides-api - 下载 Google Slide 演示文稿(发布到网络)
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎不是关于 a specific programming problem, a software
css - ionic : how to hide ion slide pager on first slide
如何仅在第一张幻灯片上隐藏 ion slide pager？我的代码是这样的: ABC BCD 所以我有 2 张幻灯片，但只有一个标签。谢谢最佳答案你可以使用
google-slides-api - Google Slides API - 如何通过 API 更改主题
(对不起我的英语) 我在使用 Google Slides API 时遇到问题。使用 Google Slides API 创建新演示文稿时如何选择主题？谢谢。 1.创建演示文稿 functio
google-slides-api - 如何使用 Google Slides rest API 设置表格单元格填充属性？
有没有办法通过 rest API 更改 Google Slides 表格的表格单元格填充属性？更新表格单元格属性似乎没有任何单元格填充属性最佳答案虽然不完全相同，但可以通过设置单元格文本段落缩进
angularjs - Ionic ion-slide-box Update/Slide with ng-repeat
我尝试让 ion-slide-box 从某个索引开始。幻灯片 Controller : $ionicSlideBoxDelegate.slide(index); 滑动框温度: ... 这行不通。可能
javascript - jQuery 循环 : Scroll back to the first slide after the last slide
我有一个看起来像这样的 slider : $('#slider').cycle({ fx: 'scrollHorz', speed: 1250, timeout: 5000,
javascript - jQuery slider "slide"事件 : How do I determine the user's slide direction?
我一直在剖析 firebug 中的事件和 ui 对象，但它似乎没有任何我可以使用的东西。我错过了什么吗？我想我可以跟踪值的变化，但这似乎是一种困惑。 $(".selector").slider({
jQuery 无限轮播 : Slide # 2 replaced by Slide # 3 on first iteration
我正在构建一个无限的 jQuery 轮播。无限是它在向用户显示最终幻灯片后立即显示第一张幻灯片。为此，我在完成后回调函数中做了这个小调整 $('#slide li:last').after('#sli
jQuery .show ('slide' ，{ 方向 : 'right' }) doesn't work, 但 .show ('slide' ) 确实
我在顶部菜单(ListItems)的开头插入一个菜单选项并使用 $('#newMenuItem').show('slide'); 成功了。但是，我不喜欢它从左上角滑入的方式，所以我将其更改为 $('#
google-slides-api - 无法在 Google Slides API 上使用 PageSize 创建演示文稿
我正在尝试创建新的 4:3 演示文稿，而不是 16:9。我阅读了此引用文献并编写了一些 ruby 代码，但它不起作用。新演示文稿的高度与我指定的高度不同。 Method: presentatio
javascript - 谷歌应用程序脚本 : How to create slides on Google Slides and fill the placeholders in it with information from an array?
我有一个数组，我正在尝试使用其中的信息来创建 Google 幻灯片演示文稿。我需要一些帮助，如果可能的话，还需要一些我可以阅读的 Material ，以便更好地理解这些问题的可能解决方案。数组如下:
javascript - 带标签的旋转木马 : adjust active tab when carousel slides to next or previous slide
我有一个没有指示器按钮的 Twitter Bootstrap 3 旋转木马。我没有使用那些指示器按钮，而是使用选项卡(我在我的 CSS 中相应地设置了样式)。这样，用户就知道每张幻灯片是什么(基于选项
javascript - Ion slide box - 如何在 ion slide 中滑动全宽 iframe 视频
在我的页面上，我有一个用于图像的 ion-slide-box。由于在我的应用程序中用户将能够嵌入视频，因此我还应该将带有视频的 iframe 添加到同一个 slider 。这就是我的代码现在的样子:
javascript - Bootstrap 4 轮播 : make the slides at the left and right of the active slide visible
我正在开发全屏 Bootstrap 4 轮播。幻灯片不包含图像，而是包含视频和标题。我的目的是将幻灯片的标题放在事件幻灯片的左侧和右侧，在 slider 控件之上，给人以标题被用作控件的印象。所需
javascript - 使用 $index 更改 active-slide 后没有 ion-slide-box 更新
这是我遇到问题的特定 View 的 Controller 。 .controller('MenuCtrl', ['$rootScope','$scope','$state','$timeout','$

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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