Skip to content

Instantly share code, notes, and snippets.

@bkaminski
Last active March 25, 2017 22:12
Show Gist options
  • Save bkaminski/101dd915186547720f7c977e25e4653a to your computer and use it in GitHub Desktop.
Save bkaminski/101dd915186547720f7c977e25e4653a to your computer and use it in GitHub Desktop.
Using php 'rand' and or WordPress to create random "data-interval" string to be inserted in Bootstrap 4 Carousel values across a WordPress loop.
<div id="post-<?php the_ID(); ?>" class="carousel slide" data-ride="carousel" data-interval="<?php echo rand(4500, 6000); ?>">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Third slide">
</div>
</div>
@bkaminski
Copy link
Author

bkaminski commented Mar 25, 2017

This is a specific use case. I am using Bootstrap 4 carousels and flex-box "cards" with image containers which display the carousel. Being that the data populating these cards comes from different sources AND more importantly, are part of "the loop", I wanted to randomize the speed at which the carousel slides "transitioned" -- like Windows 10 start menu. Using the above method works wonderfully as part of a loop and will assign a random numeric value to the "data-interval" attribute (between the interval values I specified above) for items within the same WordPress loop. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment