Carrossel de marcas no mobile

Layout
1

Pessoal Alguém Pode Me Ajudar?, Quero Colocar O carrossel De Marcas Na Versão Mobile

site: https://www.realshoes.com.br/

2

tente isso

$(function(){
    $('.marcas.hidden-phone').removeClass("hidden-phone");
}):
1 curtida
3

Desculpa a ignorância, mas em que parte eu coloco esse código? Editar código CSS ou Inserir HTML?

4

Inserir em HTML, Rodape, Tipo JavaScript

5

Muito obrigado. Vou tentar aqui. :+1:

6

Poxa, amigo. No meu tá dando algum erro esse código. O que pode ser?

Screenshot_20201119-124153344_1
Screenshot_20201119-124153344_11080×2246 118 KB

7

opa no final está um dois ponto e é um ponto é virgula!!!

$(function(){
    $('.marcas.hidden-phone').removeClass("hidden-phone");
});
8

Agora deu certo. Excelente. :+1::+1::+1::+1:

9

Excelente dica, deu certo aqui com a minha loja virtual. Com um detalhe, as marcas ficaram cortadas (não apareceu a logo inteira) teria alguma solução para isso?

Minha loja: https://www.amazonmaquinadecostura.com.br/

Captura da Web_19-10-2022_153537_www.amazonmaquinadecostura.com.br

Também queria saber se conhece algum código para deixar elas passando automaticamente em carrosel.

10

Teste:

Fonte: GitHub - kenwheeler/slick: the last carousel you'll ever need

image
image1545×664 51.7 KB 

<style>
	@media only screen and (max-width: 767px){
		#corpo .marcas .slick-slider {
			padding: 0 25px;
		}
	}
</style>
<script>
$(function(){
	$('.marcas > .slick-slider').slick('slickSetOption', 'responsive',[{breakpoint: 768,settings: {slidesToShow: 3}},{breakpoint: 480,settings: {slidesToShow: 2}}], true);
});
</script>

image

11

Obrigado pela resposta meu amigo,

Coloquei o código como mostrou, mas ainda não aconteceu nenhuma alteração. Não sei se fiz certo.

image
image1337×876 56.4 KB

image
image581×633 31 KB

12

fiz uma acerto, tente novamente

<style>
	@media only screen and (max-width: 767px){
		#corpo .marcas .slick-slider {
			padding: 0 25px;
		}
	}
</style>
<script>
$(function(){
	setTimeout(function(){
		$('.marcas > .slick-slider').slick('slickSetOption', 'responsive',[{breakpoint: 768,settings: {slidesToShow: 3}},{breakpoint: 480,settings: {slidesToShow: 2}}], true);
	}, 1000)
});
</script>
13

Agora sim, muito obrigado meu amigo, deu super certo.

Só com um detalhe, que faltou colocar a “/” para fechar a função “style” quando coloquei deu certo (“/style”).

1 curtida
14

Oi, como conseguiu deixar as logomarcas maiores? as minhas estão super pequenas e nao acesso o css para ajustar o width ou size.