Barra de produtos

11/07/2020

0

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
Gabriel

Gabriel

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

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar