在自定义最小JS / CSS幻灯片中搞砸了幻灯片

Question

如果容器的宽度与图像的宽度相同（即400px），则此JS / CSS幻灯片可以正常工作。

但如果容器大于或小于图像（即800px或200px），如何在隐藏非活动幻灯片时水平居中图像？

＆＃13;

＆＃13;

$('.slider').each(function() {
  var sliderWidth = $(this).outerWidth(),
    slides = $(this).find('.slide');

  changeSlide(1, slides, sliderWidth);
});

function changeSlide(i, items, sliderWidth) {
  setTimeout(function() {
    var current = items.eq(i),
      previous = items.eq(i - 1);

    previous.css('left', -sliderWidth);
    current.css('left', 0);


    if (i < items.size() - 1) {
      changeSlide(i + 1, items);
    }
  }, 3000);
}

＆＃13;

.slider,
.slider .slides {
  position: relative;
}
.slider {
  background: #fff;
  overflow: hidden;
  height: 120px;
  margin: 20px;
}
.slider .slides {
  z-index: 1;
}
.slider .slide {
  position: absolute;
  width: 100%;
  left: 100%;
  transition: all 0.3s ease;
}
.slider .slide:nth-of-type(1) {
  background: blue;
  left: 0;
}
.slider .slide:nth-of-type(2) {
  background: green;
}
.slider .slide:nth-of-type(3) {
  background: red;
}
.slider .slide img {
  margin: 0 auto;
  max-width: none;
}
/* * * * */

.large .slides {
  width: 600px;
}
.medium .slides {
  width: 400px;
}
.small .slides {
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large">
    <h3>Width: 800px - FAIL</h3>
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img src="http://s21.postimg.org/ptx6qyydz/Untitled_1.png" />
        <!-- Minimum image area: <img src="http://s16.postimg.org/aqra3fjqp/Untitled_1_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s16.postimg.org/kjg031fp1/Untitled_2.png" />
        <!-- Minimum image area: <img src="http://s3.postimg.org/5tjvyellr/Untitled_2_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s9.postimg.org/sckwp2367/Untitled_3.png" />
        <!-- Minimum image area: <img src="http://s18.postimg.org/x76k2k4at/Untitled_3_min.png" />-->
      </div>
    </div>
  </div>
</div>
<div class="medium">
    <h3>Width: 400px - OK</h3>
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img src="http://s21.postimg.org/ptx6qyydz/Untitled_1.png" />
        <!-- Minimum image area: <img src="http://s16.postimg.org/aqra3fjqp/Untitled_1_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s16.postimg.org/kjg031fp1/Untitled_2.png" />
        <!-- Minimum image area: <img src="http://s3.postimg.org/5tjvyellr/Untitled_2_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s9.postimg.org/sckwp2367/Untitled_3.png" />
        <!-- Minimum image area: <img src="http://s18.postimg.org/x76k2k4at/Untitled_3_min.png" />-->
      </div>
    </div>
  </div>
</div>
<div class="small">
    <h3>Width: 200px - FAIL</h3>
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img src="http://s21.postimg.org/ptx6qyydz/Untitled_1.png" />
        <!-- Minimum image area: <img src="http://s16.postimg.org/aqra3fjqp/Untitled_1_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s16.postimg.org/kjg031fp1/Untitled_2.png" />
        <!-- Minimum image area: <img src="http://s3.postimg.org/5tjvyellr/Untitled_2_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s9.postimg.org/sckwp2367/Untitled_3.png" />
        <!-- Minimum image area: <img src="http://s18.postimg.org/x76k2k4at/Untitled_3_min.png" />-->
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要居中对齐图像。
我看到你尝试使用margin 0 auto来做，但你需要一个固定的大小。
我们不知道图像的宽度所以使用：
容器上的text-align center 关于元素的dispaly: inline-block; 并且max-width:100%
对于较小的图像，当容器小于图像时，您会得到较小的图像。

现在是可见的可见性部分 不要使用： $().hide();＆lt; - 将搞乱动画
使用： $().css('visibility','hidden');＆lt; - wil stil渲染元素但透明 和：$（）。css（＆＃39; visibility＆＃39;，＆＃39; visible＆＃39;）;

＆＃13;

＆＃13;

$('.slider').each(function() {
  var sliderWidth = $(this).outerWidth();
  var slides = $(this).find('.slide');
  slides.css('visibility','hidden');
  slides.first().css('visibility','visible');

  changeSlide(1, slides, sliderWidth);
});

function changeSlide(i, items, sliderWidth) {
  setTimeout(function() {
    var current = items.eq(i);
    var previous = items.eq(i - 1);
    current.css('visibility','visible');

    previous.css('left', -sliderWidth);
    current.css('left', 0);


    if (i < items.size() - 1) {
      changeSlide(i + 1, items);
    }
  }, 3000);
}

＆＃13;

.slider,
.slider .slides {
  position: relative;
}
.slider {
  background: #fff;
  overflow: hidden;
  height: 120px;
  margin: 20px;
}
.slider .slides {
  z-index: 1;
}
.slider .slide {
  text-align: center; /*for the big one*/
  position: absolute;
  width: 100%;
  left: 100%;
  transition: all 0.3s ease;
}
.slider .slide:nth-of-type(1) {
  background: blue;
  left: 0;
}
.slider .slide:nth-of-type(2) {
  background: green;
}
.slider .slide:nth-of-type(3) {
  background: red;
}
.slider .slide img {
  display: inline-block; /*this if for the big one*/
  //margin: 0 auto;
  max-width: 100%; /*this is for the really small one*/
}
/* * * * */

.large .slides {
  width: 600px;
}
.medium .slides {
  width: 400px;
}
.small .slides {
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large">
    <h3>Width: 800px - FAIL</h3>
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img src="http://s21.postimg.org/ptx6qyydz/Untitled_1.png" />
        <!-- Minimum image area: <img src="http://s16.postimg.org/aqra3fjqp/Untitled_1_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s16.postimg.org/kjg031fp1/Untitled_2.png" />
        <!-- Minimum image area: <img src="http://s3.postimg.org/5tjvyellr/Untitled_2_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s9.postimg.org/sckwp2367/Untitled_3.png" />
        <!-- Minimum image area: <img src="http://s18.postimg.org/x76k2k4at/Untitled_3_min.png" />-->
      </div>
    </div>
  </div>
</div>
<div class="medium">
    <h3>Width: 400px - OK</h3>
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img src="http://s21.postimg.org/ptx6qyydz/Untitled_1.png" />
        <!-- Minimum image area: <img src="http://s16.postimg.org/aqra3fjqp/Untitled_1_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s16.postimg.org/kjg031fp1/Untitled_2.png" />
        <!-- Minimum image area: <img src="http://s3.postimg.org/5tjvyellr/Untitled_2_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s9.postimg.org/sckwp2367/Untitled_3.png" />
        <!-- Minimum image area: <img src="http://s18.postimg.org/x76k2k4at/Untitled_3_min.png" />-->
      </div>
    </div>
  </div>
</div>
<div class="small">
    <h3>Width: 200px - FAIL</h3>
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <img src="http://s21.postimg.org/ptx6qyydz/Untitled_1.png" />
        <!-- Minimum image area: <img src="http://s16.postimg.org/aqra3fjqp/Untitled_1_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s16.postimg.org/kjg031fp1/Untitled_2.png" />
        <!-- Minimum image area: <img src="http://s3.postimg.org/5tjvyellr/Untitled_2_min.png" />-->
      </div>
      <div class="slide">
        <img src="http://s9.postimg.org/sckwp2367/Untitled_3.png" />
        <!-- Minimum image area: <img src="http://s18.postimg.org/x76k2k4at/Untitled_3_min.png" />-->
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;