未定义高度的图像滑块

I'm trying to create a slider of images (previous/next) so the images slide to the left when I click "previous" and to the right when I click "next" with 0.5s of slowness, so it takes some animation. And when I reach the last image and click "next", I want images to "run backwards" to the first one, the same when I'm in the first one and click "previous", so it "run forward" until the last one.

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

I want the same behaviour this JSFiddle shows. (but I don't need the timer to move images automatically and don't need the "triggers" buttons, just "previous" and "next").

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

The problem here is that my images don't have fixed size. I define a width in percentage and can't define a height because I have responsive design, the image resizes as I resize the browser window.

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

The jQuery to previous/next actions is pretty easy, but I just can't find a way to add this animation when I remove/add the "active" class to my images (so they become visible or not).

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

I have already tried putting all images side by side and showing only the first one (setting container width equals to image width), so when I click "next" I just "move" the container to the left so it begins to display the next image, but it doesn't work because once I can't define the height of the images, they will appear underneath each other, not side by side.

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

JSFiddle

的jsfiddle

HTML

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

CSS

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

img.active {
    display: block;
}

jQuery

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');
    }
});

6 个解决方案

#1

Well the problem is the height for sliding.

那么问题是滑动的高度。

First you need to have an element which is the "picture frame" which hold all the other images. That's important. For better imagination a picture:

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

Now you have several technics to show and hide images. One could be to set the opacity. When using transition: opacity .15s ease-in-out; The one Picture is fading out and the next on is fading in.

现在，您有几种技术可以显示和隐藏图像。一个可能是设置不透明度。使用过渡时：不透明度.15s轻松进出;一张图片逐渐淡出，下一张图片正在消失。

For the slideshow effect is given to the position of the visible image to its width to the left and the image previously purely new to his wide to the right and then to 0. Thus, moves the current picture on the left the frame out and the new comes out right in.

对于幻灯片放映效果，可见图像的位置向左到左边的宽度，以及之前纯粹是新的图像到右边然后再到0的图像。因此，将当前图像移到框架的左边，新的出现了。

And here is the difficulty if the height is not the same. If the current image 300px high and the new 400px, so the image frame here would adjust his height immediately once the new image start to be visible.

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

The content below would start to jump with each slide.

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

Is that so desired???

这是如此渴望???

If yes, I can make you an example how it works.

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

#2

You can actually do this in Pure CSS!

你可以在Pure CSS中实现这一点！

You use an ID and a label (with a for attribute=for the targeted id)

您使用ID和标签（对于目标ID，使用for attribute =）

That's basically it. All you have left is to style it! (Forked from Joshua Hibbert's Pen)

基本上就是这样。你剩下的就是设计它！ （从约书亚希伯特的钢笔分叉）

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;
}

<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>

Although this method is the most compatible (except for old versions of IE) and depending on how you animate it this method can be more time consuming than a JS method, but can also be faster, it just depends on how you want the animations to go, or you could use a css library that does this for you.

虽然这种方法是最兼容的（IE的旧版本除外），并且取决于你如何设置它的动画，这种方法比JS方法更耗时，但也可以更快，它只取决于你想要动画的方式去，或者您可以使用css库为您执行此操作。

Here are some css image sliders I recommend.

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

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

10个惊人的纯CSS3图像滑块http://bashooka.com/coding/pure-css3-image-sliders/

Pure CSS Image Slider Without Javascript #Codeconvey is a good solution for what you're looking for, but lots of CSS
http://codeconvey.com/pure-css-image-slider/

没有Javascript的纯CSS图像滑块#Codeconvey是您正在寻找的一个很好的解决方案，但很多CSS http://codeconvey.com/pure-css-image-slider/

The downside to these along with what you're working on is that you can't touch to slide on a phone or tablet which is more common now a days with photo galleries.

这些以及你正在做的事情的缺点是，你无法触摸手机或平板电脑上的滑动，现在这些照片画廊现在更常见。

I recommend checking out Fotorama it's amazing! :)

我建议看看Fotorama真是太神奇了！ :)

#3

Perhaps not the ideal situation but at least it will give you an idea. you can use the animation function of jQuery and I also changed your code a bit. See demo here

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

Within your HTML I would say this:

在你的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>

and within your jQuery code you can animate the width:

在您的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();
});

With this implementation the whole process of changing and adding the active class to the image is removed and replaced by animation functions

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

#4

Simplest solution (I think) is to force the items to be of the same size, by placing them in a div. You can even have the div show the image without the use of an img tag, by using the background-image CSS feature (see http://www.w3schools.com/css/css3_backgrounds.asp for more details).

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

The item CSS could look like:

项目CSS可能如下所示：

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

and in each item in the HTML:

并在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)' />

#5

I finally got there.

我终于到了那里。

HERE is the fiddle with the solution I developed.

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

The main problem in the implementation of this image slider was that images, althought were all the same size, have dynamic width (defined in % on CSS) and dynamic height (not defined on CSS).

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

The solution was basically put an "fake" image (with opacity: 0) inside my container so the container get the actual size of images I will use in the slider; put a div to "hold" the real images with position: absolute and give it a width calculted by number of images * 100%; and for last, give each image in my slider a width of x%, based on number of images.

解决方案基本上是在我的容器内放置一个“假”图像（不透明度为0），因此容器获得我将在滑块中使用的图像的实际大小;把div放到“保持”位置的真实图像：绝对并给它一个宽度计算的图像数量* 100％;最后，根据图像数量，在滑块中为每个图像指定宽度x％。

In the jQuery, I "move" the "images holder div" always by %, never by static values, once the width of everything can change if I resize the window.

在jQuery中，如果我调整窗口大小，一旦所有内容的宽度都可以改变，我总是用“％”移动“图像持有者div”，而不是静态值。

If you start to slide the images to the left and right and then resize the window, you will see that it continues to work perfectly.

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

#6

I have implemented using css3 animations. However this will require manipulating animation values in css every time a slide gets added or removed.

我已经实现了使用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%)
  }
}

Here the animation values are set such that there is a pause between slide transitions. I have added a parent frame to show only one slide at a time.

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

Please refer this fiddle.

请参考这个小提琴。