jquery - ejemplo - carousel responsive
Agregue diapositivas al carrusel Bootstrap 3 dinámicamente usando jQuery (2)
Estoy tratando de agregar diapositivas a Bootstrap carrusel usando jQuery pero no actúa como un control deslizante en el navegador. En su lugar, está mostrando las imágenes en la vista de lista.
<!DOCTYPE html>
<html>
<head>
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="Assets/js/bootstrap.min.js"></script>
<title></title>
<script>
onload=function(){
for(var m=3;m>=0;m--)
{
var path="file_uploads/"+m+".jpg";
$(".carousel-indicators").after("<li data-target=''#carousel-example-generic'' data-slide-to=/""+m+"/"></li>");
$(".carousel-inner").after("<div class=''item''><img src=''"+path+"'' alt=''"+m+"''></div>");
}
$(".carousel-indicators li:first").addClass("active");
$(".carousel-inner .item:first").addClass("active");
$(''.carousel'').carousel();
}
</script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
Bueno, Bootstrap Carousel tiene varios parámetros para controlar.
es decir
Intervalo: especifica el retraso (en milisegundos) entre cada diapositiva.
pausa: hace que el carrusel pase de la siguiente diapositiva cuando el puntero del mouse (ratón) entra en el carrusel y reanuda el deslizamiento cuando el puntero del mouse (ratón) sale del carrusel.
ajuste: especifica si el carrusel debe pasar por todas las diapositivas de forma continua o detenerse en la última diapositiva
Para tu referencia:
Para más detalles por favor haga clic aquí ...
Espero que esto te ayudará :)
Nota: esto es para la ayuda adicional. Me refiero a cómo puede personalizar o cambiar el comportamiento predeterminado una vez que se carga el carrusel.
En primer lugar, confiaré en el hecho de que m es una matriz con la url adecuada para sus imágenes.
El HTML debería ser así:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
El carrusel interno de la clase está vacío, ahí es donde colocarás tus imágenes para el carrusel.
La clase carrusel-indicatiors también está vacía, será llenada por JS.
Luego, viene el JS: (como dije, confío en el hecho de que m es una matriz de imgs url)
$(document).ready(function(){
for(var i=0 ; i< m.length ; i++) {
$(''<div class="item"><img src="''+m[i]+''"><div class="carousel-caption"></div> </div>'').appendTo(''.carousel-inner'');
$(''<li data-target="#carousel-example-generic" data-slide-to="''+i+''"></li>'').appendTo(''.carousel-indicators'')
}
$(''.item'').first().addClass(''active'');
$(''.carousel-indicators > li'').first().addClass(''active'');
$(''#carousel-example-generic'').carousel();
});
Básicamente, usted agrega todas sus imágenes a la clase carrusel-inner, agrega el control de carrusel de li, luego agrega la clase activa a la primera imagen y al primer indicador de carrusel li., Y finalmente, inicializa su carrusel. Tenga en cuenta que todo esto está dentro de una función de preparación de documentos, que es lo que falta . Lo que haces es solo definir una función llamada onload
Espero eso ayude !
EDITAR: Vi que también emite etiquetas alt a las imágenes, pero eso es algo que no es necesario que esté en mi respuesta, apuesto a que puede hacerlo sin problemas.