The Divi Carousel Pro from Divi Epic offers an Image Carousel feature that utilizes the powerful Slick Carousel library. If you want to randomize the starting slide in the Image Carousel, this post explains how to do it.
Randomize the Image Carousel Starting Slide using jQuery
To randomize the starting slide, you can directly call the Slick Carousel and instruct it to go to a random slide on page load. Here's the necessary jQuery code to achieve this:
jQuery(document).ready(function($) {
var carouselClass = '.wdc_image_carousel_0';
setTimeout(function() {
$(carouselClass + ' .slick-slider').slick('slickGoTo', Math.floor(Math.random() * $(carouselClass + ' .slick-track .slick-slide').length));
}, 1000); // Delay of 1000 milliseconds (1 second)
});You can add this code via Divi's Theme Options at:
WP Admin > Divi > Theme Options > Integration > Add code to the head of your blog.
The current delay is set to 1000 milliseconds (1 second), but you may need to adjust this to ensure the code runs after the carousel has been initialized on the page.
The example targets the first image carousel module on the page. For targeting a specific module, you can replace .wdc_image_carousel_0 with a custom class, such as .carousel-random-starting-point, and assign it in the module settings under:
Advanced > CSS ID & Classes > CSS Class.
Now your carousel should start at a random slide each time.
0 Comments