Tengo un carrusel en mi sitio web, que funciona perfectamente en la codificación. Así es como se ve el código:
<div class="w-full flex justify-center"> <div class="gallery js-flickity" data-flickity-options='{ "wrapAround": true }' > <div class="gallery-cell"> <div class="w-full flex justify-center"> <img src="./img/sidenav-1/clients-01.png" class="client-image"/> </div> </div> <div class="gallery-cell"> <div class="w-full flex justify-center"> <img src="./img/sidenav-1/clients-02.jpeg" class="client-image" /> </div> </div> </div>Tengo que usar este carrusel debido a ciertas restricciones de codificación que tengo, así que no puedo cambiarlo. Ahora tengo que conectar esta página web a un panel de administración, en el que estoy usando PHP para obtener los valores de la base de datos y hacer eco del mismo código completo y usar jQuery para ponerlo en su lugar. Pero si lo hago en lugar de un carrusel, las imágenes se muestran una debajo de la otra.
Código jQuery:
<script> $.ajax({url: "API/clients.php", success: function(result){ $("#append_clients").html(result); }}); </script>PHP:
$resultee = '<div class="gallery js-flickity" data-flickity-options=\'{ "wrapAround": true }\'>'; $sql = "SELECT * FROM Clients;"; $result = $conn->query($sql); $conn->close(); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { $image_path = $row["image_address"]; $client_name = $row["client_name"]; $client_desc = $row["client_desc"]; $resultee .= '<div class="gallery-cell"><div class="w-full flex justify-center"><img src="'.$image_path.'" class="client-image" /></div></div>'; } } $resultee .= '</div>';CSS y JS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css" /> <style> .gallery { width: 93vw; background: #e5e5e5; margin-left: -5%; } .gallery-cell { width: 93vw; margin-right: 10px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js"><script>¿Alguien puede ayudarme, no estoy seguro de qué hacer?
Tuve un problema similar con un carrusel de flickity cargado dinámicamente donde todas mis celdas estaban inicialmente apiladas una encima de la otra. Podrían ser dos cosas: solo está agregando elementos al html en lugar de usar flickity 'agregar' para agregar elementos al carrusel inicializado. En segundo lugar, si llama a 'redimensionar' después de un carrusel visible y lleno, debería poder medir y colocar los elementos correctamente.
/* init carousel via jquery */ var $carousel = $('.gallery').flickity( { "wrapAround": true } ); /* add item(s) to $carousel */ $carousel.flickity( 'append', your_item); /* force a redraw */ $carousel.flickity('resize');API de referencia: https://www.tszshan.org/home/new/common/js/flickity-docs/api.html#resize