An automatic image slider with text in HTML and CSS can be created by adding HTML elements to display the text, and then using CSS and JavaScript/jQuery to control the display of the text and the timing of the transitions.
automatic image slider with text in html css
Earlier I have shared many more types of image slider tutorials. I have shared with you many slider designs for beginners with only html and css. You will find all the codes here which you can copy directly.
1. HTML of automatic image slider with text
The basic structure of Automatic Image Slider with Text should be created using the following html codes. The div with the class of “slider” acts as the container for the entire slider.
Inside the “slider” container, there are multiple div elements with the class of “slider-content”. Each “slider-content” element contains an img element, which represents the image for that slide, and a div element with the class of “slider-text”, which contains the text for that slide.
The text for each slide is contained within an h3 heading and a p paragraph element. The heading element displays the title of the slide and the paragraph element displays the description of the slide.
This is the basic structure of the slider, but in order to make it functional, you will need to add the appropriate CSS and JavaScript/jQuery code to control the display of the images and text, and the timing of the transitions.
<div class="slider">
<div class="slider-content">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="image1.jpg" alt="image1">
<div class="slider-text">
<h3>Image 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="slider-content">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="image2.jpg" alt="image2">
<div class="slider-text">
<h3>Image 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='code-block code-block-6' style='margin: 8px 0; clear: both;'> <script type="litespeed/javascript" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2145094925886663"
crossorigin="anonymous"></script> <ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2145094925886663"
data-ad-slot="5699863678"></ins> <script type="litespeed/javascript">(adsbygoogle=window.adsbygoogle||[]).push({})</script></div>
</div>
</div>
<div class="slider-content">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="image3.jpg" alt="image3">
<div class="slider-text">
<h3>Image 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
2. Design automatic image slider with CSS
Automatic Image Slider with Text should be designed by following css code.
The .slider class sets the container element to be a relative positioned element with a width of 100% and a height of 500px, and overflow hidden to prevent the images from overflowing out of the slider container.
The .slider-content class sets each slide to be an absolute positioned element that takes up the full width and height of the slider container. object-fit: cover; makes the image stretch to cover the entire slide and display: none; will hide the slides by default.
The .slider-text class sets the text container to be an absolute positioned element that is placed at the bottom of the slide with a width of 100%, and padding of 20px. The background color is set to be semi-transparent black and the text color is set to white.
The .active class sets the display property of the slide to ‘block’, so that it will be visible.
With the HTML, CSS and JavaScript/jQuery code, you will have a functional automatic image slider with text.
It’s worth to note that when using JavaScript, you should toggle the class “active” instead of using “display: none” and “display: block”, as this will allow you to make a smooth transition between slides using CSS.
.slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.slider-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
.slider-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
.active {
display: block;
}
3. JavaScript code for image slider with text
Now the automatic image slider with text in html css has to be activated by javascript.
1. The variable currentIndex is set to 0, which represents the current slide that is being displayed.
2. The variable contents is set to a list of all elements with the class of “slider-content”, which are the individual slides in the slider. The variable maxIndex is set to the number of slides minus 1, so that the index of the last slide can be determined.
3. The nextImage function is called to transition to the next slide. currentIndex is incremented by 1. If the current slide is the last slide, the index is reset to 0, so the slider will loop through the images.
4. The function uses the forEach method to iterate through all the contents and removes the class ‘active’ from each slide, effectively hiding all the slides.
5. Finally, the class ‘active’ is added to the slide at the current index, making it visible.
6. The setInterval function is called to automatically call the nextImage function every 3 seconds (3000 milliseconds), causing the images to transition automatically.
var currentIndex = 0;
var contents = document.querySelectorAll('.slider-content');
var maxIndex = contents.length - 1;
function nextImage() {
currentIndex++;
if (currentIndex > maxIndex) {
currentIndex = 0;
}
contents.forEach(function(content) {
content.classList.remove('active');
});
contents[currentIndex].classList.add('active');
}
setInterval(nextImage, 3000);
This will create an automatic image slider that displays text along with each image, and transitions to the next image and its corresponding text every 3 seconds. You can adjust the timing of the transition and the CSS to customize the appearance of the text.
Hopefully from this tutorial you have learned how to create automatic image slider with text in html css. In this I have shared many more types of image slider tutorials. If you like this design then you can follow the tutorials.
