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
Similar Code Snippets:
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.
Beautiful slide!
BTW, How to autoplay the slides?
Thank you.