js vertical slider with arrows

Question

The thing is that I need to make a vertical images slider,so that when i press arrow down/arrow up every image changes it's position (the highest one goes bottom,the previous take it's place) what it should look like:

what i have got so far:

$(function(){
    
    var $vsliderboxes = $('#vsliderboxes'),
        $vslidernav   = $('#vslidernav'),
        boxHeight     = $vsliderboxes.height(),
        current_index = 0;
    
    function clickslide(){
        

        clearInterval(intervalTimer);
        clearTimeout(timeoutTimer);
        timeoutTimer = setTimeout(function () {
            intervalTimer = window.setInterval(autoslide, 2000);
        }, 2500);
        
        var index = $(this).index();
        
        current_index = index;
        

        $vsliderboxes.children().stop().animate({
            top : (boxHeight * index * -1)
        }, 500);
    }
    
    function autoslide(){
        current_index++;
        if (current_index >= $vsliderboxes.children().children().length) {
            current_index = 0;
        }
        $vslidernav.find('a').eq(current_index).trigger('click');
    }
    
    $vslidernav.find('a').click(clickslide);
    
    var intervalTimer = window.setInterval(autoslide, 2000),
        timeoutTimer  = null;
    
});

#vslidernav ul {
    list-style: none;
    padding: 0;
}
#vslidernav ul a {
    padding: 0;
    cursor: pointer;
    height: 50px;
}
#vslidernav ul a:active {
    color: #9C9A99;
}
#vslidernav ul a li {
    height: 50px;
}
#vslidernav ul .active li {
}
.#vslidernav ul a:active {
    background: transparent;
    color: #9C9A99;
}
.vslider {
   display: inline-block;
}
#vslidernav {
    float: left;
    width: 100px;
    z-index: 1;
    height: 250px;
}
#vsliderboxes {
    position : relative;
    overflow : hidden;
}
#vsliderboxes div {
    height: 250px;
    width: 900px;
}
#vsliderboxs-inner {
    position : relative;
    width    : 900px;
    height   : 250px;
}

<div class="vslider">
  <div id="vslidernav">
    <ul>
      <a id="1">
        <li><img src="img/arrtop.gif"></li>
      </a>
      <a id="2">
        <li><img src="img/arrdown.gif"></li>
      </a>
      <a id="3">
        <li></li>
      </a>
    </ul>
  </div>
  <div id="vsliderboxes">
    <div id="vsliderboxs-inner">
      <div id="box1" class="active"><img src="img/slide1.gif"></div>
      <div id="box2" class="inactive"><img src="img/slide2.gif"></div>
      <div id="box3" class="inactive"><img src="img/slide3.gif"></div>
    </div>
  </div>
</div>

thanks for any advice

score 0 · Answer 1 · edited May 23 '17 at 12:00

I think, that it isn't possible to solve this issue like you try to. Because, when you work with the "top" property, you can't take one image from the top and append it to the other end because appending the image, will move the other images to another place --> the top property wouldn't be correct any more.

I think the contributed sliders (e.g. http://www.jssor.com/demos/vertical-slider.slider) work with the transform CSS property. transform: translate3d() Try to research about this property.

Roko C. Buljan answered on this page: loop carousel jquery He uses a scrollTop loop for your problem.

I've also written a simple slider some time ago. I have now implemented the Roku C. Buljan method. Feel free to look at my code on Bitbucket. https://bitbucket.org/d-stone/jqueryslider

An excerpt may help you: value = prev_or_next == 'next' ? self.globals.slide_height : 0;

last = $('#container').find('> div:last');
first = $('#container').find('> div:first');

if(prev_or_next == 'prev') { // click on "next"-button
    first.before(last);      // put last element before first
    settings.elements.inner.scrollTop(self.globals.slide_height); // set the scrollTop to 1 slide-height
}
// animation itself:
$('#container').stop().animate({scrollTop: value}, {
    duration: settings.slide_speed,
    done: function() {
        if(prev_or_next == 'next') {
            // put first item after last
            last.after(first);
        }
    }
});

I'd advise you to validate your HTML (W3C Validator). There are some errors inside. Invalid HTML can be the reason for some CSS and Javascript Errors.

js vertical slider with arrows

1 Answers1