Hola quiero hacer carrusel deslizante en bootstrap3.

Bootstrap 3 Anidada Múltiple Carrusel

Yo trato de poner en otro carrusel carrusel, pero esto no está funcionando normalmente.

Cómo puedo hacer esto ?

Mi Código Fuente :

<!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>
  • Carrusel dentro de otro carrusel? Te vistes de esquí en la hamaca también?
  • Ya no es sólo la lógica de diseño. Y no sé cómo hacerlo
  • ¿Sabe usted la respuesta a esto por favor ? stackoverflow.com/questions/28603984/…
InformationsquelleAutor user3348410 | 2014-02-27

2 Comentarios

  1. 4

    Aquí es jsfiddle: http://jsfiddle.net/vittore/Q2TYv/1907/

    Es mucho más fácil de implementar que con sólo un carrusel, de forma dinámica añadir y eliminar diapositivas.

    • Representar un carrusel con diapositivas para el primer proyecto

    • Representar todas las diapositivas para todos los proyectos en los div y agregar la clase de datos o proyecto, etc. para cada diapositiva.

    • El uso de botones de la parte superior de forma condicional en agregar y quitar todas las diapositivas, pero para el proyecto en particular

    • Después de la actualización de diapositivas de restablecimiento de carrusel de datos

    • Dejar de carrusel para mover las diapositivas de la izquierda y la derecha.

    Aquí es el código de ejemplo para el proyecto de botones:

    $('.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
    });
    • Usted también podría usar los datos de la diapositiva-a=»0″ a la derecha en los elementos que usted necesita. Tu comentario me ha salvado de muchas horas de frustración.
    • me alegro de que ayudó a! luchó wi mí mismo.
  2. 2

    🙂

    He resuelto mi problema.
    Yo uso en el tiovivo, el sistema de pestañas como segundo control deslizante aquí mi código :

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

Dejar respuesta

Please enter your comment!
Please enter your name here