Bootstrap 3嵌套多旋转木马 [英] Bootstrap 3 Nested Multi Carousel
本文介绍了Bootstrap 3嵌套多旋转木马的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好我想在bootstrap3上做转盘滑块。
我尝试将另一个旋转木马放入旋转木马中，但这不能正常工作。
我该怎么做？
我的源代码：
<！DOCTYPE HTML>
< html>
< head>
< title> Bootstrap Carousel< / title>
< link href =css / carousel.css =stylesheettype =text / css/>
< script src =js / jquery-1.7.1.min.jstype =text / javascript>< / script>
< script src =js / bootstrap.min.jstype =text / javascript>< / script>
< script src =js / transition.jstype =text / javascript>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃oceanCarousel，#musiciansCarouse，#kinCarousel'）。carousel（{
interval：false
}）;
}）;
< / script>
< / head>
< body>
< div id =wrapper>
< h1>带有一个图片的轮播图片库< / h1>
<！ - 海洋画廊 - >
< div id =musiciansCarouselclass =carousel slide>
<！ - 传送带物品 - >
< div class =carousel-inner>
< div class =活动项目>
< 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 =kinCarouselclass =carousel slide>
<！ - 传送带物品 - >
< div class =carousel-inner>
< div class =活动项目>
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 lefthref =＃kinCarouseldata-slide =prev>& lsaquo;< / a>
< a class =carousel-control righthref =＃kinCarouseldata-slide =next>& rsaquo;< / a>
< / div>
<！ - INSIDE - >
< / div>
< / div>
<！ - Carousel nav - >
< a class =carousel-control lefthref =＃musiciansCarouseldata-slide =prev>& lsaquo;< / a>
< a class =carousel-control righthref =＃musiciansCarouseldata-slide =next>& rsaquo;< / a>
< / div>
< br />< br />< br />
< / div>
< / body>
< / html>
解决方案
这里是jsfiddle： http://jsfiddle.net/vittore/Q2TYv/1907/
使用一个轮播，实现动态添加和删除幻灯片更容易。
-
使用幻灯片渲染一个旋转木马第一个项目
-
为隐藏div中的所有项目渲染所有幻灯片，并将类或数据项目等添加到每张幻灯片中。
> -
使用顶部按钮有条件地添加和删除所有幻灯片，但是用于特定项目
-
更新幻灯片后，重置轮播数据
-
将它放到轮播中左右移动幻灯片。 $ b
以下是项目按钮的示例代码：
$（'。carousel-linked-projects> li> ; a'）。click（function（）{
$（'。carousel-linked-projects'）。find（'a'）。remove Class（'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
} ）;
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>解决方案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 });这篇关于Bootstrap 3嵌套多旋转木马的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
