jquery – Bootstrap 3嵌套多轮播

您好我想在bootstrap3上做旋转木马滑块.

我尝试将旋转木马放入另一个旋转木马,但这不能正常工作.

我怎么能这样做？

我的源代码：

<!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">&lsaquo;</a>
    <a class="carousel-control right" href="#kinCarousel" data-slide="next">&rsaquo;</a>
   </div>
   <!-- INSIDE -->
  </div>
 </div>

    <!-- Carousel nav -->
      <a class="carousel-control left" href="#musiciansCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#musiciansCarousel" data-slide="next">&rsaquo;</a>
    </div>

<br /><br /><br />      

</div>
</body>
</html>

解决方法

这是jsfiddle： http://jsfiddle.net/vittore/Q2TYv/1907/

只需一个轮播就可以轻松实现,动态添加和删除幻灯片.

>为第一个项目渲染带有幻灯片的旋转木马
>为隐藏div中的所有项目渲染所有幻灯片,并为每个幻灯片添加类或数据项目等.
>使用顶部按钮有条件地添加和删除所有幻灯片,但对于特定项目
>更新幻灯片后重置轮播数据
>将它留在旋转木马上左右移动滑块.

以下是项目按钮的示例代码：

$('.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
  });

jquery – Bootstrap 3嵌套多轮播

解决方法

相关推荐