Bootstrap 3 嵌套多轮播

【问题标题】：Bootstrap 3 Nested Multi CarouselBootstrap 3 嵌套多轮播
【发布时间】：2015-02-20 20:16:02
【问题描述】：

你好，我想在 bootstrap3 上做轮播滑块。

我尝试在 carousel 中放入另一个 carousel，但这无法正常工作。

我该怎么做？

我的源代码：

<!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>

【问题讨论】：

  • 轮播在另一个轮播中？你也在吊床上滑雪吗？
  • 不，这只是不合逻辑的设计。我不知道该怎么做
  • 你知道这个问题的答案吗？ stackoverflow.com/questions/28603984/…

标签： jquery html twitter-bootstrap-3 carousel


【解决方案1】：

这里是 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
  });

【讨论】：

  • 你也可以在你需要的元素上使用 data-slide-to="0" 。您的评论为我节省了许多小时的挫败感。
  • @EricWarnke 很高兴它有帮助！我自己也很挣扎。
【解决方案2】：

:)

我解决了我的问题。 我在轮播，标签系统中使用第二个滑块，我的代码：

  <!-- 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>

【讨论】：

    猜你喜欢
    • 2022-01-08
    • 2013-09-18
    • 2016-11-24
    • 2014-01-05
    • 2014-07-10
    • 1970-01-01
    • 2014-10-10
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode