Div deslizante

Eduardo Honorato · Outubro 6, 2015

Gente, tudo bem? como eu crio uma div deslizante na horizontal, da maneira que tenho por exemplo 5 divs e elas se movimentam para esquerda e direita, como se fosse um carrousel..

Fabio_Guerra · Fevereiro 14, 2018

http://jquery.malsup.com/cycle/

Omar~ · Fevereiro 14, 2018

@Eduardo Honorato isso é bem simples dependendo do resultado que deseja.

Por exemplo tenho

div-1

div-2

div-3

Ambas div devem ter exatamente a mesma largura digamos uns 400px logo então devo colocar-las de forma que se alinhem uma ao lado da outra causando um overflow na página (ela vai ter uma barra de rolagem lateral equivalente ao tamanho de todas divs reunidas)

Então nesse caso colocamos essas 3 div internas a outra que deve ocultar seu conteúdo de rolagem.

Logo assim teremos 1 div mostrando apenas a div-1

O efeito é simples pode ser acionado por tempo "timeout", toque "clique do mouse" ou movimento "do mouse", touch screen "toque na tela em aparelhos móveis atuais".

Contudo é só aplicar uma margin-left inferior ao tamanho total da div do caso 400px elemento.style.marginLeft = '-400px';

Lembrando de fazer a soma para aplicar de acordo com a quantidade de espaço no caso a div-2 seria uma margin legativa de 800px e assim por diante, quando atingir o cota máxima a próxima ação deve restaurar as posições inicias de todos elementos para recomeçar o ciclo.

Sendo tudo passível a automação via javascript, sendo apenas necessário a aplicação HTML dos elementos que o javascript se encarrega de fazer o resto.

Como eu não sei seu nível de capacidade de programação em javascript, e por já possuir aqui um exemplo pronto, que utilizei em uma aula que dei. Optaremos pelo uso da jQurey que provavelmente se já não utiliza em seu projeto acredito que irá utilizar pois muitos aderem a essa biblioteca pela facilidade de uso dela.

HTML

Spoiler


<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-3.2.1.js" type="text/javascript"></script>
        <link href="SlideCarrousel.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript">
            $(document).ready(function () {
                slide = new SlideCarrousel();
            });
        </script>
    </head>
    <body>

        <div class="slide-container">
            <div class="nav prev"><button>&#10094;</button></div>
            <ul class="slider" style="height: 500px">
                <li style="background: red"></li>
                <li style="background: green"></li>
                <li style="background: blue"></li>
            </ul>
            <div class="nav next"><button>&#10095;</button></div>
        </div>

        <script src="SlideCarrousel.js" type="text/javascript"></script>
    </body>
</html>

SlideCarrousel.CSS

Spoiler


* {
    margin: 0;
    padding: 0
}
html, body {height: 100%}
img {max-width: 100%}
.slide-container {
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden
}
.slider {
    list-style: none;
    width: 1000%;
}
.slider li {
    float: left;
    height: inherit;
    margin: 0;
    padding: 0;
    position: relative;
}
.slide-container .nav {
    display: table;
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -32px;
    z-index: 1
}
.slide-container .nav button {
    background: none;
    border: none;
    font-size: 32px;
    color: #ffffff;
    padding: 8px;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer
}
.slide-container .nav:hover button {
    color: white;
    background-color: rgba(0,0,0,.5);
}
.slide-container .nav.prev {
    left: 0;
}
.slide-container .nav.next {
    right: 0;
}

SlideCarrousel.JS

Spoiler


var SlideCarrousel = function () {

    /* @var $slideContainer: Tamanho de tela do slide */
    var $slideContainer;

    /* @var $slideHeight: Altura do slide */
    var $slideHeight;

    /* @var $slideItem: Recalcular a largura dos itens do slide para navegação */
    var $slideItem;

    /* @var $slideCount: Avanço atual do slide */
    var $slideCount;

    /* @var $slideQuant: Quantos itens existem no slide */
    var $slideQuant;

    /**
     * ****************************************************
     * * @var's "Drag slide"
     * ****************************************************
     **/
    /* @var $mouseStart : pega o ponto inicial onde o 
     * mouse foi clicado */
    var $mouseStart;
    /* @var $slideMouseMove : pega a direção para onde o
     * mouse é levado */
    var $slideMouseMove;
    /* @var $slideDrag : Pega o ponto onde o botão do
     * mouse é solto */
    var $slideDrag;
    /* @var $slideLeft : Pega o valor de margem já 
     * aplicada ao item atual no slide */
    var $slideLeft;

    /**
     * ****************************************************
     * * @Init Inicia os métodos de controle
     * ****************************************************
     **/
    slideCalcs();
    slideDrag();
    slideEnabeControl();
    slideTimer();

    /**
     * ****************************************************
     * @Method : slideCalcs()
     * @return : Faz os calculos de tamanhos
     * ****************************************************
     **/
    function slideCalcs() {
        $slideContainer = Math.ceil($('.slide-container').outerWidth());
        $slideHeight = Math.ceil(($slideContainer * 75) / 100);
        $slideQuant = ($('.slider li').length / 1) - 1;

        slideCommon();
    }

    /**
     * ****************************************************
     * * @Method : slideCommon()
     * * @return : Redimenciona os elementos do slide,
     *             conforme a tela.
     *             - Define o tamanho do item do slide.
     *             - Define o início do slide.
     * ****************************************************
     **/
    function slideCommon() {
        if ($slideHeight < 400) {
            $('.slider').css({'margin-left': '0', 'height': $slideHeight + 'px'});
            $('.slider li').css({'width': $slideContainer + 'px', 'height': $slideHeight + 'px'});
        } else {
            $('.slider').css({'margin-left': '0', 'height': '400px'});
            $('.slider li').css({'width': $slideContainer + 'px', 'height': '400px'});
        }
        $slideItem = Math.ceil($('.slider li').outerWidth());
        $slideCount = 0;
    }

    /**
     * ****************************************************
     * * @Method : slideEnabeControl()
     * * Habilita os botões de controle do slide
     * ****************************************************
     **/
    function slideEnabeControl() {
        $('.next').click(function () {
            if ($slideCount < $slideQuant) {
                $slideCount++;
                $('.slider').animate({'margin-left': '-=' + $slideItem + 'px'}, 500);
            } else {
                $slideCount = 0;
                $('.slider').animate({'margin-left': '0'}, 500);
            }
            window.clearTimeout($slideTimeOut);
            slideTimer();
            return false;
        });

        $('.prev').click(function () {
            if ($slideCount >= 1) {
                $slideCount--;
                $('.slider').animate({'margin-left': '+=' + $slideItem + 'px'}, 250);
            } else {
                $slideCount += $slideQuant;
                $('.slider').animate({'margin-left': '-=' + ($slideItem * $slideQuant) + 'px'}, 250);
            }
            window.clearTimeout($slideTimeOut);
            slideTimer();
            return false;
        });
    }

    /**
     * ****************************************************
     * * @Method : slideDrag()
     * * Executa a navegação dos botões se o slide é
     *   arrastado.
     * ****************************************************
     **/
    function slideDrag() {
        $(document).on('mousedown touchstart', function (e) {

            window.clearTimeout($slideTimeOut);

            $mouseStart = e.pageX || e.originalEvent.touches[0].pageX;
            $slideDrag = 0;
            $slideLeft = $('.slider').offset().left;

            $(document).on('mousemove touchmove', function (e) {
                $slideMouseMove = e.pageX || e.originalEvent.touches[0].pageX;
                $slideDrag = ($mouseStart - $slideMouseMove) / $slideItem * $slideItem;

                $('.slider').css({'margin-left': $slideLeft - $slideDrag + 'px'});
            });

        });
        $(document).on('mouseup touchend', function () {
            $(document).off('mousemove touchmove');
            if (!$slideDrag) {
                return true;
            } else if ($slideDrag > 1) {
                if ($slideCount < $slideQuant) {
                    $slideCount++;
                    $('.slider').animate({'margin-left': '-=' + ($slideItem - $slideDrag) + 'px'}, 250);
                } else {
                    $('.slider').css({'margin-left': $slideLeft + 'px'});
                }
                slideTimer();
            } else if ($slideDrag < 1) {
                if ($slideCount >= 1) {
                    $slideCount--;
                    $('.slider').animate({'margin-left': '+=' + ($slideItem + $slideDrag) + 'px'}, 250);
                } else {
                    $('.slider').css({'margin-left': $slideLeft + 'px'});
                }
                slideTimer();
            }
        });
    }

    /**
     * ****************************************************
     * * @Method : autoSlide() : Adiciona um timer de
     * *           execução para o slide
     * ****************************************************
     **/
    function slideTimer() {
        $slideTimeOut = setTimeout(function () {
            $('.next').click();
        }, 5000);
    }

    /**
     * ****************************************************
     * * Caso a tela seja redimencionada reinicia o slide
     * ****************************************************
     **/
    $(window).resize(function () {
        slideCalcs();
    });

};

Nota: Isso é só um exemplo simples, que obrigatoriamente depende de uma biblioteca externa no caso a jQuery. Mas facilmente pode modificado para utilizar javascript pois o conceito eu fiz de forma a só alterar a forma que os elementos são encapsulados e executados.

snowstormdelivery · Fevereiro 15, 2018

Isso é o que quer?

Caso procure um container para ser rolado horizontalmente, use a propriedade CSS "overflow".

Passo à passo

Crie um container com largura definida;
1. Use a propriedade CSS "overflow", nesse primeiro container.
  1. Coloque o valor "scroll".
Coloque um outro container dentro do anterior;
1. Esse deve ter largura muito maior que a do anterior.
Crie quantos elementos puder, dentro do container anterior (Segundo).

Snippet

https://jsfiddle.net/vw9Lft7a/34/

brunovme · Maio 10, 2018

Em 14/02/2018 at 21:38, Joao_Lucaas disse:

Isso é o que quer?

Caso procure um container para ser rolado horizontalmente, use a propriedade CSS "overflow".

Passo à passo

Crie um container com largura definida;
Use a propriedade CSS "overflow", nesse primeiro container.
Coloque o valor "scroll".

Coloque um outro container dentro do anterior;
Esse deve ter largura muito maior que a do anterior.

Crie quantos elementos puder, dentro do container anterior (Segundo).

Snippet

https://jsfiddle.net/vw9Lft7a/34/

Eu tava fazendo uma gambiarra digna de meme aqui, pra conseguir fazer a div com scroll horizontal.
Me cadastrei só pra agradecer. Obrigado! =)

Entrar

Arquivado

Div deslizante

Recommended Posts

Eduardo Honorato 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabio_Guerra 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

snowstormdelivery 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunovme 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante