How to fix pure JavaScript slider code so it moves the screen? - javascript

I want to move the slide when I press the button on the slide. But I can not.
Changing the button's css to active was successful, but when I pressed the button, it continued to fail to move the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0; padding: 0;}
li{list-style: none;}
.dots{width:20px; height: 20px; border-radius: 50%; background-color: #124412;}
.active{width:20px; height: 20px; border-radius: 50%;background-color: #fff;}
#slide{}
#slide ul
#slide ul li{}
.container{width: 900px; margin: 0 auto;}
</style>
</head>
<body>
<div id="slide_wrap">
<div class="container">
<div id="slide">
<ul>
<li><img src="slideimg/1.jpg" alt="1"></li>
<li><img src="slideimg/2.jpg" alt="2"></li>
<li><img src="slideimg/3.jpg" alt="3"></li>
<li><img src="slideimg/4.jpg" alt="4"></li>
<li><img src="slideimg/5.jpg" alt="5"></li>
</ul>
</div>
<div id="dot">
</div>
<div id="arrow">
<div id="left-arrow">left</div>
<div id="right-arrow">right</div>
</div>
</div>
</div>
<script>
var width = 640;
var height = 480;
var length = document.querySelectorAll('#slide li').length;
var slide = document.querySelector('#slide');
var slideUl = document.querySelector('#slide ul');
var slideLi = document.querySelectorAll('#slide li');
slide.style.width = width + "px";
slide.style.height = height + "px";
slide.style.overflow = "hidden";
slideUl.style.width = width*length +"px";
for(var i=0; i < slideLi.length; i++){
var item = slideLi.item(i);
item.style.width = width + "px";
item.style.height = height + "px";
item.style.cssFloat = "left";
}
var dot = document.getElementById('dot');
for(var i = 0; i < slideLi.length; i++){
var btn = document.createElement('button');
btn.classList.add('dots');
dot.appendChild(btn);
//btn.setAttribute('onclick','moveTo('+i+')');
}
var dots = document.querySelectorAll('.dots');
function moveTo(index){
index = index || 0;
index = index % length;
slideUl.style.marginLeft = "-"+width*index+"px";
for(var i = index ; i < dots.length ; i++){
for(var j = 0; j < dots.length ; j++){
if(dots[j].classList.contains('active')){
dots[j].classList.remove('active');
}
}
dots[index].classList.add('active');
}
}
for(var i = 0 ; i < dots.length ; i++){
dots[i].addEventListener('click', function(e){
for(var j = 0 ; j < dots.length ; j++){
if(dots[j].classList.contains('active')){
dots[j].classList.remove('active');
}
e.target.classList.add('active').moveTo(i);
}
})
}
var index = 0;
//left
function slideLeft(){
slideUl.style.marginLeft = "-"+width*(index-1)+"px";
index--;
}
//left click
var arrowLeft = document.getElementById('left-arrow');
arrowLeft.addEventListener('click', function(){
console.log(index)
if(index === 0){
index = slideLi.length;
}
slideLeft();
});
//right
function slideRight(){
slideUl.style.marginLeft = "-"+width*index+"px";
index++;
}
//right click
var arrowLeft = document.getElementById('right-arrow');
arrowLeft.addEventListener('click', function(){
console.log(index)
if(index === length){
index = 0;
}
slideRight();
});
var currentIndex = 0;
setInterval(function(){
currentIndex += 1;
moveTo(currentIndex)
},1000 * 1.5);
moveTo(0)
</script>
</body>
</html>


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";
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* 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;
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 */
.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}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://images.pexels.com/photos/33109/fall-autumn-red-season.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>
Get More : https://www.w3schools.com/howto/howto_js_slideshow.asp

Related

Slideshow / Carousel Javascript not working in an external file

I am new to programming in general, so I apologize if my question is not constructive and clear but I took my time and hope to visualize the issue. I tested out Javascript and want an imageslider with basic javascript.
However I cannot figure out why my code will not funcntion when the javascript is written in an external sheet.
The imageslider will not initially show up when the page load, but it is working when written inside HTML file.
Here is the code from w3schools example
here is the fiddle
The javascript:
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";
}
Everything seems to be working perfectly fine untill I put this into separate script file.
<script src="js/slider.js"></script>
Function is working here with javascript inside html
Function is NOT working here with javascript written in external file.
`
this is what debug info says
Uncaught TypeError: Cannot read property 'style' of undefined
at showSlides (slider.js:27)
at slider.js:3`
showSlides(slideIndex); This shows error
slides[slideIndex-1].style.display = "block"; This shows error

Please check where you have placed you <script> tag if it is placed in <head> ,then place it just above the </body> this will solve your problem.
Please reffer this code:
script.js
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";
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<style>
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* 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;
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 */
.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
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
</style>
</head>
<body>
<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>
<script src="script.js"></script>
</body>
</html>
for more clarification please download this code : Sample Slider.zip

How would I add timer to carousel sliders using Javascript

I have a carousel sliders with text. I have my own custom js to those sliders. The carousel arrows are working fine but I want the sliders to move by itself after an interval.
Here's the HTML
<div class="col-6 col-xs-12 " style="text-align:-webkit-center;">
<div class="slideshow-container">
<div class="mySlides w3-container w3-center w3-animate-right">
<h2 class="font-size" id="f37" data-animation="fadeInUp" data-delay="200ms">1</h2>
</div>
<div class="mySlides w3-container w3-center w3-animate-right">
<h2 class="font-size" id="f37" data-animation="fadeInUp" data-delay="200ms">2</h2>
</div>
<div class="mySlides w3-container w3-center w3-animate-right">
<h2 class="font-size" id="f37" data-animation="fadeInUp" data-delay="200ms">3</h2>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
Here's the JS
<script>
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";
}
</script>
Hope I'm clear with the question. Ill highly appreciate your answer.
Ive updated the code to codepen and you can observe the weird behavior it has once I click on the arrows although the auto slides are working fine when idle.
https://codepen.io/mahirq8/pen/JjjJzbe
Thank you

You would use setTimeout for that.
Add a variable timer at the top of your script:
var timer;
In your function showSlides, add the following two lines (anywhere, like at the end of it):
clearTimeout(timer);
timer = setTimeout(() => plusSlides(1), 2000);
If you now still use the arrow-buttons, the timer will reset and continue sliding the slides again 2 seconds after your last interference.
You can run it here:
var timer;
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";
}
slides[slideIndex - 1].style.display = "block";
clearTimeout(timer);
timer = setTimeout(() => plusSlides(1), 2000);
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* 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: red;
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 */
.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}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
<div class="slideshow-container">
<div class="mySlides fade">
<h1>111</h1>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<h1>222</h1>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<h1>333</h1>
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<h1>444</h1>
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<h1>555</h1>
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>

You can add this code to the <script> tag.
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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, 2000); // Change image every 2 seconds
}
The one line you are missing is the last one
setTimeout(showSlides, 2000);
If you would like to see the direct code, you can use this link:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

How dots indicate and manipulate slider with images

I'm trying to build active dots for my slider and I found some reference on w3schools but I don't understand the logic behind the function that controls the dots. Anyone can explain to me how they work into the code below?
To mention: I know how the slider works ,but i don't understand how dots works!
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;
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 */
.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}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<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>
<!-- 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>

When one of the dots are clicked the method currentSlide is called with a corresponding parameter. The method showSlides is then called (with the same parameter) which does the following:
saves the collection of elements with class name mySlides and dot into
two variables:
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
For more info:
getElementsByClassName() Documentation
if the passed parameter is bigger or smaller than the number of slides (if for example more dots exists than slides), then the index of the slide that will be displayed is set to value in order to still display a slide
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex =slides.length}
the value of property display is set to none for each slide
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
For more info:
Style display Property Documentation
CSS display Property Documentation
class active is removed from all dots
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
value of property display is set to block for the corresponding slide
slides[slideIndex-1].style.display = "block";
class active is added to the clicked dot
dots[slideIndex-1].className += " active";
I hope this is enough :)

How to create auto slide images by javascript?

I'm trying to make autoslide images. I've searched but haven't found a solution that can help me.
I have var slideImages to keep all the images and set setInterval but my images still don't move.
Maybe there is something that I'm missing. Some advice would be much appreciated, thank you.
Please take a look at my code (When i posted my code here i don't know why my images didn't show just only one image)
// slideshow
let slideImages = document.getElementsByClassName("slide");
let i = 0;
function showImages() {
for (i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
}
};
function slideshow() {
if (i < slideImages.length - 1) {
i++;
}
else {
i = 0;
}
}
setInterval(slideshow(), 2000);
/*slideshow*/
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
#slideshow {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 800px;
height: 400px;
margin: 0 auto;
max-width: 100%;
z-index: 1;
}
.slidecontent {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontent">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontent">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontent">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index2.js"></script>
</body>
</html>

Here's the Demo
let is EcmaScript6, i change using var.
Html
// Nothing change...
Js
// slideshow
var slideImages = document.getElementsByClassName("slide");
var counter = 0; //set index for timer
var duration = 2000; //set duration
//Hide each slide at first
function hideAllImages() {
for (var i = 0; i < slideImages.length; i = i + 1) {
/* console.log(slideImages[i]); */
slideImages[i].style.opacity = 0;
}
}
function slideshow() {
hideAllImages();
/* go to next slide */
counter = counter + 1;
/* reset to first slide when looping */
if (counter > slideImages.length - 1) {
counter = 0;
}
console.log(counter);
/* show the current slide */
slideImages[counter].style.opacity = 1;
}
setInterval(function() {
slideshow();
}, duration);
Css
/*slideshow*/
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
#slideshow {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 800px;
height: 400px;
margin: 0 auto;
max-width: 100%;
transition: opacity 300ms;
z-index: 1;
}
.slidecontent {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}

var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
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, 2000); // Change image every 2 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 {
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}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://preview.ibb.co/mV3TR7/1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://preview.ibb.co/bSCBeS/2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://preview.ibb.co/kgG9Yn/3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</body>
</html>
You can refer the following link for the solution.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

You can use javascript, but I would suggest using bootstrap to do this. I suffered while trying to make this work on my website and I would highly suggest using bootstrap because of its ease of use and if something goes wrong with it, it is a lot easier to fix. I recommend the w3schools article that was mentioned in the comments. https://www.w3schools.com/bootstrap/bootstrap_carousel.asp . If you do continue to want to use JS I wish you all the best :)

Slider & Light Box - Javascript conflict

Would you anyone please help resolve this conflict? I would really appreciate that.
I am trying to use two javascripts of Slider and Light Box from w3schools.com on one HTML page but, I guess, both javascripts use the same names(or values) for each function so when I use them in one page at the same time, they don't work. but when I remove one set of css/html/javascript for each slider or light box, either works well.
Please help this for me.
Thank you very much in advance.
CSS
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
/* --------- Slider ---------- */
* {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 {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* ----- Light Box -------*/
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: transparent;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
border: none;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-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);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.container {margin: 0 auto; max-width: 1000px;}
</style>
HTML
<body>
<div class="container">
<!-- ================ Slideshow ================ -->
<div class="slideshow-container mt20 mb10">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/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="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/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>
<div style="text-align:center;margin-top:10px;">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div> <!-- // Slider -->
<!-- Lightbox -->
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myLightBox" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="LB-Slides">
<div class="numbertext">1 / 4</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="LB-Slides">
<div class="numbertext">2 / 4</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
</div>
<div class="LB-Slides">
<div class="numbertext">3 / 4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="LB-Slides">
<div class="numbertext">4 / 4</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
</div><!-- // Lightbox -->
</div>
Javascript
<script>
/* --------- Slider ---------- */
var slideIndex = 1;
showSlides(slideIndex);
setInterval(function(){ showSlides(++slideIndex); }, 4000);
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";
}
/* --------- LightBox ---------- */
function openModal() {
document.getElementById('myLightBox').style.display = "block";
}
function closeModal() {
document.getElementById('myLightBox').style.display = "none";
}
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("LB-Slides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
/* --------- //LightBox ---------- */
</script>
</body>

First of all – yes, you are right, both of your scripts are conflicting to each other due the same methods names. Since it's written in global scope (window) you basically override each other functionality.
You could try to use JavaScript module pattern to isolate scope of each of your "widgets", even if you gonna use the same methods names, your code will be executed in it's own scope.
As quick example how to rewrite this into modules:
http://jsbin.com/pipajawiwa/1/edit?html,js,output
/* --------- Slider ---------- */
var slider = (function() {
var slider = {};
slider.setIntervals = function() {
setInterval(function() {
slider.showSlides(++slider.slideIndex);
}, 4000);
};
slider.plusSlides = function(n) {
slider.showSlides(slider.slideIndex += n);
};
slider.currentSlide = function(n) {
slider.showSlides(slider.slideIndex = n);
};
slider.showSlides = function(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slider.slideIndex = 1
}
if (n < 1) {
slider.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[slider.slideIndex - 1].style.display = "block";
dots[slider.slideIndex - 1].className += " active";
};
slider.init = function() {
slider.slideIndex = 1;
slider.showSlides(slider.slideIndex);
slider.setIntervals();
};
return slider;
})();
/* --------- LightBox ---------- */
var lightbox = (function() {
var lightbox = {};
lightbox.openModal = function() {
document.getElementById('myLightBox').style.display = "block";
};
lightbox.closeModal = function() {
document.getElementById('myLightBox').style.display = "none";
};
lightbox.plusSlides = function(n) {
lightbox.showSlides(lightbox.slideIndex += n);
};
lightbox.currentSlide = function(n) {
lightbox.showSlides(lightbox.slideIndex = n);
};
lightbox.showSlides = function(n) {
var i;
var slides = document.getElementsByClassName("LB-Slides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
lightbox.slideIndex = 1
}
if (n < 1) {
lightbox.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[lightbox.slideIndex - 1].style.display = "block";
dots[lightbox.slideIndex - 1].className += " active";
captionText.innerHTML = dots[lightbox.slideIndex - 1].alt;
};
lightbox.init = function() {
lightbox.slideIndex = 1;
lightbox.showSlides(lightbox.slideIndex);
};
return lightbox;
})();
slider.init(); // initialize slider module (widget);
lightbox.init(); // initialize lightbox module (widget);
Please make note that you also need to adjust your html onclick events, since it's should be called each widget methods, not global once.
P.S.: I'm not big fan of both of this code snippets from w3school (in terms of code quality, performance aspects, learning patterns), but it's completely another topic to discuss. But in order "to make it work" this link to jsbin above should help.

Categories