Jquery slide div in div

Question

I have a container div element, it should contain all the child div elements. I saw this topic: Slide screen using jQuery , and I was wondering how to implement it (in the div element, not in the body). The code works fine, but what if the div "wrapper" element is 500 pixels wide, how should I wrap the child divs? Do I need to use iframe or ...?

For a better understanding, I made this image:

The red rectangle is the window and the gray wall background. You can only see the window and see the current div element. If you press the right -aqua- button, you will see a green div, and if you press the left button, you will see a yellow div.

Note: Div elements must be moved, not a wall.

Answer 1

jQuery for logic and CSS3 for transition and transform .
Multiple galleries + Auto slide + Hover pause:

 $(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 them in counter C
On previous / next click to manipulate C
In autoslide, $(this).is(".prev") will also be evaluated as false , so ++C will be used, like clicking the "Next" button.
On mouseenter just clearInterval current current itv and on mouseleave (second .hover argument) reinitialize itv

Animation is achieved by multiplying C * 100 and translateX by - C * 100 %

Answer 2

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

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

You can center it by changing its left position in increments of 960 (placing a long div in relative positioning and overflowing the window 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 information about .animate can be found in the manual: http://api.jquery.com/animate/

Answer 3

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

provide parent properties div div div:

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

wrap the child divs with another container div, 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*/