Text slideshow HTML with images using w3 CSS and javascript

Hi friends, in this tutorial you will learn how to create a Text slideshow HTML with images using w3 CSS and javascript. This is a very simple slideshow I have made using custom CSS and w3 CSS. You will find a lot of tutorials on image sliders but it is very rare to find sliders with text and images simultaneously within a single div. Below I have explained the step-by-step process for the slideshow.

Also read, Google like scrolling using jquery for multiple images

Required steps to create slideshow text and images in HTML w3 CSS and javascript

Step 1:- Create an HTML file inside the root directory of your local server.

Step 2:- Paste the below code inside the body tag of the HTML file as shown below.

<div class="w3-container">
  <h2 style="text-align:center;">Slideshow Indicators using previous and next button</h2>
</div>
<div class="w3-content" style="max-width:800px">
  <div class="mySlides">
    <div id="parent">
        <div id="left">
            <h3 style="text-align: center;color: white;">Text Content of the First Div</h3>
            <p style="text-align:center;color: white;">First Image nature1.jpg</p>
            <p style="text-align:center"><i…