1

Estoy usando Angular.

Tengo un Carousel de boostrap en mi html y quiero hacerlo dinamico, es decir, tengo una lista con las n direcciones de ruta de las imagene y quiero cargarlas en mi carousel, el problema que tengo es que en todo lado que veo usan una cantidad definida de imagene por lo que simplemente copian y pegan el llamado a la imagen y cambian la direccion.

Este seria mi html, de momento estoy quemando tres imagenes ...

  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active" style ="background-image: url('../../../assets/img/moptOscuro.png');"></div>
      <div class="carousel-item" style ="background-image: url('http://localhost:27210/#/AppData\Avisos\1061.png');"></div>
      <div class="carousel-item" style ="background-image: url('../../../assets/img/moptOscuro.png');"></div>     
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

1 respuesta 1

0

En mi caso, tengo los nombres almacenados en un DB, los recupero usando un Ajax y dentro de él armo los div con sus clases necesarias, quedando así:

    function GetEvidenceScrap(id)
{
    var idcompleto = id.id;
    var i = 0;
    var idbutton = idcompleto.substring(2, idcompleto.length);
        $.ajax({
            method: "GET",
            url: "Coordinador/GetEvidenceScrap",
            contentType: "aplication/json; Charset=utf-8",
            data: { 'idscrap': idbutton },
            async: true,
            success: function (result) {
                console.log("Longitud: " + result.length);
                while (i < result.length)
                {
                    var carousel = document.getElementById('CI_' + idbutton);
                    if (i == 0)
                    {
                        var div = document.createElement('div');
                        div.setAttribute('class','carousel-item active');
                        var img = document.createElement("img");
                        img.setAttribute('class', 'd-block w-100');
                        div.appendChild(img);
                        img.setAttribute('src', '/Evidence/' + result[i].rutevidencia);
                        carousel.appendChild(div);
                        i++;
                    }
                    else
                    {
                        var div = document.createElement('div');
                        div.setAttribute('class', 'carousel-item');
                        var img = document.createElement('img');
                        img.setAttribute('class', 'd-block w-100');
                        div.appendChild(img);
                        img.setAttribute('src', '/Evidence/' + result[i].rutevidencia);
                        carousel.appendChild(div);
                        i++;
                    }   
                }
                console.log(result);
            }
        });
}

Del lado de HTML tengo los siguientes div con las clases faltantes así:

<div id="[email protected]()" class="carousel slide" data-bs-ride="carousel">
                                                <div id="[email protected]" class="carousel-inner">
                                                    <!--Creacion del carousel con evidencia-->
                                                    <!--Fin del carousel con evidencia-->
                                                </div>
                                                <button class="carousel-control-prev" type="button" data-bs-target="#[email protected]()" data-bs-slide="prev">
                                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                    <span class="visually-hidden">Previous</span>
                                                </button>
                                                <button class="carousel-control-next" type="button" data-bs-target="#[email protected]()" data-bs-slide="next">
                                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                    <span class="visually-hidden">Next</span>
                                                </button>
                                            </div>

En mi caso estoy utilizando C#, creo que puede servir como punto de partida para futuras consultas.

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.