Javascript or Jquery Draggable Vertical 3d Carousel

Asked

Viewed 323 times

1

I’m on an Html5 app project aimed at mobile.

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

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

javascript jquery animation carousel

  • https://amazingcarousel.com/examples/vertical-jquery-carousel-id10/ was the first I found on Google... there are more there.

  • As the tool is geared towards touchs devices, most do not suit me as it has to be draggable to call the next slide. I’ll refine the question to make it clearer. Anyway thanks friend. I also passed this link.

  • 1

    http://codepen.io/sergiocrisostomo/pen/QGoMqo

  • 1

    It was exactly what I needed. Thank you very much user Sergio. Now I will mark the answer as right and start treating the events. Once again, thank you!

1 answer

2


"I can’t get any example of a vertical "draggable carousel""

I did a search and found one that meets the requirements you’re 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>
<script src="//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>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
        </li>
        <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
            <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
        </li>
        <li data-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>

Browser other questions tagged javascript jquery animation carousel

You are not signed in. Login or sign up in order to post.