Slide to next div

Question

HTML:

<div class="inline-wrapper">
  <div class="inline-blocks" id="f">123</div>
  <div class="inline-blocks" id="s">123</div>
  <div class="inline-blocks" id="t">123</div>
  <div class="inline-blocks" id="fo">123</div>
</div>

CSS:

html, body {
  width: 100%;
  height: 100%;
/*  overflow: hidden;*/
}

.inline-wrapper{
  width: 400%;
  height: 100%;
  font-size: 0;
  position: relative;
}

.inline-blocks{
  display: inline-block;
  width: 25%;
  height: 100%;
  vertical-align: top;
  position: relative;
}

>.inline-blocks:nth-child(1){
  background-color: #000;
}

.inline-blocks:nth-child(2){
  background-color: blue;
}

.inline-blocks:nth-child(3){
  background-color: red;
}

.inline-blocks:nth-child(4){
  background-color: green;
}

How can I slide them without ID? In fact this is the work of the slider. But I can not understand the logic. Want to understand how flipping without ID. We must check the blocks and give them сurrent class.

Please elaborate on your question... where do you want to slide them to? You mean you want them to scroll left and right? Also, what do you mean by "flipping without ID"? Do you want to create a flipping animation of each `.inline-blocks`? — M -, Jul 18 '14 at 06:19
you can use the `jQuery Cycle` plugin to flip the elements http://jquery.malsup.com/cycle/ — lokeshpahal, Jul 18 '14 at 06:21
@janaspage , slide means image 1 shuould goto left / Invisible ,then thru animation , image 2 comes from right and becomes visible — Pratik Joshi, Jul 18 '14 at 06:36

alexP · Accepted Answer · 2014-07-18T09:43:29.860

2

Auto Slide

HTML:

<div class="inline-wrapper">
    <div class="inline-blocks" id="f">123</div>
    <div class="inline-blocks" id="s">123</div>
    <div class="inline-blocks" id="t">123</div>
    <div class="inline-blocks" id="fo">123</div>
</div>

jQuery:

(function () {
    var numDivs = $('.inline-wrapper').children().length; //Count children ELements
    var counter = 1;

    function slide(time, counter) {
        var $currentDiv = $('.inline-wrapper .inline-blocks:nth-child(' + counter + ')'); //get next element
        var position = $currentDiv.position(); //get position of next element

        if (numDivs > 1) {
            $('html,body').animate({
                scrollLeft: position.left
            }, time / 2); //Animate to next element
        }
    };

    $('.inline-blocks').on('click', function () {
        counter = counter + 1;
        slide(2000, counter);
    });
})();

DEMO

edited Jul 18 '14 at 09:43

answered Jul 18 '14 at 07:05

alexP

3,672
7
27
36

Thanx. become more understandable. But should not we write so - +counter +1 +? And I'm trying to implement a click function. Why with overflow hidden it didn't work? – IFier Jul 18 '14 at 08:35
`i++` http://stackoverflow.com/questions/7313710/why-do-people-use-i-i-1-instead-of-i – alexP Jul 18 '14 at 08:38
Overflow hidden: http://stackoverflow.com/questions/11301841/how-to-scroll-within-an-overflow-hidden-div-to-a-certain-currently-invisible-ele – alexP Jul 18 '14 at 08:40
Thank you @Alex, can you show how it's works with click? – IFier Jul 18 '14 at 09:05
We can:
...
$(".block").click(function() {slide(2000);}); But how can we do like this - $(".block").click(function(){}); – IFier Jul 18 '14 at 09:18
Thnx once more. And with overflow I don't understand. – IFier Jul 18 '14 at 11:24

Slide to next div

1 Answers1