1

Buenas tengo un Carousel de bootstrap y solo tengo que llenarlo dinamicamente pero no se como hacerlo, debido a que este carousel contiene varias imagenes dentro de 1 item (exactamente 3 imagenes por item), la logica me dice que tengo que llenarlo con un foreach pero no se donde aplicarlo por que si lo aplico adentro del item todas la imagenes estarian en un item y no 3 por item como deberia. Si alguein tiene alguna sugerencia de como proceder estaria muy agradecido de la ayuda.

Aqui el codigo:

<div class="carousel-inner">
  <div class="carousel-item active">
    <ul id="bloglist" class="row">
      <li class="mt-3 col-4 col-md-12">

        <div class="cardBlog">
          <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg" alt="CardImg" style="width:100%"> Paginas web
        </div>
      </li>
      <li class="mt-3 col-4 col-md-12">

        <div class="cardBlog">
          <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg" alt="CardImg" style="width:100%"> Paginas web
        </div>
      </li>
      <li class="mt-3 col-4 col-md-12">

        <div class="cardBlog">
          <img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg" alt="CardImg" style="width:100%"> Paginas web
        </div>
      </li>

    </ul>
  </div>

Como mencione van 3 imagenes por item y no se como indicarle que no me inserte todas las imagenes ahi, la idea es que solo me inserte 3 luego que cree otro item donde inserte otras 3 y asi.

1 respuesta 1

0

te dejo una posible solución:

<?php 

  function addImageToItem($url)
  {
    $html = "<li class='mt-3 col-4 col-md-12'>
              <div class='cardBlog'>
                <img src='$url' alt='CardImg' style='width:100%'> Paginas web
              </div>
             </li>";

      return $html;
  }

  function addItemToCarousel($urls, $active = false)
  {
    $html = "";
    if($active)
      $html += "<div class='carousel-item active'>";
    else
      $html += "<div class='carousel-item'>";
    $html += "<ul id='bloglist' class='row'>";
    if(is_array($urls))
      foreach ($urls as $url) {
        $html += addImageToItem($url);
      }
    else ($urls) {
      $html += addImageToItem($urls);
    }
    $html += "</ul></div>";
    return $html; 
  }


  $active = true; 
  $imagesForItem = 3; 

  $images = []; // Es un array con todas las urls de las imágenes;
  $html = "<div class='carousel-inner'>";
  for ($i = 1; $i <= count($images); $i++) {
      $aux = [];
      for ($j = 0; $j < $imagesForItem && $i <= count($images); $j++) {
        $aux[] = $images[$i++];
      }
      $html += addItemToCarousel($aux, $active);
      $active = false;
  }
  $html = "</div>";

  echo $html;
?>

Me he creado dos funciones, la función addImageToItem permite añadir imágenes a un item, de modo que si quieres cambiar una clase o algo de las imágenes, se cambiará en todas, evitando duplicidades de código.

La segunda agrega a un item todas las imágenes que se pasen en un vector llamado $urls, te he hecho una pequeña comprobación para que si le pasas un string con una única URL también funcione.

Después en el programa principal lo que hago son dos for anidados, uno para recorrer todas las imágenes que tengas en un vector que he llamado $images y un segundo for para las imágenes que va a tener cada item, esto viene definido por la variable $imagesForItem, de modo que si luego quieres que cada item tenga más so menos variables, lo único que tienes que hacer es modificar el valor de dicha variable.

Finalmente imprimo el resultado con un echo y eso es todo.

Un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.