Disclaimer, I'm a total beginner.
I've been working on a website, and I wanted to create an image carousel - it's on a timer to flick through some images, but whenever I click the arrows to scroll through it speeds up? I've tried several things I've found on the web, but it's just not working - yes I am trying to clear my timers but I'm clearly doing something off because it's still not working.
Code:
HTML:
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img class="ratio" src="carosel/1.1.jpg" style="width:100%; display:block">
<div class="title">Cormack Designs</div>
<div class="caption">kintyre - // beach [Ruari Cormack]</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img class="ratio" src="carosel/2.1.jpg" style="width:100%;">
<div class="title">Cormack Designs</div>
<div class="caption">kintyre - // beach [Ruari Cormack]</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img class="ratio" src="carosel/3.1.jpg" style="width:100%;">
<div class="title">Cormack Designs</div>
<div class="caption">kintyre - // beach [Ruari Cormack]</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img class="ratio" src="carosel/4.1.jpg" style="width:100%;">
<div class="title">Cormack Designs</div>
<div class="caption">kintyre - // beach [Ruari Cormack]</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img class="ratio" src="carosel/5.1.jpg" style="width:100%;">
<div class="title">Cormack Designs</div>
<div class="caption">kintyre - // beach [Ruari Cormack]</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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
CSS:
* {box-sizing: border-box}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.ratio {aspect-ratio: 2/0.80;}
/* 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);
}
/* Caption text */
.caption {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.title {
color: #f2f2f2;
font-size: 40px;
padding: 20px 20px;
position: absolute;
bottom: 130px;
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: 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}
}
JavaScript:
var slideIndex = 0;
showSlides(); // call showslide method
function plusSlides(n) {
showSlides(slideIndex += n);
}
var sliderTimer;
function currentSlide(n) {
console.log(n);
if (sliderTimer) window.clearTimeout(sliderTimer);
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";
}
if(!n) {
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";
sliderTimer = setTimeout(showSlides, 7000);
}
For a more consistent animation, its recomended to use requestAnimationFrame instead of setTimeout or setInterval.
For further information, you can refer to:
Why is requestAnimationFrame better than setInterval or setTimeout
requestAnimationFrame loop not correct FPS
https://www.youtube.com/watch?v=cCOL7MC4Pl0
Related
The code runs quite well, the only issue i'm experiencing is that it doesn't start until its initiated with the control button. I need it to start sliding as soon as the page is loaded, I think it has to do with the display but i'm not quite sure. Kindly go through my code below and correct as appropriate i'll go to the stars and back to make sacrifices for the pandemic to be over if I get a solution
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 5000); // Change image every 5 seconds
}
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no-1].style.display = "block";
}
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if(newslideIndex < 4 && newslideIndex > 0){
currentSlide(newslideIndex);
}
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
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 {display: block;}
to {margin: 0;}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<div style="width:100%;background-color: yellow;height:50px;"> </div>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<div style="width:100%;background-color: black;height: 50px; "> </div>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<div style="width:100%;background-color: blue;height: 50px;"> </div>
<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'm implementing a simple image slider in my Middleman project. The images show up and the bullets are clickable. The images are linked with image_tags in Middleman. However, after an image appears it disappears after a few seconds! The only thing I could find which could have an effect on this would be the fade-in option.
After extensively looking with the inspector I couldn't find anything which causes the image not to show up.
Below my current code.
HTML
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<%= image_tag "img3.jpeg", :class => "slider-img"%>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<%= image_tag "img3.jpeg", :class => "slider-img"%>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<%= image_tag "img3.jpeg", :class => "slider-img"%>
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<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>
CSS
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
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: 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}
}
.slider-img {
width: 100%;
}
JS
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
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";
}
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";
}
I try your code in fiddle and it's work fine :
Here is my fiddle http://jsfiddle.net/numa1x39/8/
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
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";
}
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";
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
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: 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}
}
.slider-img {
width: 100%;
}
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://static2.farakav.com/files/pictures/thumb/01125088.jpg" class="slider-img">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://static2.farakav.com/files/pictures/thumb/01324464.jpg" class="slider-img">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://static2.farakav.com/files/pictures/thumb/01324567.jpg" class="slider-img">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<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>
</div>
I'm new to Javascript and found this code on w3schools.com for adding a slider.
It works great but I need to add the current file name in between the next and previous buttons and I don't know how.
Here is the code I used:
The HTML
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.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>
The CSS
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 0%;
width: 45%;
margin-top: -22px;
padding: 16px;
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;
}
.prev {
text-align: right;
}
/* 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}
}
The Javascript
var slideIndex = 1;
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";
}
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";
}
So I changed the prev and next arrows to the top as that's where I need them to be. I'm adding 3 menus as the images and I need it to say page 1 of 3, page 2 of 3, and page 3 of 3 depending on which menu they are on. So I guess I will need to change the image file name to "page 1 of 3", "page 2 of 3", and "page 3 of 3" to make it work like I need it to. So how can I show the current file name in between my prev and next arrows?
I hope this all make's sense! Any help would be appreciated!!
Thanks!
You can try getting the source of your image tag from within JavaScript and use that to update the caption text
var ctext = slides[slideIndex - 1].childNodes[1].getAttribute("src")
slides[slideIndex - 1].childNodes[2].innerHTML = ctext
I have an image slider to change between images, With two buttons, the first adds an item to the slider, the second removes the current image from the slider but does not work.
How can I make the remove item button remove the current item from the slider?
var slideIndex = 1;
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";
}
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";
}
$('#NewsItem').click(function () {
var maindiv = $("<div class='mySlides fade'>")
.append($("<div class='numbertext'>4 / 4</div>"))
.append($("<img src='4.jpg' style='width:100%;height:650px' />"))
.append($("<div class='text'>Caption Four</div>"));
$('.slideshow-container').append(maindiv);
$('.footer').append($("<span class='dot' onclick='currentSlide(4)'></span>"));
});
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
/* 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}
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<button id="NewsItem">Add Item</button>
<button id="RemoveItem">remove Item</button>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="1.jpg" style="width:100%" />
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="2.jpg" style="width:100%" />
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="3.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" class="footer">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
I have edited your code to remove active slide. But this may cause errors when your list get exhausted as method you have used for sliding is not proper. You need to track current slide by setting index as data-attr and retrive index on button click.ie index of slide should created for dynamic slides also which may be auto incremented.
var slideIndex = 1;
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";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
slides[slideIndex - 1].className += " active";
slides[slideIndex - 1].id=slideIndex;
dots[slideIndex - 1].className += " active";
}
$('#RemoveItem').click(function () {
$(".active").remove();
});
$('#NewsItem').click(function () {
var maindiv = $("<div class='mySlides fade'>")
.append($("<div class='numbertext'>4 / 4</div>"))
.append($("<img src='4.jpg' style='width:100%;height:650px' />"))
.append($("<div class='text'>Caption Four</div>"));
$('.slideshow-container').append(maindiv);
$('.footer').append($("<span class='dot' onclick='currentSlide(4)'></span>"));
});
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
/* 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);
}
.slideshow-container{
margin-top:20px;
}
/* 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}
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<button id="NewsItem">Add Item</button>
<button id="RemoveItem">remove Item</button>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="1.jpg" style="width:100%" />
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="2.jpg" style="width:100%" />
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="3.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" class="footer">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
I created a new webpage that has a slide show container with 6 sides. Right now I can manually click the next/previous buttons and view next/previous slides, but I need to know how I can play them automatically with a new slide shnowing every 3 seconds.
Here is my script:
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";
}
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";
}
</script>
.slideshow-container {
position: relative;
max-width: 90%;
margin: auto;
animation: 30s slidy infinite;
}
/* 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: 25px;
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: white;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
.textwbg {
color: Black;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 25px;
padding: 8px 12px;
position: absolute;
top: 2;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #66b8ff;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #555;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 3s;
}
.nextbutton {
position: relative;
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="gal/a1.jpg" style="width:100%">
<div class="text">Our Mission</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="gal/a2.jpg" style="width:100%">
<div class="textwbg">Our Doctor Pannel</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="gal/a3.jpg" style="width:100%">
<div class="textwbg">Make an Appointment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="gal/a4.jpg" style="width:100%">
<div class="text">Friendly Environment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="gal/a5.jpg" style="width:100%">
<div class="textwbg">24/7</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="gal/a6.jpg" style="width:100%">
<div class="textwbg">Facilities</div>
</div>
<a class="prev" onclick="plusSlides(-1)">O</a>
<a class="next" onclick="plusSlides(1)">O</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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
you can use setInterval function to achieve this
Here is the updated code which is working fine. I used setInterval to make it work and the slideIndex will reset to one once it reaches the end.
var slideIndex = 1;
window.onload = function() {
showSlides(slideIndex);
setInterval(function() {
showSlides(slideIndex);
slideIndex++;
}, 3000);
}
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";
}
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";
}
.slideshow-container {
position: relative;
max-width: 90%;
margin: auto;
animation: 30s slidy infinite;
}
/* 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: 25px;
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: white;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
.textwbg {
color: Black;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 25px;
padding: 8px 12px;
position: absolute;
top: 2;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #66b8ff;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #555;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 3s;
}
.nextbutton {
position: relative;
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="gal/a1.jpg" style="width:100%">
<div class="text">Our Mission</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="gal/a2.jpg" style="width:100%">
<div class="textwbg">Our Doctor Pannel</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="gal/a3.jpg" style="width:100%">
<div class="textwbg">Make an Appointment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="gal/a4.jpg" style="width:100%">
<div class="text">Friendly Environment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="gal/a5.jpg" style="width:100%">
<div class="textwbg">24/7</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="gal/a6.jpg" style="width:100%">
<div class="textwbg">Facilities</div>
</div>
<a class="prev" onclick="plusSlides(-1)">O</a>
<a class="next" onclick="plusSlides(1)">O</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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
</div>
The code that does the automatic execution is setInterval. If you need to clarify the difference between setInterval and setTimeout check this answer
var slideIndex = 0;
showSlides();
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
setInterval(showSlides, 3000); // Here is the magic!, change the slide every 3 seconds
}
.slideshow-container {
position: relative;
max-width: 90%;
margin: auto;
animation: 30s slidy infinite;
}
/* 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: 25px;
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: white;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
.textwbg {
color: Black;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 25px;
padding: 8px 12px;
position: absolute;
top: 2;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #66b8ff;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #555;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 3s;
}
.nextbutton {
position: relative;
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="gal/a1.jpg" style="width:100%">
<div class="text">Our Mission</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="gal/a2.jpg" style="width:100%">
<div class="textwbg">Our Doctor Pannel</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="gal/a3.jpg" style="width:100%">
<div class="textwbg">Make an Appointment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="gal/a4.jpg" style="width:100%">
<div class="text">Friendly Environment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="gal/a5.jpg" style="width:100%">
<div class="textwbg">24/7</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="gal/a6.jpg" style="width:100%">
<div class="textwbg">Facilities</div>
</div>
<a class="prev" onclick="plusSlides(-1)">O</a>
<a class="next" onclick="plusSlides(1)">O</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>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
</div>