高度未定义的图像滑块

Question

我正在尝试创建一个图像滑块（上一个/下一个），这样当我单击“上一个”时图像向左滑动，当我点击“下一个”时，图像向下滑动0.5s的慢速，所以需要一些动画。当我到达最后一张图片然后点击“下一张”时，我希望图像“向后”运行到第一张图像，当我在第一张图像时点击“上一张”，所以它“向前跑”直到最后一个。

我希望显示相同的行为this JSFiddle。 （但我不需要计时器自动移动图像，也不需要“触发”按钮，只需“上一步”和“下一步”。

这里的问题是我的图像没有固定的大小。我以百分比定义宽度并且无法定义高度因为我有响应式设计，所以在调整浏览器窗口大小时图像会调整大小。

jQuery到上一个/下一个动作非常简单，但当我删除/添加“活动”类到我的图像时，我找不到添加此动画的方法（因此它们变得可见或不可见）。 / p>

我已经尝试将所有图像并排显示并仅显示第一个图像（设置容器宽度等于图像宽度），所以当我点击“下一步”时我只是将容器“移动”到左侧，所以它开始显示下一个图像，但它不起作用，因为一旦我无法定义图像的高度，它们将出现在彼此之下，而不是并排。

JSFiddle

HTML

<div class="images">
    <img class="active" src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
</div>

<div class="previous">previous</div>

<div class="next">next</div>

CSS

img {
    width: 100px;  
    display: none;
    float: left;
}

img.active {
    display: block;
}

的jQuery

$('.next').on('click', function() {
    var active = $('img.active');
    var next = active.next('img');

    if (next.length) {
        active.removeClass('active');
        next.addClass('active');
    } else {
        active.removeClass('active');
        $('.images img:first').addClass('active');
    }
});

Answer 1

问题是滑动的高度。

首先，您需要一个元素，即“图片框架”，其中包含所有其他图像。这很重要。 为了更好的想象力，一张图片：

现在您有几种技术可以显示和隐藏图像。一个可能是设置不透明度。使用transition: opacity .15s ease-in-out;时，一张图片正在淡出，下一张图片正在淡入。

对于幻灯片效果，可见图像的位置向左到左边的宽度，以及之前纯粹是新的图像到右边的图像然后再到0.因此，将当前图像移到左边的框架上out and the new out in out in。

如果高度不同，这就是困难。如果当前图像高300px和新的400px，那么一旦新图像开始可见，这里的图像帧就会立即调整其高度。

下面的内容会随着每张幻灯片开始跳转。

这是否如此渴望???

如果是，我可以举例说明它是如何运作的。

Answer 2

您实际上可以在Pure CSS!

中执行此操作

您使用ID和标签（目标ID为for属性=）

基本上就是这样。你剩下的就是设计它！ （从Joshua Hibbert的笔中分叉）

＆＃13;

＆＃13;

body {
  background: #f7f4e2;
}

/* Slides */
.slider input {
  display: none;
}

/* Buttons */
.slider label {
  display: none;
  cursor: pointer;
  position: absolute;
  top: 6em;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: #000;
  padding: 1.36em .5em;
  opacity: .6;
  font-size: 19px;
  font-family: fantasy;
  font-weight: bold;
  transition: .25s;
}
.slider label:hover {
  opacity: 1;
}
.previous {
  margin-left: -188px;
}
.next {
  margin-left: 188px;
}

#slide1:checked ~ .buttons .slide1 {
  display: block;
}
#slide2:checked ~ .buttons .slide2 {
  display: block;
}
#slide3:checked ~ .buttons .slide3 {
  display: block;
}
#slide4:checked ~ .buttons .slide4 {
  display: block;
}

/* Images */
.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 300px;
  margin-top: -150px;
  margin-left: -200px;
  white-space: nowrap;
  padding: 0;
  float: left;
  transition: .25s;
  overflow: hidden;
  box-shadow: 0 0 0 3.12px #e8e8e8,
              0 0 0 12.64px #eaebe4,
              0 0 0 27.12px #000,
              0 24px 3.824em 5.12px #000;
}
.slide {
  width: 500em;
  transition: .25s;
}
.slider img {
  float: left;
  width: 400px;
  height: 300px;
}

#slide1:checked ~ .slide {
  margin: 0;
}
#slide2:checked ~ .slide {
  margin: 0 0 0 -400px;
}
#slide3:checked ~ .slide {
  margin: 0 0 0 -800px;
}
#slide4:checked ~ .slide {
  margin: 0 0 0 -1200px;
}

＆＃13;

<div class="slider">
    <input type="radio" name="slide" id="slide1" checked="true" />
    <input type="radio" name="slide" id="slide2" />
    <input type="radio" name="slide" id="slide3" />
    <input type="radio" name="slide" id="slide4" />
  
  <div class="buttons">
    <!-- Slide 1 -->
    <label for="slide4" class="slide1 previous">&lt;</label>
    <label for="slide2" class="slide1 next">&gt;</label>
    
    <!-- Slide 2 -->
    <label for="slide1" class="slide2 previous">&lt;</label>
    <label for="slide3" class="slide2 next">&gt;</label>
    
    <!-- Slide 3 -->
    <label for="slide2" class="slide3 previous">&lt;</label>
    <label for="slide4" class="slide3 next">&gt;</label>
    
    <!-- Slide 4 -->
    <label for="slide3" class="slide4 previous">&lt;</label>
    <label for="slide1" class="slide4 next">&gt;</label>
  </div>

  <div class="slide">
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/872485/coldchase.jpg">
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/980517/icehut_sm.jpg">
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/943660/hq_sm.jpg">
    <img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/599584/home.jpg">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

虽然这种方法是最兼容的（IE的旧版本除外），并且取决于你如何设置它的动画，这个方法比JS方法更耗时，但也可以更快，它只取决于你想要的方式要播放的动画，或者您可以使用css library that does this for you。

以下是我推荐的一些css图像滑块。

10 Amazing Pure CSS3 Image Sliders
http://bashooka.com/coding/pure-css3-image-sliders/

Pure CSS Image Slider Without Javascript #Codeconvey对于您正在寻找的内容来说是一个很好的解决方案，但是很多CSS http://codeconvey.com/pure-css-image-slider/

这些以及您正在处理的内容的缺点是，您无法在手机或平板电脑上滑动，这在照片画廊的日子里更为常见。

我建议查看Fotorama令人惊叹！ ：）

Answer 3

也许不是理想的情况，但至少它会给你一个想法。你可以使用jQuery的动画功能，我也改变了你的代码。见demo here

在你的HTML中我会说：

<div id="images">
    <div class="images-wrapper">
        <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/In-the-spotlight.jpg">
        <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/Bath-time-with-ducky.jpg">
        <img src="http://www.cutestpaw.com/wp-content/uploads/2016/03/FB_IMG_1452981788903.jpg">
        <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" />
    </div>      
</div>

<div class="previous">
  previous
</div>

<div class="next">
  next
</div>

在您的jQuery代码中，您可以设置宽度动画：

$('.images-wrapper img:gt(0)').hide();

$('.next').click(function() {
    $('.images-wrapper img:first-child').animate({width:'toggle'},350).next().fadeIn().end().appendTo('.images-wrapper');
});

$('.previous').click(function() {
    $('.images-wrapper img:first-child').animate({width:'toggle'},350);
    $('.images-wrapper img:last-child').prependTo('.images-wrapper').fadeOut();
    $('.images-wrapper img:first-child').fadeIn();
});

通过此实现，删除了将active类更改并添加到图像的整个过程，并将其替换为动画函数

Answer 4

最简单的解决方案（我认为）是通过将项目放在div中来强制项目具有相同的大小。您甚至可以使用img标记，在不使用background-image标记的情况下让div显示图片（有关详细信息，请参阅http://www.w3schools.com/css/css3_backgrounds.asp）。

项目CSS可能如下所示：

.item {
    background-size: contain;
    background-position: center;
}

以及HTML中的每个项目：

<div class='item' style='background-image: url(img1.jpg)' />
<div class='item' style='background-image: url(img2.jpg)' />
<div class='item' style='background-image: url(img3.jpg)' />

Answer 5

我终于到了那里。

HERE是我开发的解决方案的小提琴。

实现此图像滑块的主要问题是图像虽然大小相同，但具有动态宽度（在CSS上%中定义）和动态高度（未在CSS上定义）。

解决方案基本上是假的＆＃34;假的＆＃34;我的容器中有图像（带opacity: 0），所以容器得到我将在滑块中使用的图像的实际大小;把一个div放到＆＃34; hold＆＃34;使用position: absolute的真实图像，并为其number of images * 100%计算宽度;最后，根据图像数量，为我的滑块中的每个图像赋予宽度x%。

在jQuery中，我＆＃34;移动＆＃34; ＆＃34;图像持有者div＆＃34;如果我调整窗口大小，一旦所有内容的宽度都可以改变，那么总是按%，永远不会是静态值。

如果您开始向左右滑动图像，然后调整窗口大小，您将看到它继续完美运行。

Answer 6

我已经使用css3动画实现了。但是，每次添加或删除幻灯片时，都需要在css中操作动画值。

@keyframes slideAnim {
  0% {
    transform: translateX(0)
  }
  12.5% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(-25%);
  }
  37.5% {
    transform: translateX(-25%)
  }
  50% {
    transform: translateX(-50%)
  }
  62.5% {
    transform: translateX(-50%)
  }
  75% {
    transform: translateX(00%);
  }
  89.5% {
    transform: translateX(00%)
  }
  100% {
    transform: translateX(00%)
  }
}

此处设置动画值，使得幻灯片转换之间存在暂停。我添加了一个父框架，一次只显示一张幻灯片。

请参阅此fiddle。