javascript - Slider of images with undefined height -

i'm trying create slider of images (previous/next) images slide left when click "previous" , right when click "next" 0.5s of slowness, takes animation. , when reach last image , click "next", want images "run backwards" first one, same when i'm in first 1 , click "previous", "run forward" until last one.

i want same behaviour this jsfiddle shows. (but don't need timer move images automatically , don't need "triggers" buttons, "previous" , "next").

the problem here images don't have fixed size. define width in percentage , can't define height because have responsive design, image resizes resize browser window.

the jquery previous/next actions pretty easy, can't find way add animation when remove/add "active" class images (so become visible or not).

i have tried putting images side side , showing first 1 (setting container width equals image width), when click "next" "move" container left begins display next image, doesn't work because once can't define height of images, appear underneath each other, not side 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');     } }); 

well problem height sliding.

first need have element "picture frame" hold other images. that's important. better imagination picture:

now have several technics show , hide images. 1 set opacity. when using transition: opacity .15s ease-in-out; 1 picture fading out , next on fading in.

for slideshow effect given position of visible image width left , image purely new wide right , 0. thus, moves current picture on left frame out , new comes out right in.

and here difficulty if height not same. if current image 300px high , new 400px, image frame here adjust height once new image start visible.

the content below start jump each slide.

is desired???

if yes, can make example how works.