Slider of images with undefined height

Question

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.

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").

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

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

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

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.

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.

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.

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.

Answer 2

You can actually do this in Pure CSS!

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

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.

Here are some css image sliders I recommend.

10 Amazing Pure CSS3 Image Sliders
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/

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! :)