1

Possuo o seguinte sistema de cards feito com bootstrap 4, cada um ocupando 4 colunas.

Cards

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.

5
  • Creio que isso só seja possível fazendo uso de Javascript.
    – LeAndrade
    Commented 27/12/2018 às 15:53
  • O que eu pensei foi usar o outerWidth() e adicionar ou remover a classe quando a resolução for menor que 767, porém não to conseguindo fazer. Commented 27/12/2018 às 16:01
  • @LeAndrade No caso eu consegui adicionar a classe 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. Commented 27/12/2018 às 16:28
  • 1
    Se já chegou até aí, edite a pergunta e coloque o código com o carousel funcionando.
    – LeAndrade
    Commented 27/12/2018 às 16:46
  • Cara de mais detalhes de como esta e como vc gostaria que fique, qual div quer colocar o carrossel etc...
    – hugocsl
    Commented 27/12/2018 às 20:54

1 Resposta 1

1

Cara eu tentei fazer adicionando as classes owl-carousel e owl-theme por jQuery quando a tela fosse menor que 768px, mas não deu muito certo... Então basicamente eu tive que replicar o conteúdo e usar d-none d-md-block e d-block d-md-none para mostrar e esconder o Owl Carrossel ou o Grid mostrando todos os itens como está na imagem abaixo.

inserir a descrição da imagem aqui

Segue o código referente a imagem acima.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />

	<style>
		.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;
			text-align: center;
		}

		.solucoes-box .icone-solucoes {
			transition: all 500ms ease;
			font-size: 3.5rem;
		}

		.solucoes-box h2 {
			text-align: center;
		}
	</style>
</head>

<body>

	<div class="container d-none d-md-block">
		<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>
	</div>


	<div class="container d-block d-md-none">
		<div class="row ">

			<div class="col-12 owl-carousel owl-theme">
				<div class="col-md-4 mx-auto item">
					<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 mx-auto item">
					<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 mx-auto item">
					<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 mx-auto item">
					<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 mx-auto item">
					<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 mx-auto item">
					<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>

		</div>
	</div>


	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

	<script>
		$('.owl-carousel').owlCarousel({
			loop: true,
			margin: 10,
			nav: true,
			responsive: {
				0: {
					items: 1
				}
			}
		});
	</script>
</body>

</html>

4
  • Eu fiz utilizando o Jquery para verificar o tamanho da tela com outerWidth quando ela é menor que 767 eu dou um addClass na div do carousel, acho que essa não é a melhor maneira mas funcionou Commented 28/12/2018 às 11:06
  • @GuilhermeRigotti sim funciona dessa forma, mas lembre-se de tb dar o removeClass caso a tela volte a crescer.... Eu até tinha feito um teste tb com jQuery, mas não tinha gostado do resultado... ai prefiri fazer apenas com as classes nativas do Bootstrap e CSS
    – hugocsl
    Commented 28/12/2018 às 11:09
  • 1
    Sim eu dei um remove, ainda fiz mais algumas coisas com essa função. Funcionou legal com essa abordagem. Commented 28/12/2018 às 11:32
  • @GuilhermeRigotti massa! Essa forma que eu fiz não é muito semântica pq ela de certa forma duplica o conteúdo... então se vc consegue adicionar e remover a classe no resize é uma boa ideia sim!
    – hugocsl
    Commented 28/12/2018 às 11:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .