alert("Waoh! Pffff! This wasn't easy! :)\n\nHello, there. Thanks for checking out my code. :) You may copy and save this code and could as well use it as a 'plug-in' for creating image sliders for websites you'll be creating, if you are a web developer. And I added comment on almost every line to make it easier to read and comprehend. So...yeah...that's it. Thanks again for viewing. Don't forget to upvote. ;)"); $(document).ready(function() { var countImages = $(".image").length, currentPosition = 0, interval = '', windowWidth = $(window).width(), CLASS = document.getElementsByClassName.bind(document); animate = { nextSlideAnimSpeed : 1000, //Set to increase or decrease slide image switch speed previousSlideAnimSpeed : 600, //Set to increase or decrease speed of slide image switch on click of 'previous' button nextSlideInterval : 6000, //Set to increase or decrease slide interval time nextTextDelaySpeed : 300, //Set to increase or decrease delay time before output (fadeIn) of next image text description prevTextDelaySpeed : 100, //Set to increase or decrease delay time before output (fadeIn) of previous image text description on click of 'previous' button nextTextFadeInSpeed : 800, //Set to increase or decrease next image text description 'fadeIn' speed prevTextFadeInSpeed : 600 //Set to increase or decrease previous image text description 'fadeIn' speed on click of button }; imageTexts = [ '

HOUSE - FIRST STORY TITLE

\ This is the description for the first story. \ There is a HOUSE in this image. \ Some texts will go here and some other texts. \ Lorem ipsum dolor foo bar baz... bla bla bla.\

', '

MOUNTAINS - SECOND STORY TITLE

\ This is the description for the second story. \ MOUNTAINS are in this image. \ Lorem ipsum dolor foo bar baz... bla bla bla.\ Some texts will go here and some other texts. \

', '

PLATEAUX - THIRD STORY TITLE

\ Lorem ipsum dolor foo bar baz... bla bla bla.\ This is the description for the third story. \ There are PLATEAUX everywhere in this image. \ Some texts will go here and some other texts. \

', '

BARLEY FIELD - FOURTH STORY TITLE

\ Some texts will go here and some other texts. \ This is the description for the fourth story. \ Look at the BARLEY FIELD. \ Lorem ipsum dolor foo bar baz... bla bla bla.\

' ] //Sets width of wrapper to the total sum of the width of all images on load of page so as to prevent images from overflowing vertically in the wrapper and keep them horizontally aligned whilst hidden $('#images-wrapper').css('width', windowWidth * countImages); //Sets the width of image to the width of window on load of page $(".image").css('width', windowWidth + "px"); //Displays first image text description on load of page $("#image-text-wrapper").css('display', 'none').html(imageTexts[currentPosition]).fadeIn(animate.nextTextFadeInSpeed); //Sets first carousel button to the active class; sets it background color to white on page load $(".carousel-buttons:nth-child(1)").addClass('active'); //Window width function: Resets value of window width on resize of window, hence, resets width and position of active image window.onresize = function() { //Reassigns value of window width windowWidth = $(window).width(); //Resizes image accordingly $(".image").css('width', windowWidth + "px"); //Resets position of active image $("#images-wrapper").css('margin-left', (windowWidth * (-currentPosition)) + "px"); }; //Slider function nextSlideImage = function() { if (currentPosition == countImages - 1) { currentPosition = 0; //Sets and changes background color of active carousel button $(".carousel-buttons:nth-child(" + (currentPosition + 1) + ")").removeClass('previous').addClass('active'); $(".carousel-buttons:nth-child(" + (currentPosition + 1) + ")").siblings().removeClass('active').addClass('previous'); } else { currentPosition++; //Sets and changes background color of active carousel button $(".carousel-buttons:nth-child(" + (currentPosition + 1) + ")").removeClass('previous').addClass('active'); $(".carousel-buttons:nth-child(" + (currentPosition + 1) + ")").siblings().removeClass('active').addClass('previous'); } //Increasing margin animation: Sets position of active image $('#images-wrapper').animate({'margin-left': (windowWidth * (-currentPosition))}, animate.nextSlideAnimSpeed); //Resets width of image-wrapper on resize of window to again prevent images from overflowing vertically and keep them horizontally aligned $('#images-wrapper').css('width', windowWidth * countImages); //Displays image text description according to 'imageTexts' array index $("#image-text-wrapper").css('display', 'none').html(imageTexts[currentPosition]).delay(animate.nextTextDelaySpeed).fadeIn(animate.nextTextFadeInSpeed); //Counter $("#counter").html(currentPosition+1); }; //Function for correct behaviour of next and previous buttons and animation in general -> VERY IMPORTANT, I tell you. function setTimer() { interval = setInterval(nextSlideImage, animate.nextSlideInterval); }; //Calling the 'setTimer' function to automatically start animation on load of page and to allow the 'next' and 'previous' functions which require the value of 'interval' local to 'setTimer' access it globally. setTimeout(setTimer, 0); //Next slide image event handler $("#next").click(function() { //I believe this code block is clear enough :) clearInterval(interval); //Resets interval time, and stops next slide animation -> IMPORTANT. Tamper with it and see the effect. ;) nextSlideImage(); //Calls 'nextSlideImage' function which causes to slide to next image on click of button setTimeout(setTimer, 0); //Restarts next slide animation }); //Previous slide image function previousSlideImage = function() { if (currentPosition == 0) { currentPosition = countImages - 1; //Sets and changes background color of active carousel button $(".carousel-buttons:nth-child(" + (currentPosition + 1) + ")").removeClass('previous').addClass('active'); $(".carousel-buttons:nth-child(" + (currentPosition + 1) + ")").siblings().removeClass('active').addClass('previous'); } else if (currentPosition == countImages - 1) { currentPosition--; //Sets and changes background color of active carousel button $(".carousel-buttons:nth-child(" + (currentPosition + 1) + ")").removeClass('previous').addClass('active'); $(".carousel-buttons:nth-child(" + (currentPosition + 1) + ")").siblings().removeClass('active').addClass('previous'); } else if (currentPosition != 0 && currentPosition != (countImages - 1)) { currentPosition--; //Sets and changes background color of active carousel button $(".carousel-buttons:nth-child(" + (currentPosition + 1) + ")").removeClass('previous').addClass('active'); $(".carousel-buttons:nth-child(" + (currentPosition + 1) + ")").siblings().removeClass('active').addClass('previous'); } //Decreasing margin animation $('#images-wrapper').animate({'margin-left': (windowWidth * (-currentPosition))}, animate.previousSlideAnimSpeed); //Resets width of image-wrapper on resize of window to prevent images from overflowing vertically; keeps images horizontally aligned always however the size of screen $('#images-wrapper').css('width', windowWidth * countImages); //Displays image text description according to ''imageTexts' array index $("#image-text-wrapper").css('display', 'none').html(imageTexts[currentPosition]).delay(animate.prevTextDelaySpeed).fadeIn(animate.prevTextFadeInSpeed); //Counter $("#counter").html(currentPosition+1); }; //Previous slide image event handler $("#previous").click(function() { //Similar to 'next' illustration above clearInterval(interval); previousSlideImage(); setTimeout(setTimer, 0); }); //Image carousel button event handler: $(".carousel-buttons").click(function() { //Sets active carousel button $(this).removeClass('previous').addClass('active'); $(this).siblings().removeClass('active').addClass('previous'); clearInterval(interval); //Re-assigns the value of 'currentPosition' which is used here to set the position of the corresponding active image on click of carousel button for (i = 0; i < countImages; i++) { if (this == CLASS("carousel-buttons")[i]) currentPosition = i; } //Resets the position of images and displays active image $('#images-wrapper').animate({'margin-left': (windowWidth * (-currentPosition))}, animate.previousSlideAnimSpeed); //Displays image text description according to 'imageTexts' array index $("#image-text-wrapper").css('display', 'none').html(imageTexts[currentPosition]).delay(animate.prevTextDelaySpeed).fadeIn(animate.prevTextFadeInSpeed); setTimeout(setTimer, 0); //Counter $("#counter").html(currentPosition+1); }); }); /* THE END! ;) */

Image Slider V2