Horizontal Slideshow With Divs

I have a container div element, this should contain all child div elements. I saw this thread: Slide a div offscreen using jQuery and I was wondering how to implement it (within a

Solution 1:

jQuery for the logic and CSS3 for transition and transform. Multiple galleries + Auto-slide + Pause on hover:

$(function(){

  $('.gallery').each(function() {

    var $gal     = $(this),
        $movable = $(".movable", $gal), 
        $slides  = $(">*", $movable),
        N        = $slides.length,
        C        = 0,
        itv      = null;
    
    functionplay() { itv = setInterval(anim, 3000); }
    functionstop() { clearInterval(itv); }
    functionanim() {
      C = ($(this).is(".prev") ? --C : ++C) <0 ? N-1 : C%N;
      $movable.css({transform: "translateX(-"+ (C*100) +"%)"});
    }
    
    $(".prev, .next", this).on("click", anim);
    $gal.hover(stop, play);
    play();

  });

});

.gallery{
  position: relative;
  overflow: hidden;
}
.gallery.movable{
  display: flex;
  height: 70vh;
  transition: transform 0.4s;
}
.gallery.movable > div {
  flex:1;
  min-width:100%;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Pause on hover and autoslide

<divclass="gallery"><divclass="movable"><divstyle="background:#0af">1 <pstyle="position:absolute; top:400px;">aaaa</p></div><divstyle="background:#af9">2</div><divstyle="background:#f0a">3</div></div><buttonclass="prev">Prev</button><buttonclass="next">Next</button></div>

As many galleries as you want

Count the number of slides and put into a counterC. On prev/next click manipulate C On autoslide $(this).is(".prev") will also evaluate as false so ++C will be used, just like clicking the Next button. On mouseenter simply clearInterval the currently running itv and on mouseleave (the second .hover argument) reinitialize the itv

The animation is achieved by multiplying C*100 and translateX by - C * 100 %

Solution 2:

Add all three div in a container div, then make the window wrap around the long div and hide the overflow.

Example if the window area is 960px then the div inside would be 3x 960 (2880)

You can center it by changing it's left position by increments of 960 (placing the long div in relative positioning and the window to overflow to hidden)

#window{
width:960px;
overflow: hidden;
}

#container{
position: relative;
left: -960px;
}

.content_box{
width:960px;
}

Then you can use javascript (jQuery) to animate the left position:

$('#arrow-left').click(function() {
  $('#container').animate({
   left: '-=960'
  }, 5000, function() {
  // Animation complete.
  });
});


$('#arrow-right').click(function() {
  $('#container').animate({
   left: '+=960'
  }, 5000, function() {
  // Animation complete.
  });
});

More on .animate can be found in the manual: http://api.jquery.com/animate/

Solution 3:

<div id="parent">
  <div id="container">
    <div id="child1"></div>
    <div id="child2"></div>
  </div>
</div>

give the parent red div css properties:

position: relative;
overflow: hidden;
width: 500px;
height: somevalue;

wrap the children divs with another div "container for example" and give it the following css properties:

position: absolute;
width: ;/*overall width of all children divs including margins*/top: 0;
left: 0;
height: ;/*same as parent*/

and finally for children divs:

float: left;
height: ;/*same as parent*/