I made this template with just a few lines of CSS. The idea is to leave the "component" of the static team only on large screens, and on small screens I give a display:none in it while I give a display:block in the Slider. So with this option you have two "components" ok.
See Example working: (when the screen is less than 790px it will show the Slider, but if it is bigger it shows the static list.) Click "Whole Page" for slider disappear and he’s static.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name=
content=
>
<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-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
.carousel {
display: none;
}
@media (max-width: 790px) {
.carousel {
display: block;
text-align: center;
}
.team {
display: none;
}
}
</style>
</head>
<body>
<h2 class="wow fadeInUp">Meet our team</h2>
<p class="wow fadeInUp" data-wow-delay="0.4">Lorem Ipsum passages, and more recently with desktop publishing software</p>
<div id="team" class="team">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 wow fadeInLeft" data-wow-delay="2s">
<img src="http://placecage.com/150/150" class="img-circle" alt="">
<h4>John Doe</h4>
<b>CEO and Founder</b>
<p>Lorem Ipsum passages, and more recently with desktop publishing software</p>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
</div>
<div class="col-lg-3 col-md-3 wow fadeInLeft" data-wow-delay="1.6s">
<img src="http://placecage.com/150/150" class="img-circle" alt="">
<h4>John Doe</h4>
<b>CEO and Founder</b>
<p>Lorem Ipsum passages, and more recently with desktop publishing software</p>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
</div>
<div class="col-lg-3 col-md-3 wow fadeInLeft" data-wow-delay="1.2s">
<img src="http://placecage.com/150/150" class="img-circle" alt="">
<h4>John Doe</h4>
<b>CEO and Founder</b>
<p>Lorem Ipsum passages, and more recently with desktop publishing software</p>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
</div>
<div class="col-lg-3 col-md-3 wow fadeInLeft" 0.8>
<img src="http://placecage.com/150/150" class="img-circle" alt="">
<h4>John Doe</h4>
<b>CEO and Founder</b>
<p>Lorem Ipsum passages, and more recently with desktop publishing software</p>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-lg-12 wow fadeInLeft" 0.8>
<img src="http://placecage.com/150/150" class="img-circle" alt="">
<h4>John Doe</h4>
<b>CEO and Founder</b>
<p>Lorem Ipsum passages, and more recently with desktop publishing software</p>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="col-lg-12 wow fadeInLeft" 0.8>
<img src="http://placecage.com/150/150" class="img-circle" alt="">
<h4>John Doe 2</h4>
<b>CEO and Founder</b>
<p>Lorem Ipsum passages, and more recently with desktop publishing software</p>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
</div>
</div>
<div class="carousel-item">
<div class="col-lg-12 wow fadeInLeft" 0.8>
<img src="http://placecage.com/150/150" class="img-circle" alt="">
<h4>John Doe 3</h4>
<b>CEO and Founder</b>
<p>Lorem Ipsum passages, and more recently with desktop publishing software</p>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
<script>
$('.carousel').carousel({
interval: 500
})
</script>
</body>
</html>
OBS1: to control the screen width where the Slider appears configure here
@media (max-width: 790px) { /* largura que vc quer que apareça */
.carousel {
display: block;
text-align: center;
}
etc.....
}
OBS2: Here you control the speed of the Slider
$('.carousel').carousel({
interval: 500 /* quanto maior o número mais devagar a transição */
})
And your question is?
– Leandro Angelo
how do I do?
– ttlelis_12
How does what?
– Leandro Angelo
given the image, I would like in mobile mode(only) they are displayed in Carousel format
– ttlelis_12
Put the relevant rest of your code, the posted does not reflect the example image. Nor the current scenario where the problem occurs.
– Leandro Angelo
The Carousel is working?
– Sam
Yes, I just wanted to check if mobile mode then yes enable the Carousel
– ttlelis_12
Just add the data-ride="Carousel" attribute to @mediaquery for mobile. But for a more detailed example, put your html code and js here to check the behavior and fix
– Paulo Ramos
I put the code that is html, ai type, has this template with Controls:https://v4-alpha.getbootstrap.com/components/carousel/ like to make it appear only on mobile, type I can add this attribute data-ride="Carousel" in <div id="team" class="team"> ?
– ttlelis_12