Barra de produtos
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
Curtidas 0
Respostas
Jothaz
11/07/2020
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.
Ele é o componente responsável por cria slides e vai ajudá-lo a implementar o que tu queres.
GOSTEI 0
Gabriel
11/07/2020
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.
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?
GOSTEI 0
Jothaz
11/07/2020
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 tem tudo explicado com exemplos.
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/
GOSTEI 0
Gabriel
11/07/2020
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 tem tudo explicado com exemplos.
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/
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?
GOSTEI 0