1

Estou em um projeto de aplicativo html5 voltado para mobile.

Uma das ferramentas deste aplicativo, funciona como um relógio. Tento fazer com que esse relógio seja configurado ao arrastar os botões para cima e para baixo. Setando os números para eu criar um alerta usando a função seTimeOut ou setInterval do javascript.

O problema é que não consigo nenhum exemplo de um "carrossel arrastável" na vertical. A grande maioria desses exemplos, principalmente os em Jquery tem exemplos de animação na horizontal. Tentei ler a documentação oficial da função animate do Jquery mais não consigo ver nada "usável" para meu caso. Alguém sabe como chego a este resultado? Desde já agradeço a atenção comunidade!

4
  • amazingcarousel.com/examples/vertical-jquery-carousel-id10 foi o primeiro que encontrei no Google... há mais lá.
    – Sergio
    Commented 20/12/2016 às 20:02
  • Como a ferramenta é voltada para dispositivos touchs, a maioria não me serve, pois ele tem que ser arrastável para chamar o próximo slide. Vou aprimorar a pergunta para isso ficar mais claro. De qualquer forma obrigado amigo. Também já tinha passado nesse link. Commented 20/12/2016 às 20:04
  • 1
    codepen.io/sergiocrisostomo/pen/QGoMqo
    – Sergio
    Commented 20/12/2016 às 20:07
  • 1
    Era exatamente o que eu precisava. Muito obrigado usuário Sergio. Agora vou marcar a resposta como certa e começar a tratar os eventos. Mais uma vez, obrigado! Commented 20/12/2016 às 20:17

1 Resposta 1

2

"não consigo nenhum exemplo de um "carrossel arrastável" na vertical"

Fiz uma busca e encontrei um que cumpre os requisitos que procuras:
jQuery + arrastável + vertical: lightSlider.

Olhando para a documentação vi o parâmetro vertical: true e ficou com este aspeto:

(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>

1
  • 1
    Muito obrigado. Isso me ajudou! Commented 16/01/2017 às 17:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .