How can I add a counter and a cycle to a carousel in boostrap4 (django)?

Question

How can I add a counter and a cycle to a carousel in boostrap4 (django)?

Navigation

#1 by (0 votes)

-1

I need help with the creation of a bootstrap4 carousel in django.

The images of the carusel are loaded from the database, and the slider should be growing, showing the new images as well.

Do I need to add a counter in the ol to assign the slider and to tell you which one is the first?

The bootstrap carousel code is as follows:

<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>

thank you very much.

html python bootstrap django bootstrap-carousel

asked by Hector Jara 07.11.2018 в 19:42

source

1 answer

Do not throw me the expected result when I use the inner join Remove Marker in Specific Android Studio

score 0 · Answer 1

It would be good if you also put the code of your js file to better understand the context of what you want to do. Here I leave a way to do what I hope is what you want. The ideal is to have the dynamic content in a JSON to make it easier to control and fill the html with a cycle.

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>