javascript - 光滑 slider : Get rid of partial/edge images in centerMode

Question

我正在尝试使用 Slick Slider 创建自定义 slider jQuery 插件。

因为我想让中间(事件)图像比其他图像更大，所以我选择了 centerMode 来实现这一点。但是，默认情况下，此模式会在 slider 的左右边缘显示部分图像。

有人知道或知道如何摆脱这些吗？谢谢!

[链接到Codepen ]

HTML:

<div class="col-md-12">   <!-- Text Navigation -->   <div class="row hidden-phone" id="slider-thumbs">
    <div class="col-lg-12">
      <ul class="thumbnails">
        <li class="col-lg-2">
          <a class="thumbnail" id="carousel-selector-0">One</a>
        </li>
        <li class="col-lg-2">
          <a class="thumbnail" id="carousel-selector-1">Two</a>
        </li>
        <li class="col-lg-2">
          <a class="thumbnail" id="carousel-selector-2">Three</a>
        </li>
        <li class="col-lg-2">
          <a class="thumbnail" id="carousel-selector-3">Four</a>
        </li>
        <li class="col-lg-2">
          <a class="thumbnail" id="carousel-selector-4">Five</a>
        </li>
      </ul>
    </div>   </div>

  <div class="row text-center slick-multislider">
    <div class="item" data-slide-number="0">
      <div>
        <a href="# "><img src="http://lorempixel.com/600/350/cats/1 " class="img-responsive ">cat 1</a>
      </div>
    </div>
    <div class="item" data-slide-number="1">
      <div>
        <a href="# "><img src="http://lorempixel.com/600/350/cats/2 " class="img-responsive ">cat 2</a>
      </div>
    </div>
    <div class="item " data-slide-number="2">
      <div>
        <a href="# "><img src="http://lorempixel.com/600/350/cats/3 " class="img-responsive ">cat 3</a>
      </div>
    </div>
    <div class="item " data-slide-number="3">
      <div>
        <a href="# "><img src="http://lorempixel.com/600/350/cats/4 " class="img-responsive ">cat4</a>
      </div>
    </div>
    <div class="item " data-slide-number="4">
      <div>
        <a href="# "><img src="http://lorempixel.com/600/350/cats/5 " class="img-responsive ">cat5</a>
      </div>
    </div>   </div> </div> <div class="row text-center arrows">   <div class="span4" id="carousel-text"></div>

  <div id="slide-content" style="display: none;">
    <div id="slide-content-0">
      <h2>Slider One</h2>
    </div>

    <div id="slide-content-1">
      <h2>Slider Two</h2>
    </div>

    <div id="slide-content-2">
      <h2>Slider Three</h2>
    </div>

    <div id="slide-content-3">
      <h2>Slider Four</h2>
    </div>

    <div id="slide-content-4">
      <h2>Slider Five</h2>
    </div>   </div> </div>

</div>

jQuery:

$('.slick-multislider').on('init', function(event, slick) {
  $('#carousel-text').html($('#slide-content-0').html());
});

$('.slick-multislider').on('afterChange', function(event, slick, currentSlide) {
  $('#carousel-text').html($('#slide-content-' + currentSlide).html());
});

$('.slick-multislider').slick({
  slidesToShow: 3,
  variableWidth: false,
  centerMode: true,
  centerPadding: '100px',
  dots: false,
  arrows: true,
  appendArrows: '.arrows'
});

//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function() {
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length - 1);
  var id = parseInt(id);

  $('.slick-multislider').slick('slickGoTo', id, false);
});

CSS:

* {
  box-sizing: border-box;
}

.slick-multislider {}

.slick-slider div {
  height: 400px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index: -1;
}

.slick-slider div.slick-center {
  /*background: red;*/
  z-index: 100;
}

.slick-slider img {
  -webkit-transform: translate3d(0, 20%, 0px);
  transform: translate3d(0, 20%, 0px);
}

.slick-slider .slick-center img {
  -webkit-transform: scale(1.3, 1.3) translate3d(0, 15%, 20px);
  transform: scale(1.3, 1.3) translate3d(0, 15%, 20px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.arrows {
  margin: 20px auto 0 auto;
  width: 400px;
}
.span4, h2 {
  display: block;
  float: left;
  width: 200px;
  height: 40px;
  background: red;
  color: white;
}
.slick-prev {
  float: left;
}
.slick-next {
  float: right;
}
.slick-arrow {
  position: relative;
  left: 0;
  top: 0;
  width: 100px;
  height: 20px;
  background: blue;
  margin: 0 0 20px 0;
}

.slick-arrow:hover {
  background: blue;
}

ul {
  height: 40px;
}

li,
li.active {
  list-style-type: none;
  text-align: center;
  text-indent: 0;
  width: 10%;
  height: 20px;
  background-color: transparent;
  border-radius: 0;
  padding-bottom: 15px;
}

Answer 1

解决方案非常简单，但记录很少:将 centerPadding 设置为 0。

在你的例子中，你的 JavaScript 看起来像这样:

$('.slick-multislider').slick({
  slidesToShow: 3,
  variableWidth: false,
  centerMode: true,
  centerPadding: '0',
  dots: false,
  arrows: true,
  appendArrows: '.arrows'
});

这是一个更新的 fiddle : http://codepen.io/anon/pen/MKVdPd