Question posted in 
I have been trying to work with bootstrap carousel slider. I tried to put two sliders one after another. the first one works, but the second one isn’t shown in the browser. where is my mistake?
I have tried to inspect the code in my browser. it shows that the second container has 750X1 size. it only has a height of 1. I couldn’t find a solution that way.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/animate/animate.css">
<link rel="stylesheet" href="css/owl-carosel/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl-carosel/owl.theme.default.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/magnefic-popup/magnific-popup.css">
<title></title>
</head>
<body>
<section id="team">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3> Our Team </h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row wow animated fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
<div class="col-md-12">
<div id="team-members" class="owl-carousel owl-theme">
<div class="team-member">
<img src="images/achievements/ac1500x500.jpg" class="img-responsive" alt="team member">
<div class="team-member-info text-center">
<h4 class="team-member-name"> Fariza Rahman </h4>
<h4 class="team-member-designation"> CEO </h4>
<ul class="social-list">
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="images/achievements/ac2500x500.jpg" class="img-responsive" alt="team member">
<div class="team-member-info text-center">
<h4 class="team-member-name">Khandaker Mushfiqur Rahman </h4>
<h4 class="team-member-designation"> CTO </h4>
<ul class="social-list">
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="images/achievements/ac3500x500.jpg" class="img-responsive" alt="team member">
<div class="team-member-info text-center">
<h4 class="team-member-name"> Tabia Binte Farazi </h4>
<h4 class="team-member-designation"> CFO </h4>
<ul class="social-list">
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="images/achievements/ac4500x500.jpg" class="img-responsive" alt="team member">
<div class="team-member-info text-center">
<h4 class="team-member-name"> Nazmus Sakib </h4>
<h4 class="team-member-designation"> CMO </h4>
<ul class="social-list">
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="images/achievements/ac9500x500.jpg" class="img-responsive" alt="team member">
<div class="team-member-info text-center">
<h4 class="team-member-name"> Nazmus Sakib </h4>
<h4 class="team-member-designation"> CMO </h4>
<ul class="social-list">
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Our Team
<div class="container">
<div class="row wow animated fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
<div class="col-md-12">
<div id="team-members" class="owl-carousel owl-theme">
<div class="team-member">
<img src="images/achievements/ac1500x500.jpg" class="img-responsive" alt="team member">
<div class="team-member-info text-center">
<h4 class="team-member-name"> Fariza Rahman </h4>
<h4 class="team-member-designation"> CEO </h4>
<ul class="social-list">
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="images/achievements/ac2500x500.jpg" class="img-responsive" alt="team member">
<div class="team-member-info text-center">
<h4 class="team-member-name">Khandaker Mushfiqur Rahman </h4>
<h4 class="team-member-designation"> CTO </h4>
<ul class="social-list">
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="images/achievements/ac3500x500.jpg" class="img-responsive" alt="team member">
<div class="team-member-info text-center">
<h4 class="team-member-name"> Tabia Binte Farazi </h4>
<h4 class="team-member-designation"> CFO </h4>
<ul class="social-list">
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="images/achievements/ac4500x500.jpg" class="img-responsive" alt="team member">
<div class="team-member-info text-center">
<h4 class="team-member-name"> Nazmus Sakib </h4>
<h4 class="team-member-designation"> CMO </h4>
<ul class="social-list">
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="images/achievements/ac9500x500.jpg" class="img-responsive" alt="team member">
<div class="team-member-info text-center">
<h4 class="team-member-name"> Nazmus Sakib </h4>
<h4 class="team-member-designation"> CMO </h4>
<ul class="social-list">
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-facebook"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-twitter"> </i> </a></li>
<li> <a href="#" class="social-icon icon-gray"><i class="fa fa-google-plus"> </i> </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="JS/jquery.js "></script>
<script src="JS/bootsrape/bootstrap.min.js "></script>
<script src="JS/wow/wow.min.js "></script>
<script src="JS/owl-carousel/owl.carousel.min.js "></script>
<script src="JS/custom.js "></script>
<script src="JS/owl-carosel/owl.carousel.min.js"></script>
<script src="JS/magnefic-popup/jquery.magnific-popup.min.js"></script>
<script src="JS/counter/jquery.waypoints.min.js"></script>
<script src="JS/counter/jquery.counterup.min.js"></script>
<script src="JS/easing/jquery.easing.1.3.js"></script>
I expect 2 carousel sliders one after another.
2
Answers
i have solved the problem. having same ID for both sliders was creating a problem in JS file, where i was writing the functions for the carousel slider. i just changed the name of the second Id from "team-members" to "team-members2" and wrote a carousel function for "#team-members2" in my js file.
ID’s should only be used for unique, single-instances. If you have multiple instances requiring the same code, you should use classes.