Pure Vanilla JavaScript Responsive Image Slider With Text Over It

This JavaScript code snippet helps you to create a responsive image slider with text. It renders a dynamic image carousel with a title, subtitle, background URL, and call to action link in each slide’s template.

The image slider comes with arrow buttons to navigate the next and previous images with infinite scroll. Besides this, you can also control the carousel behavior with its available configuration options.

The text portion of the carousel allows you to add a heading/title, paragraphs/description, and a call to action button. Moreover, you can easily customize the working of the plugin by just updating the configuration options.

There are many code snippets available online or on many other blogs and websites, but everyone cannot optimize your blog or website, so you need some optimized code snippets. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready-to-use code and paste it where you want.

Features:

1. Light Weight.
2. Pure JavaScript.
3. Cross Browser.
4. No JQuery Files.
5. Fully Customizable.
6. Responsive.

How To Pure Vanilla JavaScript Responsive Image Slider With Text Over It?

There are a few easy and understandable steps to achieve your desired functionality that we are gonna share below. Follow each step perfectly.

CSS:

<style type="text/css">
body {

text-align: center;
font-size: 18px;
background-size: cover;
color: #fff;
font-family: sans-serif;
margin: 0;
padding-top: 0;
}

h1 {
font-size: 48px;
}

h4{
font-size: 24px;
}

#mySlider a {
padding: 10px 25px;
background-color: #4CA74C;
color: #fff;
border-radius: 25px;
text-decoration: none;
}

#mySlider {
overflow: hidden;
position: relative;
width: 100%;
height: 450px;
}

.singleSlide {
background-size: cover;
height: 450px;
box-sizing: border-box;
position: absolute;
left: 100%;
width: 100%;
top: 0px;
}

.slideOverlay {
background-color: rgba(0, 0, 0, 0.5);
padding: 50px;
height: 100%;
box-sizing: border-box;
line-height: 50px;
}

#sliderNav {
position: relative;
top: -225px;
z-index: 999;
font-size: 42px;
}

#sliderNav:hover { cursor: pointer; }

#sliderPrev {
position: relative;
float: left;
left: 50px;
}

#sliderNext {
position: relative;
float: right;
right: 50px;
}

@-webkit-keyframes slideIn {
100% { left: 0; }
}

@keyframes slideIn {
100% { left: 0; }
}

.slideInRight {
left: -100%;
-webkit-animation: slideIn 1s forwards;
animation: slideIn 1s forwards;
}

.slideInLeft {
left: 100%;
-webkit-animation: slideIn 1s forwards;
animation: slideIn 1s forwards;
}

@-webkit-keyframes slideOutLeft {
100% { left: -100%; }
}

@keyframes slideOutLeft {
100% { left: -100%; }
}

.slideOutLeft {
-webkit-animation: slideOutLeft 1s forwards;
animation: slideOutLeft 1s forwards;
}

@-webkit-keyframes slideOutRight {
100% { left: 100%; }
}

@keyframes slideOutRight {
100% { left: 100%; }
}

.slideOutRight {
-webkit-animation: slideOutRight 1s forwards;
animation: slideOutRight 1s forwards;
}
</style>

HTML:

<div id="mySlider"></div>
<div id="sliderNav">
<div id="sliderPrev" onclick="prevSlide();">&laquo;</div>
<div id="sliderNext" onclick="nextSlide();">&raquo;</div>
</div>

JavaScript:

<script type="text/javascript">
var slideIndex = 0,
currentSlideIndex = 0,
slideArray = [];

function Slide(e, t, l, d) {
this.title = e, this.subtitle = t, this.background = l, this.link = d, this.id = "slide" + slideIndex, slideIndex++, slideArray.push(this)
}
var walkingDead = new Slide("The Walking Dead", "A show about fighting zombies", "https://source.unsplash.com/450x450/?girl", "#"),
bigBang = new Slide("The Big Bang Theory", "A show about Sheldon", "https://source.unsplash.com/450x450/?cat", "#"),
LastMan = new Slide("The Last Man on Earth", "A show about loneliness", "https://source.unsplash.com/450x450/?tech", "#");

function buildSlider() {
for (var e, t = 0; t < slideArray.length; t++) e += "<div id='" + slideArray[t].id + "' class='singleSlide' style='background-image:url(" + slideArray[t].background + ");'><div class='slideOverlay'><h1>" + slideArray[t].title + "</h1><h4>" + slideArray[t].subtitle + "</h4><a href='" + slideArray[t].link + "' target='_blank'>Open Link</a></div></div>";
document.getElementById("mySlider").innerHTML = e, document.getElementById("slide" + currentSlideIndex).style.left = 0
}

function prevSlide() {
var e = 0 === currentSlideIndex ? slideArray.length - 1 : currentSlideIndex - 1;
document.getElementById("slide" + e).style.left = "-100%", document.getElementById("slide" + currentSlideIndex).style.left = 0, document.getElementById("slide" + e).setAttribute("class", "singleSlide slideInLeft"), document.getElementById("slide" + currentSlideIndex).setAttribute("class", "singleSlide slideOutRight"), currentSlideIndex = e
}

function nextSlide() {
var e = currentSlideIndex === slideArray.length - 1 ? 0 : currentSlideIndex + 1;
document.getElementById("slide" + e).style.left = "100%", document.getElementById("slide" + currentSlideIndex).style.left = 0, document.getElementById("slide" + e).setAttribute("class", "singleSlide slideInRight"), document.getElementById("slide" + currentSlideIndex).setAttribute("class", "singleSlide slideOutLeft"), currentSlideIndex = e
}
buildSlider();</script>

Customization:

No need to customize it. Just copy-paste. Rest edit the code as per comments and need.

Troubleshooting the Errors:

Do it with concentration and patience. Check your all steps again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts or problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.