Horizontal slideshow with DIVs

Question

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 div element and not in the body). The code is working fine, but what if the "wrapper" div element has 500px width, how am I supposed to wrap the child divs? Am I need to use iframe or ...?

For a better understanding I made this image:

The red rectangle would be a window and the grey background the wall. You can only see trough the window and see the current div element. If you push the right button -aqua- you will see the green div and if you push the left button you will see the yellow div.

Notice: Div elements should move and not the wall.

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;
    
    function play() { itv = setInterval(anim, 3000); }
    function stop() { clearInterval(itv); }
    function anim() {
      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%;
}

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

Pause on hover and autoslide

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

As many galleries as you want

Count the number of slides and put into a counter C.
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*/

Comments

[Roko C. Buljan]

...you mean overflow:hidden;

[SearchForKnowledge]

I modified so it does the carousel without a click, jsfiddle.net/yddcxxef/1. I am just curious to know how can I add a feature which pauses the slider on hover and continues when not hovered? Thanks. Also, it is continuos?

[Roko C. Buljan]

@SearchForKnowledge no the example above is not meant for an infinite slider, though with a bit of modification of CSS and JS it's easily achievable, but with slides reordering. Your demo is quite useless as you can see :) (and the code is even out of place). For the autoslide you need to keep the same logic but create auto play and stop functions. Than you do like $gal.hover(stop, play); where stop clears an interval and play starts the anim logic in that interval.

[SearchForKnowledge]

i figured ;). I actually created a better fiddle but was able to figure out the issue. Thanks for the response.