Due to the popularity of the slider, the many configurations, and the growing original thread, I am creating separate postings for sliders with two, three, four, and five images. Here is the four-image slider.
The HTML
<!-- HTML CODE FOR A SLIDER WITH FOUR DIFFERENT IMAGES -->
<!-- CHANGE ALL PATHS AS NEEDED FOR YOUR PROJECT -->
<!-- CONTAINER DIV -->
<div id="bannerSlider">
<!-- SLIDER ENVELOPE-->
<figure class="slider">
<!-- IMAGE NUMBER ONE -->
<figure>
<img src="https://path/to/your/image1.jpg" />
<figcaption>Image 1 Caption</figcaption>
</figure>
<!-- IMAGE NUMBER TWO -->
<!-- EXAMPLE WITH A CLICKABLE LINK -->
<!-- LINK WILL OPEN IN NEW TAB -->
<figure>
<a href="https://www.google.com" target="_blank">
<img src="https://path/to/your/image2.jpg" />
<figcaption>Image 2 Caption</figcaption>
</a>
</figure>
<!-- IMAGE NUMBER THREE -->
<figure>
<img src="https://path/to/your/image3.jpg" />
<figcaption>Image 3 Caption</figcaption>
</figure>
<!-- IMAGE NUMBER FOUR -->
<figure>
<img src="https://path/to/your/image4.jpg" />
<figcaption>Image 4 Caption</figcaption>
</figure>
<!-- LOOP IMAGE -->
<!-- THIS IMAGE MUST BE THE SAME AS THE FIRST FOR A SMOOTH TRANSITION -->
<figure>
<img src="https://path/to/your/image1.jpg" />
<figcaption>Image 1 Caption</figcaption>
</figure>
<!-- CLOSE THE SLIDER ENVELOPE -->
</figure>
<!-- CLOSE THE CONTAINER DIV -->
</div>
The CSS
/** BEGIN SLIDER WITH FOUR IMAGES **/
/** THIS IS THE TIMING OF THE ANIMATED IMAGES. **/
/** THESE WILL NEED TO BE ADJUSTED IF YOU CHANGE THE NUMBER OF IMAGES**/
@keyframes slide {
0% { left: 0%; }
21% { left: 0%; }
25% { left: -100%; }
46% { left: -100%; }
50% { left: -200%; }
71% { left: -200%; }
75% { left: -300%; }
96% { left: -300%; }
100% { left: -400%; }
}
/** THIS BLOCK HELPS USE THE ENTIRE WIDGET AND PREVENTS SCROLL BARS **/
#bannerSlider {
width: 100%;
overflow: hidden;
}
/** WIDTH VALUE SHOULD BE 100(N+1) **/
/** WHERE N IS THE NUMBER OF DIFFERENT PICTURES **/
/** ADJUST THE ANIMATION DURATION ACCORDINGLY **/
figure.slider {
position: relative;
width: 500%;
animation-name: slide;
animation-duration: 20s; /** FIVE SECONDS PER PICTURE **/
animation-iteration-count: infinite;
display: flex;
}
/** WIDTH SHOULD BE APPROPRIATE FRACTION OF THE WHOLE **/
/** FOR THIS SETTING - CONSIDER THE TOTAL NUMBER OF PICTURES **/
/** FIVE PICTURES (INCLUDING LOOP) WOULD EACH BE 20 PERCENT OF THE WHOLE **/
figure.slider figure {
width: 20%;
height: auto;
flex-shrink: 0;
}
/** EACH INDIVIDUAL IMAGE SHOULD TAKE THE FULL WIDTH **/
/** EACH INDIVIDUAL IMAGE WILL AUTOMATICALLY SCALE THE HEIGHT **/
/** FOR BEST RESULTS - ALL PICTURES SHOULD HAVE THE EXACT SAME DIMENSIONS **/
figure.slider img {
width: 100%;
height: auto;
}
/** THIS BLOCK FORMATS THE CAPTIONS AT THE BOTTOM **/
/** CHANGE THE FONT AND COLORS AS DESIRED **/
/** IF YOU DO NOT WISH TO USE CAPTIONS - YOU CAN REMOVE THE ENTIRE BLOCK **/
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #ffffff;
width: 100%;
font-size: 24px;
padding: 10px;
}
/** END OF SLIDER WITH FOUR IMAGES **/