Menu
Hello i want to do carousel slider on bootstrap3.
I try to put in carousel another carousel but this is not working normally.
How i can do this ?
My Source Code :
<!DOCTYPE HTML>
<html>
<head>
<title>Bootstrap Carousel</title>
<link href="css/carousel.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/transition.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#oceanCarousel, #musiciansCarouse, #kinCarousel').carousel({
interval: false
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>Carousel Gallery with One Image</h1>
<!-- OCEAN GALLERY -->
<div id="musiciansCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<a href="#"><img src="../images/large/musicians01.jpg"></a>
</div>
<div class="item">
<a href="#"><img src="../images/large/musicians02.jpg"></a>
</div>
<div class="item">
<a href="#"><img src="../images/large/musicians03.jpg"></a>
</div>
<div class="item">
<a href="#"><img src="../images/large/musicians04.jpg"></a>
</div>
<div class="item">
<!-- INSIDE -->
<div id="kinCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
dldnlkdnndlkd
<a href="#"><img src="../images/large/musicians01.jpg"></a>
</div>
<div class="item">
dndlkdnd
<a href="#"><img src="../images/large/musicians02.jpg"></a>
</div>
<div class="item">
<a href="#"><img src="../images/large/musicians03.jpg"></a>
</div>
<div class="item">
<a href="#"><img src="../images/large/musicians04.jpg"></a>
</div>
<div class="item">
<a href="#"><img src="../images/large/musicians05.jpg"></a>
</div>
<a class="carousel-control left" href="#kinCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#kinCarousel" data-slide="next">›</a>
</div>
<!-- INSIDE -->
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#musiciansCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#musiciansCarousel" data-slide="next">›</a>
</div>
<br /><br /><br />
</div>
</body>
</html>
550
Here is jsfiddle: http://jsfiddle.net/vittore/Q2TYv/1907/
It is much easier to implement that with just one carousel, dynamically adding and removing slides.
Render one carousel with slides for the first project
Render all slides for all projects in hidden div and add class or data-project etc to each slide.
Use top buttons to conditionally add and remove all slides but for particular project
After updating slides reset carousel data
Leave it to carousel to move slides left and right.
Here is example code for project buttons:
$('.carousel-linked-projects > li > a').click(function() {
$('.carousel-linked-projects').find('a').removeClass('active')
$(this).addClass('active')
var currentProject = $(this).data('project')
$('#myCarousel').find('.item').remove()
$slides = $('#allSlides').find('.item').filter( function ( i ) {
return $(this).data('project') == currentProject
})
$slides.eq(0).addClass('active')
$('#myCarousel').find('.carousel-inner').append($slides)
$('#myCarousel').carousel("pause").removeData().carousel(1)
return false
});
:)
I solved my problem. I use in carousel, tab system like second slider here my code :
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
<div class="container">
<!-- MDND -->
<div class="container" id="myWizard">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="active"><a href="#k1" data-toggle="tab">Step 1</a></li>
<li><a href="#k2" data-toggle="tab">Step 2</a></li>
<li><a href="#k3" data-toggle="tab">Step 3</a></li>
<li><a href="#k4" data-toggle="tab">Step 4</a></li>
<li><a href="#k5" data-toggle="tab">Step 5</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="k1">
<p>55555</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="k2">
<p>66666</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="k3">
<p>9999</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="k4">
<p>777</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="k5">
<p>444444</p>
<a class="btn btn-success first" href="#">Start over</a>
</div>
</div>
</div>
<!-- MDN -->
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide">
<div class="container">
<!-- MDND -->
<div class="container" id="myWizard2">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
<li><a href="#step2" data-toggle="tab">Step 2</a></li>
<li><a href="#step3" data-toggle="tab">Step 3</a></li>
<li><a href="#step4" data-toggle="tab">Step 4</a></li>
<li><a href="#step5" data-toggle="tab">Step 5</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="step1">
<p>aaaaaaaaaaaa</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step2">
<p>vvvvvvvvv</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step3">
<p>3333333</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step4">
<p>ddddd</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step5">
<p>Th44444</p>
<a class="btn btn-success first" href="#">Start over</a>
</div>
</div>
</div>
<!-- MDN -->
</div>
</div>
<div class="item">
<div class="container">
<!-- MDND -->
<div class="container" id="myWizard3">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="active"><a href="#s1" data-toggle="tab">Step 1</a></li>
<li><a href="#s2" data-toggle="tab">Step 2</a></li>
<li><a href="#s3" data-toggle="tab">Step 3</a></li>
<li><a href="#s4" data-toggle="tab">Step 4</a></li>
<li><a href="#s5" data-toggle="tab">Step 5</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="s1">
<p>OOOOOOOOOOOOOOOOOOOO</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="s2">
<p>OOOOO222222</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="s3">
<p>OOOOO</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="s4">
<p>OOOOO11111</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="s5">
<p>OOOOO22222222</p>
<a class="btn btn-success first" href="#">Start over</a>
</div>
</div>
</div>
<!-- MDN -->
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
<script type="text/javascript">
$('.next').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
$('.first').click(function(){
$('#myWizard a:first').tab('show')
})
</script>
<script type="text/javascript">
$('.next').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
$('.first').click(function(){
$('#myWizard2 a:first').tab('show')
})
</script>
<script type="text/javascript">
$('.next').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
$('.first').click(function(){
$('#myWizard3 a:first').tab('show')
})
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With