Responsive Image Slider with Text

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 arrows buttons to navigate 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 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.

How to Create Responsive Image Slider with Text

1. First of all, create a div element with a unique id “mySlider” in which the slider will be rendered dynamically. Similarly, create a div element with an id attribute “sliderNav” and place two divs tags inside it with “sliderPrev” and “sliderNext” id. So, the HTML structure for the image slider with text looks like below:

 <div id="mySlider"></div>
		<div id="sliderNav">
			<div id="sliderPrev" onclick="prevSlide();"><i class="fa fa-chevron-left"></i></div>
			<div id="sliderNext" onclick="nextSlide();"><i class="fa fa-chevron-right"></i></div>
		</div>

2. After that, style the image slider with the following CSS styles. The styles for the body element are optional, you can exclude them. Likewise, you can also set the custom values for CSS attributes in order to customize the image slider.

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;
}

3. Finally, add the following JavaScript code to functionalize the image slider. In the following code, you just need to create slides using slide object’s template. You can create as many slides as you want.

/*-----------------------------------------------------------------
-----------------------------------------------------------------
----------------------- GLOBAL VARIABLES ------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------*/


// Used to add a numeric id on slide creation to let us target the element later  
var slideIndex = 0;
// Tells us which slide we are on
var currentSlideIndex = 0;
// An Array to hold all the slides
var slideArray = [];


/*-----------------------------------------------------------------
-----------------------------------------------------------------
----------------------- THE TEMPLATE ---------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------*/



// Template for creating a custom Slide object
function Slide(title, subtitle, background, link ) {
	this.title = title;
	this.subtitle = subtitle;
	this.background = background;
	this.link = link;
	// we need an id to target later using getElementById
	this.id = "slide" + slideIndex;
	// Add one to the index for the next slide number
	slideIndex++;
	// Add this Slide to our array
	slideArray.push(this);
}



/*-----------------------------------------------------------------
-----------------------------------------------------------------
----------------------- SLIDE CREATION ---------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------*/


// Creating our slide objects, you can make as many as you want

var walkingDead = new Slide(
	"The Walking Dead", 
	"A show about fighting zombies", 
	"https://source.unsplash.com/450x450/?girl", 
	"#"
);

var bigBang = new Slide(
	"The Big Bang Theory", 
	"A show about Sheldon", 
	"https://source.unsplash.com/450x450/?cat", 
	"#"
);

var LastMan = new Slide(
	"The Last Man on Earth", 
	"A show about loneliness", 
	"https://source.unsplash.com/450x450/?tech", 
	"#"
);



/*-----------------------------------------------------------------
-----------------------------------------------------------------
----------------------- ADD TO WEB PAGE ---------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------*/



function buildSlider(){
	// A variable to hold all our HTML
	var myHTML;
	
	// Go through the Array and add the code to our HTML
	for(var i = 0; i < slideArray.length; i++) {
		
		myHTML += "<div id='" + slideArray[i].id + 
		"' class='singleSlide' style='background-image:url(" + slideArray[i].background + ");'>" + 
		"<div class='slideOverlay'>" + 
		"<h1>" + slideArray[i].title + "</h1>" +
		"<h4>" + slideArray[i].subtitle + "</h4>" +
		"<a href='" + slideArray[i].link + "' target='_blank'>Open Link</a>" +
		"</div>" +
		"</div>";	
		
	}
	
	// Print our HTML to the web page
	document.getElementById("mySlider").innerHTML = myHTML;
		
	// Display the first slide
	document.getElementById("slide" + currentSlideIndex).style.left = 0;

}

// Create our slider
buildSlider();





/*-----------------------------------------------------------------
-----------------------------------------------------------------
----------------------- SLIDER CONTROLS ---------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------*/



// Navigates to the previous slide in the list
function prevSlide(){
	// Figure out what the previous slide is
	var nextSlideIndex;
	// If we are at zero go to the last slide in the list
	if (currentSlideIndex === 0 ) {
		nextSlideIndex = slideArray.length - 1;
	} else {
		// Otherwise the next one is this slide minus 1
		nextSlideIndex = currentSlideIndex - 1;
	}	
	
	// Setup the next slide and current slide for animations
	document.getElementById("slide" + nextSlideIndex).style.left = "-100%";
	document.getElementById("slide" + currentSlideIndex).style.left = 0;
	
	// Add the appropriate animation class to the slide
	document.getElementById("slide" + nextSlideIndex).setAttribute("class", "singleSlide slideInLeft");
	document.getElementById("slide" + currentSlideIndex).setAttribute("class", "singleSlide slideOutRight");
	
	// Set current slide to the new current slide
	currentSlideIndex = nextSlideIndex;
}


// Navigates to the next slide in the list
function nextSlide(){
	// Figure out what the next slide is
	var nextSlideIndex;
	// If we are at the last slide the next one is the first (zero based)
	if (currentSlideIndex === (slideArray.length - 1) ) {
		nextSlideIndex = 0;
	} else {
		// Otherwise the next slide is the current one plus 1
		nextSlideIndex = currentSlideIndex + 1;
	}	
	
	// Setup the next slide and current slide for animations
	document.getElementById("slide" + nextSlideIndex).style.left = "100%";
	document.getElementById("slide" + currentSlideIndex).style.left = 0;
	
	// Add the appropriate animation class to the slide
	document.getElementById("slide" + nextSlideIndex).setAttribute("class", "singleSlide slideInRight");
	document.getElementById("slide" + currentSlideIndex).setAttribute("class", "singleSlide slideOutLeft");
	
	// Set current slide to the new current slide
	currentSlideIndex = nextSlideIndex;
}

That’s all! hopefully, you have successfully integrated this responsive image slider with text code snippet into your project. If you have any questions or facing any issues, feel free to comment below.

Connect with us on social media:

• https://scholar.google.com/citations?hl=vi&user=jzuRNWsAAAAJ
• https://soundcloud.com/codehimcom
• https://www.quora.com/profile/Codehim-1
• https://www.producthunt.com/@codehimcom

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.