In this article, I’m going to build two simple extensions for the Bootstrap carousel. First, I’ll create a full-screen Bootstrap Carousel slideshow, and then I’ll show you how to randomize the first slide on page load.
But before digging into those extensions, let’s start by creating a carousel based on the default styles.
Building the Carousel
To create the carousel, we’ll take advantage of the basic code for the carousel component that Bootstrap provides:
Notice that each of our images contains the custom
data-color attribute. Later we’ll use its value as a fallback in case the corresponding image fails to load.
pause configuration properties. Take note that we choose to set the value of the
pause property to
false because we always want the cycling to be active:
Having followed those simple steps (and of course imported the required files), we should now be able to build the first version of the carousel. Here’s how it looks so far:
Continue reading %A Full-screen Bootstrap Carousel with Random Initial Image%
Powered by WPeMatico