Barra de produtos

11/07/2020

6

Estou montando um site de E-Commerce e preciso ter uma barra de rolagem horizontal com meus produtos. Qual seria a melhor maneira de fazer isso somente usando bootstrap, html, css e javascript? Montei uma, porém, não consigo fazer com que quando a pesosa clique na setinha para o lado faça uma animação, ele simplesmente scrolla para o lado
Responder

Posts

11/07/2020

Jothaz

Na documentação do Boostraps procure por Carousel.

Ele é o componente responsável por cria slides e vai ajudá-lo a implementar o que tu queres.
Responder

11/07/2020

Gabriel

Na documentação do Boostraps procure por Carousel.

Ele é o componente responsável por cria slides e vai ajudá-lo a implementar o que tu queres.


Simm, eu estava fazendo usando carrousel, porém enquanto no computador fica 4 produtos por carousel por exemplo, no celular eu preciso que fique menos porque a tela é menor. Enão eu precisaria criar carrouseis diferentes para cada breakpoint?
Responder

11/07/2020

Jothaz

Neste caso é aplicar responsividade usando o bootstrap.

Use as classes col-sm e col-md em conjunto com as media queries para definir breakpoint.

Na documentação
https://getbootstrap.com/docs/4.5/getting-started/introduction/
tem tudo explicado com exemplos.
Responder

11/07/2020

Gabriel

Neste caso é aplicar responsividade usando o bootstrap.

Use as classes col-sm e col-md em conjunto com as media queries para definir breakpoint.

Na documentação
https://getbootstrap.com/docs/4.5/getting-started/introduction/
tem tudo explicado com exemplos.


Sim amigo, eu sei, porém vamos supor que eu crie um carrousel que cada item dele exibe 4 produtos. Aí no celular, teria que ter menos produtos por item, entende? Vamos pegar por exemplo o template de carousel do site do bootstrap:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Imagine que cada "carousel-item" eu teria 4 produtos. Então no celular, por exemplo, teriam 2 produtos por item. Então não somente o estilo css iria mudar, mas o codigo html também. Eu teria que colocar mais itens no carrousel. Somente usando responsividade com as classes do bootstrap não dá. Eu teria que criar dois carrouseis diferentes e usar "d-none d-md-block" em um e "d-md-none" em outro?
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar