0

Buenas tardes estoy iterando un slider desde mi base de datos. Pero me pregunto si a esa iteración le puedo añadir la foto que tengo de portada que salga primero.

Este es mi carrousel:

<div id="carouselExampleControls{{ $item->id }}" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
      @foreach ($item->galeria as $slid) 
        <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
           <img class="d-block w-100 imgPropiedadListado" src="{{ asset("{$slid->ruta}") }}" alt="First slide">
        </div>
      @endforeach
   </div>
   <a class="carousel-control-prev" href="#carouselExampleControls{{ $item->id }}" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls{{ $item->id }}" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>

Ahora estoy iterando {{ asset("{$slid->ruta}") }} pero la duda es que cada registro tiene un campo que se llama portada que también es una imagen, se puede añadir para que salga delante de las del carrousel? Espero explicarme bien.

1 respuesta 1

1

Se me ocurre que le pongas la primera imagen antes que las demás, fuera del bucle, y que esta sea la active.
Lógicamente tendrías que pasarle a la vista la variable con la url de la imagen portada (le he puesto $portada) que leerías del registro o si va en el registro que le pasas a la vista pues usar ese valor.

<div id="carouselExampleControls{{ $item->id }}" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
          <img class="d-block w-100" src="{{asset($portada)}}" alt="">
      </div>
      @foreach ($item->galeria as $slid) 
        <div class="carousel-item">
           <img class="d-block w-100 imgPropiedadListado" src="{{ asset("{$slid->ruta}") }}" alt="First slide">
        </div>
      @endforeach
   </div>
   <a class="carousel-control-prev" href="#carouselExampleControls{{ $item->id }}" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls{{ $item->id }}" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>
1
  • Muchas gracias por tu ayuda @Juan funciono perfecto!
    – Miguel
    Commented el 30 ago. 2021 a las 16:38

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.