Use a while loop to display unlimited data in a 5 column Bootstrap Carousel

Asked
Active3 hr before
Viewed126 times

6 Answers

display
90%

Is there a way to create a Bootstrap Carousel with 5 columns and use a while loop to output all the images? How would it work with rows and columns? This is my while loop: , Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy. ,Find centralized, trusted content and collaborate around the technologies you use most.

Here is the example :

 <?php if( have_rows('logos') ): ?>
 <div class="row">
    <?php while( have_rows('logos') ): the_row(); 
        // vars
        $image = get_sub_field('logo_image');
        $content = get_sub_field('name');
?>
    <div class="item active col-2">
       <a href="#"><img src="<?php echo $image['url']; ?>"></a>
    </div>

    <?php endwhile; ?>
 </div>
 <?php endif; ?>
88%

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
   <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
   </div>
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img src="..." class="d-block w-100" alt="...">
         <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
         </div>
      </div>
      <div class="carousel-item">
         <img src="..." class="d-block w-100" alt="...">
         <div class="carousel-caption d-none d-md-block">
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
         </div>
      </div>
      <div class="carousel-item">
         <img src="..." class="d-block w-100" alt="...">
         <div class="carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
         </div>
      </div>
   </div>
   <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
   </button>
</div>
72%

A slideshow component for cycling through elements—images or slides of text—like a carousel.,The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.,Some representative placeholder content for the first slide.,Here’s a carousel with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
         <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
         <img src="..." class="d-block w-100" alt="...">
      </div>
   </div>
</div>
load more v
65%

Bootstrap carousel is a generic unit of the framework that it is a standard component for cycling through elements. However, it can do much more than that and is undoubtedly one of the most sought-after details in interfaces these days.,Since Bootstrap uses SVG for carousel controls, it is not evident how to change them right away. You cannot use baseline attributes nor traditional CSS.,By default, Bootstrap carousel is located within the grid. Therefore, if you want to extend its borders and force it to take up the entire screen, you need to play with code. The workaround is not as hard as it may seem.,It collaborates with Page Visibility API so that a slideshow will not cycle through content until the browser becomes active.

By default, the Bootstrap carousel starts to work on page load. However, if you do not need this, there is a small hack that requires the utilization of standard data-attributes. Just add data-interval=”false” to the slideshow declaration. The resulting code should look like this:

& lt;
div id = & quot;
carousel - example & quot;
class = & quot;
carousel slide & quot;
data - interval = & quot;
false & quot; & gt;
load more v
75%

An example of full-page usage of the video carousel. ,Click on the image to see live demo., Full page video carousel , An example of responsive bootstrap carousel with videos instead of images.

0
40%

Let’s add data-target="#carouselExample"  and a data-slide-to attribute to each image. We could add those to the image wrappers instead, but we’ll go with the images in this post. Later on, we’ll want to use the data-target value (#carouselExample) as the ID for the carousel, so note that for when we get there. The values for data-slide-to are based on the order of the images.,The carousel ID should match the data-target of the images in the gallery.,This is a really nice tutorial, the result seems broken on my pixel 2xl display though. The card works just fine but the carousel on the result tab doesn’t works, I just get the images displayed vertically.,We’ll add data-toggle="modal"  and data-target="#exampleModal" to the parent element (#gallery). This makes it so clicking anything in the gallery opens the modal. We should also add the data-target value (#exampleModal) as the ID of the modal itself, but we’ll do that once we get to the modal markup.

Let’s start with the markup for a grid layout of images. We can use Bootstrap’s grid system for that.

<div class="row" id="gallery">
     <div class="col-12 col-sm-6 col-lg-3">
          <img class="w-100" src="/image-1">
        </div>
     <div class="col-12 col-sm-6 col-lg-3">
          <img class="w-100" src="/image-2">
        </div>
     <div class="col-12 col-sm-6 col-lg-3">
          <img class="w-100" src="/image-3">
        </div>
     <div class="col-12 col-sm-6 col-lg-3">
          <img class="w-100" src="/image-4">
        </div>
</div>
load more v

Other "display-undefined" queries related to "Use a while loop to display unlimited data in a 5 column Bootstrap Carousel"