How to navigate through individual items in a Bootstrap carousel

Question

How to navigate through individual items in a Bootstrap carousel

I am facing an issue with my WP theme where the bootstrap carousel is moving by four items at a time instead of one. I want to achieve a continuous loop where it moves one item at a time infinitely. I attempted to implement this solution but only the first item was visible.

Below is a snippet of my current code:

 <div class="carousel slide" data-ride="carousel" id="partneri-carousel">                          
        <div class="carousel-inner">

        <div class="item active">
            <div class="col-3 column text-center">
             <div class="logo">
                 <img src="http://demo.kybernaut.cz/dgsimona/wp-content/uploads/2015/02/cvicny_partner2.png">
                 </div>
                 <div class="popisek">Simona je nkjnaskndkjsan bjhdbasjhbdjhba snhjqbsjwqb sbjqwbsq dbjudwzgzd</div>
                 <div><a href="http://www.kybernaut.cz" target="_blank">www.kybernaut.cz</a></div>                                  
            </div>
             .... (Remaining HTML code)
        
    </div>;

        <!-- Carousel Buttons Next/Prev -->
        <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><img src="http://demo.kybernaut.cz/dgsimona/wp-content/themes/sb/images/arr_simple_left.png" alt="arr_simple_left"></a>
        <a data-slide="next" href="#quote-carousel" class="right carousel-control"><img src="http://demo.kybernaut.cz/dgsimona/wp-content/themes/sb/images/arr_simple_right.png" alt="arr_simple_right"></a>
      </div>                          
    </div>

Here is the jQuery script I am using:

<script>
$(document).ready(function() {
  $('#partneri-carousel').carousel({
    pause: "hover",
    interval: 4000,
  });
});</script>

The desired behavior should be like this: (numbers represent the "partner box", "=>" denotes the movement of carousel, for example, having six partner boxes) 1 2 3 4 => 2 3 4 5 => 3 4 5 6 => 4 5 6 1 => 5 6 1 2 => infinite loop

Thank you in advance for any assistance!

jquery css wordpress twitter-bootstrap

Answer 1

Answer №1

Items within a Bootstrap carousel are identified by the class "item", causing the first four items to appear as one cohesive element.

Here is an example of a single item:

<div class="item active">
  <div class="col-3 column text-center">
   <div class="logo">
     <img src="http://demo.kybernaut.cz/dgsimona/wp-content/uploads/2015/02/cvicny_partner2.png">
     </div>
     <div class="popisek">Simona je nkjnaskndkjsan bjhdbasjhbdjhba snhjqbsjwqb sbjqwbsq dbjudwzgzd</div>
     <div><a href="http://www.kybernaut.cz" target="_blank">www.kybernaut.cz</a></div>
  </div>
</div>

The existing code does not correctly handle controls for the carousel.

I have reorganized your markup in this fiddle, aiming to meet your requirements: http://jsfiddle.net/davidcw/k1jnj15b/

Best of luck!

Edit: Setting Variable Number of Items Dynamically in WordPress

Apologies for the confusion. To achieve your goal, you can manage opening and closing divs based on whether the number of images aligns with your target (e.g., 4). Use a counter and the following approach within your .carousel-inner div:

<?php

    $i = 1;
    // initiate the opening of the div before the loop
    echo "<div id='item-$i' class='item'><ul class='carousel-thumbnails'>";

    $rowcount = count( get_field('carousel_images')); // total image count - consider adjusting counting method.

        while( has_sub_field('carousel_images') ){

             /*===========================================================*/
             $slidenumber = 4; // SET NUMBER OF SLIDES HERE
             /*===========================================================*/
             $thumb_id = get_sub_field('image');
             $thumbsize = "thumbnail"; // (thumbnail, medium, large, full or custom size)
             $thumbimage = wp_get_attachment_image_src( $thumb_id, $thumbsize );

             ?>
              <li>
                 <img src="<?php echo $thumbimage[0]; ?>" />
              </li>
              <?php

         // close current div and open new div if multiple of $slidenumber
         $itemNumber = ($i / $slidenumber) + 1;

         if( $i % $slidenumber == 0 && $i < $rowcount) {

           echo "</ul></div><div id='item-$itemNumber' class='item'><ul class='carousel-thumbnails'>";

            }

        $i++;

        };

    //ensure final div is closed
    echo "</ul></div>";

    ?>

Structure of the markup:

<div class="row">
  <div class="col-md-12">
    <div class="carousel slide" id="thumb-carousel">
      <div class="carousel-inner">
        <!--
        Insert PHP logic from above here
        -->
      </div><!-- /.carousel-inner -->
      <!-- Carousel navigation -->
      <a class="left carousel-control" href="#thumb-carousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#thumb-carousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
  </div>
</div>

Additionally, apply jQuery to assign the active class to the initial carousel item to start the carousel:

(function( $ ) {'use strict';
  $(function() {
    // Set the first thumbnail item as active
    $("#thumb-carousel .item:first").addClass("active");
  });
})( jQuery );

To ensure proper display of images in the ul, include CSS rules like these:

ul.carousel-thumbnails {
  font-size: 0;
  width: 100%;
  padding-left: 0;
  margin-bottom: 0;
  height: 78px;
  overflow: hidden;
}
.carousel-thumbnails li {
  display: inline-block;
  margin-left: 20px;
}

Answer 2

Items within a Bootstrap carousel are identified by the class "item", causing the first four items to appear as one cohesive element.

Here is an example of a single item:

<div class="item active">
  <div class="col-3 column text-center">
   <div class="logo">
     <img src="http://demo.kybernaut.cz/dgsimona/wp-content/uploads/2015/02/cvicny_partner2.png">
     </div>
     <div class="popisek">Simona je nkjnaskndkjsan bjhdbasjhbdjhba snhjqbsjwqb sbjqwbsq dbjudwzgzd</div>
     <div><a href="http://www.kybernaut.cz" target="_blank">www.kybernaut.cz</a></div>
  </div>
</div>

The existing code does not correctly handle controls for the carousel.

I have reorganized your markup in this fiddle, aiming to meet your requirements: http://jsfiddle.net/davidcw/k1jnj15b/

Best of luck!

Edit: Setting Variable Number of Items Dynamically in WordPress

Apologies for the confusion. To achieve your goal, you can manage opening and closing divs based on whether the number of images aligns with your target (e.g., 4). Use a counter and the following approach within your .carousel-inner div:

<?php

    $i = 1;
    // initiate the opening of the div before the loop
    echo "<div id='item-$i' class='item'><ul class='carousel-thumbnails'>";

    $rowcount = count( get_field('carousel_images')); // total image count - consider adjusting counting method.

        while( has_sub_field('carousel_images') ){

             /*===========================================================*/
             $slidenumber = 4; // SET NUMBER OF SLIDES HERE
             /*===========================================================*/
             $thumb_id = get_sub_field('image');
             $thumbsize = "thumbnail"; // (thumbnail, medium, large, full or custom size)
             $thumbimage = wp_get_attachment_image_src( $thumb_id, $thumbsize );

             ?>
              <li>
                 <img src="<?php echo $thumbimage[0]; ?>" />
              </li>
              <?php

         // close current div and open new div if multiple of $slidenumber
         $itemNumber = ($i / $slidenumber) + 1;

         if( $i % $slidenumber == 0 && $i < $rowcount) {

           echo "</ul></div><div id='item-$itemNumber' class='item'><ul class='carousel-thumbnails'>";

            }

        $i++;

        };

    //ensure final div is closed
    echo "</ul></div>";

    ?>

Structure of the markup:

<div class="row">
  <div class="col-md-12">
    <div class="carousel slide" id="thumb-carousel">
      <div class="carousel-inner">
        <!--
        Insert PHP logic from above here
        -->
      </div><!-- /.carousel-inner -->
      <!-- Carousel navigation -->
      <a class="left carousel-control" href="#thumb-carousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#thumb-carousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
  </div>
</div>

Additionally, apply jQuery to assign the active class to the initial carousel item to start the carousel:

(function( $ ) {'use strict';
  $(function() {
    // Set the first thumbnail item as active
    $("#thumb-carousel .item:first").addClass("active");
  });
})( jQuery );

To ensure proper display of images in the ul, include CSS rules like these:

ul.carousel-thumbnails {
  font-size: 0;
  width: 100%;
  padding-left: 0;
  margin-bottom: 0;
  height: 78px;
  overflow: hidden;
}
.carousel-thumbnails li {
  display: inline-block;
  margin-left: 20px;
}

Answer 3

Answer №2

Have you experimented with the moveSlides setting? Although I am not familiar with the specific script you are utilizing, it seems like the code is designed to handle that functionality.

(I apologize for being unable to provide a more detailed response in the form of a comment; my reputation does not allow me to do so at this time.)

Answer 4

Have you experimented with the moveSlides setting? Although I am not familiar with the specific script you are utilizing, it seems like the code is designed to handle that functionality.

(I apologize for being unable to provide a more detailed response in the form of a comment; my reputation does not allow me to do so at this time.)

How to navigate through individual items in a Bootstrap carousel

Answer №1

Edit: Setting Variable Number of Items Dynamically in WordPress

Answer №2

Similar questions

Truncating text with ellipsis in CSS when wrapping on a nested div structure

if statement based on the conditions set in the CSS

Enhancing the functionality of a bootstrap button with the addition of an

Executing 'npm start' to launch an HTML file along with a CSS stylesheet - A step-by-step guide

What is the best way to incorporate a large amount of HTML into a webpage using jQuery?

Grab the code snippet from JSFiddle

What is the process for deleting an animation using JavaScript, and how can the background color be altered?

Is there a way to incorporate an 'ended' feature into the .animate() function?

I am encountering an issue with opening a dropdown select option upon clicking in C# while using Selenium

The width of the container is exceeded by the drop-down menu during hover

Send variable to jQuery from a div element

Ways to modify the appearance of the Sign up page on Moodle

choosing and identifying the iframes for YouTube videos

Iterating through two classes in a Javascript loop

Problem with Bootstrap multiselect: it only opens the first time, and stops working after an ajax call

Implementing Auto-complete Functionality with Tagify in C# ASP.Net using jQuery

When using Next.js, the global.css file is not loaded until a manual page refresh is performed. Additionally, the styles.js

linking ng-style through live html

Can a child element be shown even when the parent element is hidden?

Creating image filters using an object in jQuery