I made this template with just a few lines of CSS. The idea is to leave the static team "component" only on large screens, and on small screens I give display:none on it while giving display:block on Slider . Soon with this option you have two "components" ok.
See the example working: (when the screen is less than 790px it will show the Slider, but if it is larger it shows the static list.) Click "All Page" to the slider disappears and it becomes 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><scriptsrc="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><scriptsrc="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 Slider appears set 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 Slider
$('.carousel').carousel({
interval: 500 /* quanto maior o número mais devagar a transição */
})
