移动视图中的中心滑块使用带有引导程序3.3.5的光滑滑块滑动

Question

我使用bootstrap 3.3.5和Slick Slider来生成响应滑块，但是当屏幕大小（例如）超过600（但小于768，因为这是我的断点）...幻灯片的边距未正确设置，我无法弄清楚如何使用css将幻灯片居中。

这里的代码我做了但没有成功.....

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.ft-prop').slick({
    slidesToScroll: 3,
    prevArrow: '<a type="button" class="slick-prev"><i class="glyphicon glyphicon-chevron-left"></i> </a>',
    nextArrow: '<a type="button" class="slick-next"><i class="glyphicon glyphicon-chevron-right"></i> </a>',
    centerPadding: '0',
    slidesToShow: 3,
    responsive: [{
      breakpoint: 768,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '0',
        slidesToShow: 1
      }
    }]
  });
});

＆＃13;

figure {
  position: relative;
  float: left;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
}
figure img {
  border: 0;
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}
figure figcaption {
  display: block;
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
figure figcaption:before,
figure figcaption:after {
  pointer-events: none;
}
figure figcaption,
figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}
figure h2,
figure p {
  margin: 0;
}
figure h2 {
  word-spacing: -0.15em;
  font-weight: 300;
}
figure h2 span {
  font-weight: 800;
}
figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}
figure.effect-layla h2 {
  padding-top: 26%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
figure.effect-layla h2 {
  transform: translate3d(0, -30px, 0);
  transition: opacity 0.35s, transform 0.35s;
}
figure.effect-layla p {
  padding: 0.5em 2em;
  text-transform: none;
  opacity: 0;
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
  transition: opacity 0.35s, transform 0.35s;
}
figure.effect-layla figcaption:before,
figure.effect-layla figcaption:after {
  position: absolute;
  content: '';
  opacity: 0;
}
figure.effect-layla figcaption:before {
  top: 50px;
  right: 30px;
  bottom: 50px;
  left: 30px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  transition: opacity 0.35s, transform 0.35s;
}
figure.effect-layla figcaption:after {
  top: 30px;
  right: 50px;
  bottom: 30px;
  left: 50px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  transition: opacity 0.35s, transform 0.35s;
}
figure.effect-layla:hover img {
  opacity: 0.7;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition-delay: 0.15s;
}
figure.effect-layla:hover figcaption:before,
figure.effect-layla:hover figcaption:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
figure.effect-layla:hover figcaption:after {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
figure.effect-layla:hover h2,
figure.effect-layla:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition-delay: 0.15s;
}
.slick-slider {
  position: relative;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}
.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow {
  position: absolute;
  top: 50%;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  padding: 0;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 20px;
}
.slick-arrow.slick-hidden {
  display: none;
}
.slick-arrow.slick-disabled:before {
  opacity: .25;
}
.slick-arrow.slick-prev {
  left: -5px;
}
@media screen and (max-width: 768px) {
  .slick-arrow.slick-prev {
    left: 25px;
    z-index: 1;
  }
}
.slick-arrow.slick-next {
  right: -5px;
}
@media screen and (max-width: 768px) {
  .slick-arrow.slick-next {
    right: 25px;
    z-index: 1;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12" style="margin-top:20px;"></div>
<div class="col-md-12">
  <div class="ft-prop">
    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img01" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>1</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>
    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/2.jpg" alt="img02" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>2</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>
    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/3.jpg" alt="img03" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>3</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>

    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/4.jpg" alt="img04" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>4</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>
    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/5.jpg" alt="img05" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>5</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>
    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/6.jpg" alt="img06" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>6</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>

    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/7.jpg" alt="img07" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>7</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果有人发现使用较少而不是问题的话，我会少用...

此处CodePen上的Demo使用less代码相同

这里也是我的问题的屏幕截图

任何帮助都会受到赞赏......

Answer 1

由于float:left元素上的figure，请尝试以下操作：

@media (max-width: 768px) {
  figure {
    float: none;
  }
}

Answer 2

设置 css

@media(max-width:768px) {

 figure { width: 100%; }
 img { width: 100%; }

}

或者如果你想要，我认为它的外观更好地设置在@screen-sm-min:768px;

的原始文件中

img { width: 100%; margin: 0 auto; }

Answer 3

我认为这是因为你的图像尺寸为480 * 360，但屏幕宽度超过480px，并且css没有正确居中。这是一支工作笔：http://codepen.io/anon/pen/zvJJJQ

我做的更改是删除图中的浮动并为img标记添加以下css：

   max-width:100%;
   margin: 0 auto;

希望得到这个帮助。