Turn card into carousel when lower resolution

Navigation
1

I have the following system of cards made with bootstrap 4 , each one occupying 4 columns.

ButIneedthemwhentheygomobilesotheylooklikeCarousel,I'mtryingtouse Owl Carousel , but I need it to check if the resolution is small and displays Carousel only if it is, otherwise it displays the normal cards.

The problem is that I do not know how I can do it to check the resolution and disappear the element as it.

I tried to use the class d-none d-sm-block , it even adds the cards when it is mobile, but I need it when it does not add the 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

I was able to get it to insert the owl-carousel class when the resolution is mobile , but it's not getting screened as it should be, it's all messy.

    
asked by anonymous 27.12.2018 / 16:41

1 answer

1

Dude I tried to add the owl-carousel and owl-theme classes to jQuery when the screen was smaller than 768px, but it did not work very well ... So basically I had to replicate the content and use d-none d-md-block d-block d-md-none to show and hide the Owl Carousel or Grid showing all items as it is in the image below.

Followthecodefortheimageabove.

<!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><scriptsrc="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><scriptsrc="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>
    
28.12.2018 / 00:37
How to convert json object to array Pass descriptor by parameter to another descriptor