-1

necesito ayuda con la creacion de un carrusel de bootstrap4 en django.

Las imagenes del carusel se cargan desde la base de datos, y el slider deberia ir creciendo, mostrando las nuevas imagenes tambien.

Necesito agregar un contador en el ol para asignar los slider y para decirle cual es el primero??

El codigo del carousel de bootstrap es el siguiente:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">    <!--poner aqui un contador para asignarlo a data-slide-to????-->
      <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">
        <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
      </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>

muchas gracias.

1 respuesta 1

0

Seria bueno que colocaras también el código de tu archivo js para poder entender mejor el contexto de lo que deseas realizar. Por acá te dejo una manera de hacerlo que espero sea lo que buscas. Lo ideal es tener el contenido dinámico en un JSON para que sea más fácil controlarlo y rellenas el html con un ciclo.

let carousel = document.getElementById('carousel-inner');
let carouselContent = [
    {class: 'd-block w-100', src: 'https://cdn.pixabay.com/photo/2018/11/03/22/24/fire-3792951_1280.jpg', alt: 'Image 1'},
    {class: 'd-block w-100', src: 'https://cdn.pixabay.com/photo/2018/10/22/11/58/grass-3765172_1280.jpg', alt: 'Image 2'},
    {class: 'd-block w-100', src: 'https://cdn.pixabay.com/photo/2018/10/07/11/49/fallow-deer-3729821_1280.jpg', alt: 'Image 3'},
    {class: 'd-block w-100', src: 'https://cdn.pixabay.com/photo/2018/10/07/19/25/walk-3731094_1280.jpg', alt: 'Image 4'},
    {class: 'd-block w-100', src: 'https://cdn.pixabay.com/photo/2018/10/21/19/23/lily-3763573_1280.jpg', alt: 'Image 5'},
    {class: 'd-block w-100', src: 'https://cdn.pixabay.com/photo/2018/09/30/19/03/metro-3714290_1280.jpg', alt: 'Image 6'},
    {class: 'd-block w-100', src: 'https://cdn.pixabay.com/photo/2018/10/21/21/28/autumn-3763897_1280.jpg', alt: 'Image 7'}
];

for (let slide of carouselContent) {
    let carouselItem = document.createElement('div');
    carouselItem.classList.add('carousel-item');
    let image = document.createElement('img');
    image.className = slide.class;
    image.src = slide.src;
    image.alt = slide.alt;
    carouselItem.appendChild(image);
    carousel.appendChild(carouselItem);
}

let firstImage = document.getElementsByClassName('carousel-item')[0];
firstImage.classList.add('active');
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" id="carousel-inner">

                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" 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" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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