Develop Reference

JS variable have not the value that it should have (with JS, SCSS and Nuxt.js)

I have a photo gallery in JavaScript, using Nuxt.js. The problem is that the variable slideIndex should be equal to a number (defined with the .onclick events), and when we look at this variable in the JS console, we see it as undefined. The consequences are that slideIndex is not a number (NaN), so it not corresponds to an image, and so slides[slideIndex-1].style.display returns a TypeError because it's not possible to know the display of nothing.
Here is the js, scss and vue code :
window.addEventListener('load', function () {
let slideIndex;
// Open PopUp
document.querySelector(".lienImg1").onclick = function() {
document.querySelector(".photo-gallery-fullscreen").style.display = "block";
document.querySelector(".slide-container img:nth-child(1)").style.display = "block";
slideIndex = 1; // slideIndex should be equal to 1, but is not (undefined)
};
document.querySelector(".lienImg2").onclick = function() {
document.querySelector(".photo-gallery-fullscreen").style.display = "block";
document.querySelector(".slide-container img:nth-child(2)").style.display = "block";
slideIndex = 2; // slideIndex should be equal to 2, but is not (undefined)
};
document.querySelector(".lienImg3").onclick = function() {
document.querySelector(".photo-gallery-fullscreen").style.display = "block";
document.querySelector(".slide-container img:nth-child(3)").style.display = "block";
slideIndex = 3; // slideIndex should be equal to 3, but is not (undefined)
};
// Close PopUp
document.querySelector(".out").onclick = function() {
document.querySelector(".photo-gallery-fullscreen").style.display = "none";
document.querySelector(".slide-container img:nth-child(1)").style.display = "none";
document.querySelector(".slide-container img:nth-child(2)").style.display = "none";
document.querySelector(".slide-container img:nth-child(3)").style.display = "none";
slideIndex = 1;
};
});
// Gallery Full Screen
let slideIndex;
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Problem : slideIndex is not defined (undefined) --> it's not a number (NaN) --> it not corresponds to an image --> "slides[slideIndex-1].style.display" returns (TypeError)
function showSlides(n) {
let i;
let slides = document.querySelectorAll(".photo-fullscreen");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
// Photo Gallery
.photo-gallery-section {
margin: 50px 0;
.photo-gallery {
width: 80%;
height: 250px;
margin: auto;
display: grid;
grid-template-rows: 250px;
grid-template-columns: repeat(3, 250px);
justify-content: space-between;
gap: 10px;
.photo:hover {
cursor: pointer;
}
.photo:nth-child(1) {
background: url(https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1820&q=80) center center / cover;
}
.photo:nth-child(2) {
background: url(https://images.unsplash.com/photo-1575052814086-f385e2e2ad1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80) center center / cover;
}
.photo:nth-child(3) {
background: url(https://images.unsplash.com/photo-1524863479829-916d8e77f114?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80) center center / cover;
}
}
.photo-gallery-fullscreen {
display: none;
height: 100vh;
width: 100vw;
background: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
left: 0;
z-index: 1;
.slide-container {
width: fit-content;
margin: calc(50vh - 225px) auto;
}
.slide-container img {
height: 450px;
z-index: 3;
display: none;
}
.prev,
.next {
cursor: pointer;
color: #333;
font-weight: bold;
font-size: 40px;
z-index: 3;
position: absolute;
}
.prev {
margin: calc(50vh - 21px) 0;
margin-left: 15vw;
left: 0;
}
.next {
margin: calc(50vh - 21px) 0;
margin-right: 15vw;
right: 0;
}
.out {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
}
}
}
<section class="photo-gallery-section" id="photo-gallery-section">
<h2 class="photo-gallery-title">Gallerie Photo</h2>
<div class="photo-gallery">
<div class="photo lienImg1"></div>
<div class="photo lienImg2"></div>
<div class="photo lienImg3"></div>
</div>
<div class="photo-gallery-fullscreen">
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
<div class="slide-container">
<img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1820&q=80" />
<img
src="https://images.unsplash.com/photo-1575052814086-f385e2e2ad1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
class="photo-fullscreen"
/>
<img src="https://images.unsplash.com/photo-1524863479829-916d8e77f114?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80" />
</div>
<div class="out"></div>
</div>
</section>
Thank you very much for your help,
Maxime

let slideIndex in the load event function is local to that (anonymous) function., and shadows the global definition underneath the comment // Gallery Full Screen.
The simplest solution may be to remove the declaration of slideIndex from the load event handler so that the global variable is used by all code.

Set Length of Time for Slides to Move

I am using this JS code I found to make a slideshow work:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("hp-slides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
.slides-container {
display: block;
position: relative;
width: 100%;
}
.slides-container img {
width: 100%;
height: auto;
display: block;
}
.button {
position: absolute;
top: 50%;
transform: translate(0%,-50%);
user-select: none;
border: none;
background-color: rgb(0,0,0,0);
cursor: pointer;
border: none;
}
.buttonL {
left: 0;
height: 100%;
padding: 0 10% 10px 2.8%;
}
.buttonR {
right: 0;
height: 100%;
padding: 0 2.8% 10px 10%;
}
.arrowL,
.arrowR {
width: 25px;
height: 25px;
color: #fff;
border-bottom: 6px solid;
border-left: 6px solid;
margin-bottom: 20px;
}
.arrowL {transform: rotate(45deg);margin-left: 5px;}
.arrowR {transform: rotate(-135deg); margin-right: 5px;}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="slides-container">
<img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/ThreeTimeAKCGoldWinnerPembrookeWelshCorgi.jpg/1200px-ThreeTimeAKCGoldWinnerPembrookeWelshCorgi.jpg" alt="">
<img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Akita_Inu_dog.jpg/1200px-Akita_Inu_dog.jpg" alt="">
<img class="hp-slides" src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Golde33443.jpg" alt="">
<button class="button buttonL" onclick="plusDivs(-1)"><div class="arrowL"></div></button>
<button class="button buttonR" onclick="plusDivs(1)"><div class="arrowR"></div></button>
</div>
</body>
But the images move right as I click = too fast/ not elegant.
I saw this other code in other JS slider examples, which made the slides move slower (Those other codes didn't work for me for other reasons (couldn't be resized, needed complicated/hidden jQuery, etc.))
setInterval(function() {
showDivs()
}, 5000);
But I don't know where to place it. I changed the name to be one of the function names (showDivs) and tried sticking it in between functions, but it didn't work.
I'm already on 3-4 days looking for a simple slider with arrows that will scale with the page and losing my mind.
Thank you!

Check out this codepen
in js:
// automatic slider
var autoSlider = setInterval(slideRight, 3000);
// change that line (34) to control the time each slide is shown.
in css:
transition: all 3s cubic-bezier(1,.01,.32,1);
/* change that line (162) to control the transition length. */
in html:
replace the divs inside the li elements with your img tags.
(lines 14->17, 22->25, etc...)

How to fix time interval on automatic slideshow when manual controls are used

I need help with this slideshow. I want it to be automatic and to be able to be controlled manually aswell. so far its working fine in the automatic part. However when I click the manual controls it takes me to a wrong slide and the time interval for the next 1 or 2 slides is messed up. If anyone has a solution to this then please help.
I have tried to change slideIndex to 0 but that takes me to the 1st slide istead of the next slide.
var slideIndex = 0;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 10000); // Change image every 10 seconds
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through
*/
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
<h2>Automatic Slideshow</h2>
<p>Change image every 10 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
I expect the interval to be 10 seconds but it turns out to be a couple seconds instead. Also i expect the next / previous slide when buttons are clicked and they aren't working properly

I believe the problem is the fact that you are setting a timeout for your slideshow automatically and when you press the next or previous buttons your old timeouts do not cancel so now you have switched slides, the old timeout will still trigger and then you've also set a new one so it will trigger as well all way within the range of time that you would like.
Instead of creating a timeout for each button click i would suggest using intervals and keeping track of it outside any functions.
When the user presses a forward or back button cancel that interval and create a new one so that you don't run into the issue you are having now where you basically have like 10 loops spamming your carousel at the same time.
JAVASCRIPT
let slideIndex = 0;
const slideTime = 5000;
let slideInterval = setInterval(() => changeSlide(true), slideTime);
function jumpSlide(forward) {
clearInterval(slideInterval);
changeSlide(forward)
slideInterval = setInterval(() => changeSlide(true), slideTime);
}
function changeSlide(forward) {
const slides = document.getElementsByClassName('slide');
slides[slideIndex].classList.remove('active');
if (forward) {
if (slideIndex + 1 > slides.length - 1) {
slides[0].classList.add('active');
slideIndex = 0;
} else {
slides[slideIndex + 1].classList.add('active');
slideIndex ++;
}
} else {
if (slideIndex - 1 < 0) {
slides[slides.length - 1].classList.add('active');
slideIndex = slides.length - 1;
} else {
slides[slideIndex - 1].classList.add('active');
slideIndex --;
}
}
}
HTML
<div class='slide-container'>
<div class='slide active'></div>
<div class='slide'></div>
<div class='slide'></div>
</div>
<button onclick='jumpSlide(false)'>last slide</button>
<button onclick='jumpSlide(true)'>next slide</button>
CSS
.slide-container{
display: flex;
}
.slide {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.25)
}
.active {
background-color: red;
}

Start and stop button

The start and stop buttons in my code don't work.
How can I correct the code to make these buttons functional?
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function nextSlide() {
if (current < (slides.length - 1))
current++;
else
current = 0;
document.getElementById("image").src = "images/" + slides[current] + ".jpg";
imageCnt.innerHTML = "<em>Image " + [current + 1] + " of " + slides.length + "</em>";
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
function startShow() {
if (document.getElementById("startSlideshow").value === "Start Slideshow") {
document.getElementById("startSlideshow").value = "Pause Slideshow";
interval = setInterval(nextImage, 2000);
} else if (document.getElementById("startSlideshow").value === "Pause Slideshow") {
document.getElementById("startSlideshow").value = "Start Slideshow";
clearInterval(interval);
}
}
function pauseShow() {
clearInterval(interval);
}
function enlargeImage() {
if (document.getElementById("enlarge").value === "Enlarge image") {
document.getElementById("enlarge").value = "Normal size";
var img = document.getElementById("slide");
var divImg = document.getElementById("slideshowImage");
divImg.style.width = "800px";
img.style.width = "800px";
} else if (document.getElementById("enlarge").value === "Normal size") {
document.getElementById("enlarge").value = "Enlarge image";
var img = document.getElementById("slide");
var divImg = document.getElementById("slideshowImage");
divImg.style.width = "600px";
img.style.width = "600px";
}
}
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
element.style {
position: absolute;
left: 0px;
top: 25px;
overflow: hidden;
-webkit-user-select: none;
background-color: #FFF;
border: 1px solid #ABABAB;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="slideshow1.jpg" title="Ori and the blind forest" style="width:100%" />
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="slideshow2.jpg" title="Ori and the blind forest" style="width:100%" />
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="slideshow3.jpg" title="Ori and the blind forest" style="width:100%" />
</div>
<a class="prev" onclick="plusSlides(-1)">
</a>
<a class="next" onclick="plusSlides(1)">></a>
</div>
<br/>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)" />
<span class="dot" onclick="currentSlide(2)" />
<span class="dot" onclick="currentSlide(3)" />
</div>
<center>
<a class="pause" onclick="startShow(0)">start</a>
<a class="play" onclick="pauseShow(0)">pause</a>
<center/>
<input type="button" value="Fullscreen" onclick="toggleFullScreen()" />
</center>
</body>
</html>

#Helene The function which is triggered after you click start is startShow(), but the DOM element you are trying to fetch with ID startSlideshow seems to be missing in HTML. Hence the error in console, give the appropriate Id and try it again
function startShow() {
if (document.getElementById("startSlideshow").value === "Start Slideshow") {
document.getElementById("startSlideshow").value = "Pause Slideshow";
interval = setInterval(nextImage, 2000);
}
else if (document.getElementById("startSlideshow").value === "Pause Slideshow") {
document.getElementById("startSlideshow").value = "Start Slideshow";
clearInterval(interval);
}
}
function pauseShow() {
clearInterval(interval);
}

Implement nav dots to my slider?

I've been messing around with my slider and I got it to slide by itself. The problem is, there is no way you can manually view the slides. I would like to add navigation dots on the bottom so you can skim through the slides without having to view them as the slider goes along. If you could help me with this it would be greatly appreciated.
My slider html:
<div id="slider-container">
<div style="position: relative">
<div class="slide"><img id="slide_1" src="images/slide_1.jpg"/></div>
<div class="slide"><img id="slide_2" src="images/slide_2.jpg"/></div>
<div class="slide"><img id="slide_3" src="images/slide_3.jpg"/></div>
<div class="slide"><img id="slide_4" src="images/slide_4.jpg"/></div>
<div class="slide"><img id="slide_5" src="images/slide_5.jpg"/></div>
<div class="slide"><img id="slide_6" src="images/slide_6.jpg"/></div>
</div>
</div>
My slider css:
.slide-container {
display:block;
}
.slide {
top:0;
width:760px;
height:420px;
display:block;
position:absolute;
transform:scale(0);
transition:all .7s;
}
.slide img {
width:100%;
height:100%;
border-radius:6px;
border:1px solid #95ca1a;
}
My slider javascript:
$(document).ready(function() {
(function (){
var count = $(".slide > img").length;
var current = 1;
var sliderNext = 2;
$("img[id^='slide_']").fadeOut(0);
$("#slide_" + current).fadeIn(300);
var loop = setInterval(function() {
$("#slide_" + current).fadeOut(300);
$("#slide_" + sliderNext).fadeIn(300);
(sliderNext >= count) ? sliderNext = 1 : sliderNext++;
(current >= count) ? current = 1 : current++;
}, 3000)
})()
});
Here's an example of what I mean by nav dots:
CSS Slider - Codepen

First create list of dots, you can do it manually by creating list of "li" tags or can create it via jQuery.
here is code
<ol>
<li></li>
<li></li>
<li></li>
</ol>
number of "li" element should match with number of images
then have following css
#slider-container {
position:relative;
overflow:hidden;
width:100%;
height:380px;
display:inline-block;
}
.slide {
top:0;
width:100%;
display:inline-block;
}
.slide img {
width:100%;
height:100%;
border-radius:6px;
border:1px solid #95ca1a;
}
/******* css of dots ****/
ol{
list-style= none;
width:100%;
}
ol li{
background: #888;
border-radius: 50%;
display: inline-block;
width:20px;
height:20px;
cursor: pointer;
}
then add following jQuery stuff
$('ol li').bind('click', function(){
var index = $(this).index() + 1;
$(".active").fadeOut(300);
$("#slide_" + index).fadeIn(300);
$(".slide").removeClass("active");
$("#slide_" + index).addClass("active");
});
this code will hide active image and shows selected image
here is Fiddle example
hope it will help you

Here is a carousel script I wrote for a project. This allows you to click forward and backward and also on the dots. It's also dynamic so if you have 1 image, there are no dots or scroll bars, if you have 2 images there are the bars to go right and left but no dots, once you have three or more images the dots will be applied.
JsFiddle
HTML
<div class="carousel-container">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="carousel-image-holder">
<img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg" />
<img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg" />
<img src="http://blog.metrotrends.org/wp-content/uploads/2013/09/childPoverty.jpg" />
<img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg" />
</div>
</div>
<div class="clear"></div>
<div class="carousel-buttons-container">
<ul></ul>
</div>
CSS
.clear{clear:both;}
.carousel-container{
width: 600px;
height: 360px;
float: left;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.right-arrow{
width: 60px;
height: 100%;
background-color: rgba(0,0,0,.5);
position: absolute;
right: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.left-arrow{
width: 60px;
height: 100%;
background-color: rgba(0,0,0,.5);
position: absolute;
left: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.carousel-image-holder{
height:360px;
width: 2400px;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
}
.carousel-image-holder img{
width: 600px;
float: left;
margin: 0;
padding: 0;
display: inline-block;
}
.carousel-buttons-container{
width: 600px;
text-align: center;
margin: 15px 0 0 0;
padding: 0;
}
.carousel-buttons-container ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.carousel-buttons{
background-color: #dddddd;
height: 18px;
width: 18px;
border-radius: 50%;
display: inline-block;
margin: 0 10px 0 0;
padding: 0;
cursor: pointer;
}
.carousel-buttons:last-of-type{
margin: 0;
}
.active{
background-color: #e67e22;
}
JQUERY
$(".left-arrow").hide();
var numImgs = $('div.carousel-image-holder img').length;
var addId = numImgs;
if(numImgs == 2){
var clicked = 0;
imgCount = numImgs-2;
}else if(numImgs <= 1){
$(".right-arrow").hide();
}else{
var clicked = 1;
imgCount = numImgs-1;
}
if(numImgs > 2){
for (var i=0; i<numImgs; i++){
$("ul").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>');
var addId = addId - 1;
}
}else{
}
$(".carousel-buttons").click(function(){
var findIdClicked = $(this).attr("id");
var splitString = findIdClicked.split("carousel")
var findTheNumb = splitString[1];
$(".carousel-buttons").removeClass("active");
$(this).addClass("active");
clicked = parseInt(findTheNumb);
var adjustNumberforSlide = findTheNumb-1;
$(".carousel-image-holder").animate({"left": -(600*adjustNumberforSlide)+"px"});
console.log(clicked);
if(findTheNumb == 1){
$(".left-arrow").hide();
$(".right-arrow").show();
}else if (findTheNumb == numImgs){
$(".right-arrow").hide();
$(".left-arrow").show();
}else{
$(".right-arrow").show();
$(".left-arrow").show();
}
});
$(".carousel-buttons-container").find("li").first().addClass("active");
$(".right-arrow").click(function(){
if (clicked < imgCount){
$(".carousel-image-holder").animate({"left": "-=600px"});
console.log(clicked);
}else{
$(".carousel-image-holder").animate({"left": "-=600px"});
$(".right-arrow").hide();
console.log(clicked);
}
clicked = clicked+1;
$(".left-arrow").show();
$(".carousel-buttons").removeClass("active");
$("#carousel"+clicked).addClass("active");
});
$(".left-arrow").click(function(){
if (clicked > 2){
$(".carousel-image-holder").animate({"left": "+=600px"});
console.log(clicked);
}else{
$(".carousel-image-holder").animate({"left": "+=600px"});
$(".left-arrow").hide();
console.log(clicked);
}
$(".right-arrow").show();
clicked = clicked-1;
$(".carousel-buttons").removeClass("active");
$("#carousel"+clicked).addClass("active");
});
I'll clean up the spacing, just wanted to get this posted