Responsive Image Slider with Text

Responsive Image Slider with Text
Code Snippet: Pure JavaScript Image Slider
Author: Lawrence Weiss
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 48,934
License: MIT
Edit Code online: View on CodePen
Read More

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:

1 thought on “Responsive Image Slider with Text”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X