1

Boa tarde amigos programadores, tenho a seguinte duvida:

Eu tenho uma div (#grid) com vários blocos (.item) flutuando lado a lado, porém só os 3 primeiros estão sendo mostrados e o resto dos blocos estão escondidos. Eu preciso que quando clicado no botão > next ele mostre o próximo bloco um a um e esconda os primeiros.

HTML:

<div id="grid">
<div class="prev">Voltar</div>

<div class="list">
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
    <div class="item">
        <a href="#"><img src=""></a>
    </div>
</div>

<div class="next">Próximo</div>

CSS:

#content #grid{
width: 100%;
max-height: 300px;
}
#content #grid .item{
    width: 32%;
    height: 100%;
    float: left;
    border: 5px solid #dddddd;
    overflow: hidden;
    border-radius: 10px;
    margin-left: 2%;
    font-size: 0;
}
#content #grid .item:first-child{margin-left: 0 !important}
4
  • Ja está a utilizar algum código de javascript ? Se sim coloque na pergunta para ajudamos na sua duvida concreta.
    – Isac
    13/12/2017 às 21:40
  • Experiente este exemplo, alterando a quantidade de colunas de cada div, funcionará perfeitamente para sua necessidade. codepen.io/MhSami/pen/zNBMbj
    – ElvisP
    14/12/2017 às 11:35
  • experimente este também, html, css, javascript no código fonte kithomepage.com/sos/div-slide.htm
    – user60252
    14/12/2017 às 13:24
  • @EliseuB.é isso mesmo que eu preciso, porém nao quero usar nenhum frakework senão o jQuery. Alguma ideia de como fazer isso? 14/12/2017 às 20:19

0

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

Pesquise outras perguntas com a tag .