Vertical carrousel draggable in JavaScript or Jquery

Question

Vertical carrousel draggable in JavaScript or Jquery

Navigation

#1 by (1 votes)

1

I'm in a html5 mobile app project.

One of the tools in this application works like clockwork. I try to set this clock by dragging the buttons up and down. Setting the numbers for me to create an alert using the seTimeOut or setInterval function of javascript.

The problem is that I can not get any examples of a draggable "carrousel" vertically. The vast majority of these examples, especially those in Jquery have examples of horizontal animation. I tried to read the official documentation of Jquery's animate function but I can not see anything "usable" for my case. Does anyone know how I get to this result? Thanks in advance for your attention!

javascript jquery carousel

asked by anonymous 20.12.2016 / 20:59

1 answer

JavaScript Request POST SELECT user by Date

score 1 · Accepted Answer

"I can not get any examples of a vertical" drag "carousel

I did a search and found one that meets the requirements you are looking for:
jQuery + draggable + vertical : lightSlider .

Looking at the documentation I saw the parameter vertical: true and looked like this:

( codepen )

$('#lightSlider').lightSlider({
    gallery: true,
    item: 1,
    loop:true,
    slideMargin: 0,
    thumbItem: 9,
    vertical:true
});

.demo {
    width:450px;
}
ul {
    list-style: none outside none;
    padding-left: 0;
    margin-bottom:0;
}
li {
    display: block;
    float: left;
    margin-right: 6px;
    cursor:pointer;
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="//sachinchoolur.github.io/lightslider/dist/js/lightslider.js"></script>

<div class="demo">
    <ul id="lightSlider">
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"/></li><lidata-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"/></li><lidata-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg"/></li><lidata-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg"/></li><lidata-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg"/></li><lidata-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg"/></li><lidata-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg"/></li><lidata-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg"/></li><lidata-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg"/></li><lidata-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg"/></li><lidata-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg"/></li><lidata-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
        </li>
    </ul>
</div>