Issue
I am trying to use two bootstrap carousels on the same page. The following is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--BOOTSTRAP LINKS FOR CAROUSEL-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--BOOTSTRAP LINKS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!--START OF NAVBAR-->
<div class="nav-box">
<br>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<img src="logo.png" id="logo"></img>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT S</a></li>
</ul>
</div>
</nav>
</div>
<!--END OF NAVBAR-->
<!--START OF BOOTSTRAP CAROUSEL-->
<section class="section-white">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" style="width:100%; height: 500px !important;">
<div class="item active">
<img src="a.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="b.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="c.jpg" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</section>
<!--END OF BOOTSTRAP CAROUSEL-->
<!--START OF RADIO BAR-->
<div class="radio-bar">
<div class="text1">
<h3 id="text1-line1">streams</h3>
<h4 id="text1-line2">shows</h4>
</div>
<div id="audio">
<audio controls>
<source src="viper.mp3" type="audio/mp3" controls="controls">
</audio>
</div>
<div id="podcast-box">
<img src="icon.png" id="image"></img>
<p id="pheading">casts</p>
</div>
<div id="blue-box">
<img src="blue.svg" id="blue-box-image"></img>
<p id="blue-box-heading">show</p>
</div>
</div>
<!--END OF RADIO BAR-->
<!--START OF ABOUT US BAR-->
<div class="about-us">
<h3 id="heading">ABOUT</h3>
<p id="para">*******</p>
<div class="image-box">
<img src="image.jpg" id="image"></img>
</div>
</div>
<!--END OF ABOUT US BAR-->
<!--START OF VIDEO CAROUSEL-->
<div class="container" id="container">
<div class="row" id="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide" id="carousel">
<ol class="carousel-indicators" id="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active" id="action"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner" id="carousel-inner">
<div class="item active" id="item-active">
<div class="row" id="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
<div class="item" id="item">
<div class="row" id="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
<div class="item" id="item">
<div class="row" id="row">
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
</div>
<!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control" id="carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control" id="carousel-control">›</a>
</div>
<!--.Carousel-->
</div>
</div>
</div>
<!--.container-->
<script type="text/javascript">
$(document).ready(function() {
$('#Carousel').carousel({
interval: 5000
})
});
</script>
<!--END OF VIDEO CAROUSEL-->
</body>
</html>
I changed the class names to id, because it was overlapping with the previous carousel. Even after doing that the second carousel is overlapping with the element just before it, and the right navigation arrow is not appearing.
I checked the following link: Is it possible to have multiple Twitter Bootstrap carousels on one page?.
Here it says that the navigation href should point to different ids, which I have done. But I am still getting the problem.
Where am I going wrong?
Solution
Last edit There you go, i added the carousel function to the thumbnail for the 2nd carousel. :)
jQuery(document).ready(function($) {
$('#myCarousel3').carousel({
interval: 1000000
});
$('#myCarousel').carousel({
interval: 3000
});
$('#myCarousel2').carousel({
interval: 2000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
#myCarousel {
margin-top: 30px;
}
.thumbnail {
border: none;
}
.thumbnail-modifier {
margin-bottom: 0px;
}
.thumbnails {
display: inline-flex;
width: 100%;
}
.thumbnails-center {
display: flex;
margin: 0 auto;
}
.cursor {
cursor: pointer;
}
.row-fluid {
display: inline-flex;
width: 100%;
}
#myCarousel3 {
margin-top: 20px;
margin-bottom: 50px;
}
.row-center {
display: flex;
margin: 0 auto;
}
.carousel-control-modifier {
background-image: none !important;
color: black !important;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel2">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
<div class="row">
<div id="slider">
<!-- Top part of the slider -->
<div class="row">
<div id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x546&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x546&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x546&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x546&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x546&text=five"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
<div class="">
<div id="myCarousel3" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="row-center">
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
<a class="thumbnail cursor thumbnail-modifier" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=extra"></a>
</div>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="left carousel-control carousel-control-modifier" href="#myCarousel3" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control carousel-control-modifier" href="#myCarousel3" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!--/myCarousel-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Answered By - Seb
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.