The image slider is popular and to help ease confusion with creating sliders that have a different number of images - I am separating the options each into their own posting. This is a slider for two images.
The HTML
<!-- HTML CODE FOR A SLIDER WITH TWO 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>
<!-- 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 TWO 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%; }
45% { left: 0%; }
50% { left: -100%; }
95% { left: -100%; }
100% { left: -200%; }
}
/** 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: 300%;
animation-name: slide;
animation-duration: 10s; /** 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 **/
/** THREE PICTURES (INCLUDING LOOP) WOULD EACH BE 33.33 PERCENT OF THE WHOLE **/
figure.slider figure {
width: 33.33%;
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 TWO IMAGES **/
