Turn card to Carousel when resolution decreases

Asked

Viewed 493 times

1

I have the following card system made with bootstrap 4, each occupying 4 columns.

Cards

But I need that when they go to the mobile they see a Carousel, I’m trying to use the Owl Carousel, but I need it to check if the resolution is small and display the Carousel only if, if not, displays normal cards.

The problem is I don’t know how I can make him check the resolution and disappear the element as it.

I tried to use the class d-none d-sm-block, she until the cards when and mobile, but I need when it is not gone 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 managed to get him to enter the owl-carousel when the resolution is mobile, but it’s not getting centered on the screen as it should be, this whole mess.

css twitter-bootstrap responsive-layout owl-carousel

  • I believe this is only possible by using Javascript.

  • What I thought was to use the outerWidth() and add or remove the class when the resolution is less than 767, but I can’t do it.

  • @Leandrade In case I managed to add the class owl-carousel when the resolution is less than 768 the problem is that I can’t style Carousel to occupy the whole width and height of the div.

  • 1

    If you’ve reached that point, edit the question and enter the code with Carousel working.

  • Face more details of how this and how you would like it to stay, which div wants to put the carousel etc...

1 answer

1


Dude I tried to do by adding the classes Owl-Carousel and Owl-Theme by jQuery while the screen was less than 768px, but it didn’t quite work... So basically I had to replicate the content and use d-none d-md-block and d-block d-md-none to show and hide the Owl Carousel or Grid showing all items as shown in the image below.

inserir a descrição da imagem aqui

Follow the code referring to the image above.

<!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>

  • I did using Jquery to check the screen size with outerWidth when it is less than 767 I give an addClass in the div of Carousel, I think this is not the best way but it worked

  • @Guilhermerigotti does work that way, but remember to also give the removeClass in case the screen grows again.... I had even done a tb test with jQuery, but I didn’t like the result... ai prefer to do only with native Bootstrap and CSS classes

  • 1

    Yes I gave a remove, still did a few more things with this function. It worked cool with this approach.

  • @Guilhermerigotti the dough! This way that I did is not very semantic because it somehow duplicates the content... so if you can add and remove the class in resize is a good idea yes!

Browser other questions tagged css twitter-bootstrap responsive-layout owl-carousel

You are not signed in. Login or sign up in order to post.