All geek questions in one place

Bootstrap 3 Nested Multicarel

Hi, I want to make a carousel slider on bootstrap3.

Example nested multi carousel

I am trying to insert a carousel into another carousel, but this works fine.

How can i 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">&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>
+4
source share
2 answers

Here is jsfiddle: http://jsfiddle.net/vittore/Q2TYv/1907/

This is much easier to implement using only one carousel, dynamically adding and removing slides.

  • Mark one carousel with slides for the first project

  • Mark all slides for all projects in a hidden div and add a class or data project, etc. on each slide.

  • ,

  • reset

  • .

:

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

:)

. , , , :

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

Source: https://habr.com/ru/post/1529314/

More articles:


All Articles