Possuo o seguinte sistema de cards feito com bootstrap 4
, cada um ocupando 4 colunas.
Porém eu preciso que quando eles forem para o mobile eles virem um Carousel
, estou tentando utilizar o Owl Carousel, porém preciso que ele verifique se a resolução é small e exibe o Carousel
somente se for, se não, exibe os cards normais.
O problema é que eu não sei como posso fazer para ele verificar a resolução e sumir o elemento conforme ela.
Tentei utilizar a classe d-none d-sm-block
, ela até some os cards
quando e mobile, porém preciso que quando não for ela suma o Carousel
.
.solucoes-box {
background-color: #fff;
padding: 4.5rem;
margin-bottom: 3rem;
transition: all 500ms ease;
}
.solucoes-box:hover{
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}
.solucoes-box .solucoes-ico {
margin-bottom: 1rem;
color: #004398;
}
.solucoes-box .icone-solucoes {
transition: all 500ms ease;
font-size: 3.5rem;
}
<div class="row">
<div class="col-md-4">
<div class="solucoes-box">
<div class="solucoes-ico">
<span class="icone-solucoes"><i class="fas fa-hand-holding-usd"></i></span>
</div>
<div class="solucoes-content">
<h2 class="s-titulo">Vamos além!
</h2>
<p class="s-descricao text-center">
Silvio Santos Ipsum mah a porta da esperanaam. Ma no existem mulher feiam, existem.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="solucoes-box">
<div class="solucoes-ico">
<span class="icone-solucoes"><i class="fas fa-comments"></i></span>
</div>
<div class="solucoes-content">
<h2 class="s-titulo">Mah oee
</h2>
<p class="s-descricao text-center">
Silvio Santos Ipsum ma vai pra l. Ma o Silvio Santos Ipsum muitoam interesanteam. Com ele ma voc vai gerar textuans ha.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="solucoes-box">
<div class="solucoes-ico">
<span class="icone-solucoes"><i class="fas fa-handshake"></i></span>
</div>
<div class="solucoes-content">
<h2 class="s-titulo">texto
</h2>
<p class="s-descricao text-center">
Silvio Santos Ipsum ma vai pra l. Ma o Silvio Santos Ipsum muitoam interesanteam. Com ele ma voc vai gerar textuans ha.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="solucoes-box">
<div class="solucoes-ico">
<span class="icone-solucoes"><i class="fas fa-balance-scale"></i></span>
</div>
<div class="solucoes-content">
<h2 class="s-titulo">Olha o aviazino
</h2>
<p class="s-descricao text-center">
Silvio Santos Ipsum ma vai pra l. Ma o Silvio Santos Ipsum muitoam interesanteam. Com ele ma voc vai gerar textuans ha.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="solucoes-box">
<div class="solucoes-ico">
<span class="icone-solucoes"><i class="fas fa-comments"></i></span>
</div>
<div class="solucoes-content">
<h2 class="s-titulo">Mahoeee
</h2>
<p class="s-descricao text-center">
Silvio Santos Ipsum ma vai pra l. Ma o Silvio Santos Ipsum muitoam interesanteam. Com ele ma voc vai gerar textuans ha.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="solucoes-box">
<div class="solucoes-ico">
<span class="icone-solucoes"><i class="fas fa-handshake"></i></span>
</div>
<div class="solucoes-content">
<h2 class="s-titulo">Quem quer dinheiro
</h2>
<p class="s-descricao text-center">
Silvio Santos Ipsum ma vai pra l. Ma o Silvio Santos Ipsum muitoam interesanteam. Com ele ma voc vai gerar textuans ha.
</p>
</div>
</div>
</div>
</div>
EDIT
Consegui fazer ele inserir a classe do owl-carousel
quando a resolução for de mobile, porém ele não esta ficando centrado na tela como deve ser, esta todo bagunçado.
outerWidth()
e adicionar ou remover a classe quando a resolução for menor que 767, porém não to conseguindo fazer.owl-carousel
quando a resolução é menor que 768 o problema é que não consigo estilizar o carousel para ele ocupar toda a largura e altura da div.