Estoy generando una matriz de objetos numéricos indeterminables (ya que la matriz se crea dinámicamente y se basa en una interfaz de administración y en la cantidad de objetos que han ingresado). Estoy tratando de usar el carrusel de Bootstrap para mostrar solo 8 objetos en cada diapositiva y si hay más de 8, mueva los extras a la siguiente diapositiva hasta la 16, luego a la siguiente diapositiva hasta la 24, y así sucesivamente. También quiero que se ejecute si el usuario hace clic hacia adelante o hacia atrás (no para pasar las diapositivas automáticamente).
El siguiente es mi código que se está ejecutando, incluida la variable idx , que es el número de objeto secuencial en la matriz (basado en cero).
HTML
<div id="articles" class="articles"></div>JavaScript:
$(document).ready(function(){ <% JSONObject jsonObject=(JSONObject)session.getAttribute("responseDetailsJson"); %> var tileSetObjects = <%=jsonObject%> $.each(tileSetObjects.HelpJSONArray, function(idx, obj){ $('#articles').append('<article class="pdf-guide" id="article-'+idx+'"><a href="'+obj.LINKVALUE+'" class="link-wrapper"><div class="title-link">'+obj.TITLE+'</div><p class="description">'+obj.LONGCONTENT+'</p></a></article>'); }); });¡Gracias por la ayuda!
Dices que estás usando Bootstrap, pero tu marcado no refleja eso en absoluto.
Comenzaría con la documentación de JavaScript de Bootstrap , que incluye una sección detallada sobre Carrusel.
Como se describe, configure la opción de interval en 'falso' para deshabilitar el desplazamiento automático que logrará el comportamiento deseado. Como se describe en la documentación:
La cantidad de tiempo de retraso entre el ciclo automático de un elemento. Si es falso, el carrusel no realizará un ciclo automáticamente.
Con respecto a los 8 a la vez, parece que su JavaScript debería funcionar, aunque la parte de inyección de marcado deberá modificarse para que coincida con el marcado del carrusel de Bootstrap (consulte el enlace anterior).
No estoy seguro de si esto es posible con el carrusel de Bootstrap. Pero hay controles deslizantes que pueden cumplir con sus requisitos. El control deslizante "Slick" es un complemento que cumple con sus requisitos y también responde.
Puede encontrar la demostración aquí: http://kenwheeler.github.io/slick/ y busque "Multiple Items".
Recomiendo usar Flickity , una biblioteca de controles deslizantes de JavaScript, creada por David DeSandro de Metafizzy. Para que pueda hacer o crear carruseles receptivos y fáciles de tocar que pueda personalizar fácilmente. Este contiene diferentes características como wraparround, freescroll, groupcells, autoplay, lazyload, parallax y muchas más.
Para agrupar celdas en lo que desea, por ejemplo, necesita 8 en cada diapositiva, debe configurar data-flickity='{ "groupCells": 8 } en el número que desee. Luego divida el 100% en la base del número que desea, por ejemplo, 100% divídalo en 8 y luego .carousel-cell { width: 12.5%;} como su carrusel de ancho. desarrollo web. Que tengas un lindo día. :)
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> </head> <body> <h1>Flickity - groupCells</h1> <!-- Flickity HTML init --> <div class="carousel" data-flickity='{ "groupCells": 8, "autoPlay": true }' style=""> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <!--Add More Here.....--> </div> </body> </html> <style type="text/css"> /* external css: flickity.css */ * { box-sizing: border-box; } body { font-family: sans-serif; } .carousel { background: #EEE; } .carousel-cell { width: 12.5%; height: 200px; margin-right: 10px; background: #8C8; border-radius: 5px; counter-increment: carousel-cell; } .carousel-cell.is-selected { background: #ED2; } /* cell number */ .carousel-cell:before { display: block; text-align: center; content: counter(carousel-cell); line-height: 200px; font-size: 80px; color: white; } </style>