I'm new in front end development and I want some help with this error
can you please help me fix the problem im facing
var index = 1; show(index);
function move(n) { show(index = index + n); }
function show(n) { var i; var x =
document.getElementsByClassName("slides"); for (i = 0; i < x.length;
i++) { x[i].style.display = "none"; } x[index].style.display =
"block"; }
.w3-content{max-width:980px;margin:auto}
.w3-center{text-align:center!important}
.w3-btn-floating:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-button{color:#000;background-color:#f1f1f1;padding:8px 16px}.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-btn,.w3-btn-floating{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-btn-floating{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.w3-btn-floating{width:40px;height:40px;line-height:40px}
.w3-btn-floating:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn-floating{-webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s}
<!DOCTYPE html>
<html>
<body>
<div class="w3-content" style="max-width:400px;position:relative">
<img class="slides" src="https://i.stack.imgur.com/Qypol.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/yU7fs.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/xxLmR.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/YiIiQ.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="move(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="move(1)">❯</a>
</div>
</body>
</html>
So the problem with your JS code is that you don't consider changing index based on length of the slides which are your clicks to the right and left buttons.
What I mean to say you should think what will happen when you keep clicking the right button so every time the index will increase so you need to set it back to the first image or slide in this case with this condition if (n > x.length) {index = 1}
and vice versa if (n < 1) {index = x.length} for the case when you decrease the images or slides (left button).
Here is the JS code you need to solve this problem:
var index = 1;
show(index);
function move(n) {
show(index = index + n);
}
function show(n) {
var i;
var x = document.getElementsByClassName("slides");
if (n > x.length) {index = 1}
if (n < 1) {index = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index-1].style.display = "block";
}
Fiddle(View):
var index = 1;
show(index);
function move(n) {
show(index = index + n);
}
function show(n) {
var i;
var x = document.getElementsByClassName("slides");
if (n > x.length) {index = 1}
if (n < 1) {index = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index-1].style.display = "block";
}
.w3-content{max-width:980px;margin:auto}
.w3-center{text-align:center!important}
.w3-btn-floating:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-button{color:#000;background-color:#f1f1f1;padding:8px 16px}.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-btn,.w3-btn-floating{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-btn-floating{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.w3-btn-floating{width:40px;height:40px;line-height:40px}
.w3-btn-floating:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn-floating{-webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s}
<!DOCTYPE html>
<html>
<body>
<div class="w3-content" style="max-width:400px;position:relative">
<img class="slides" src="https://i.stack.imgur.com/Qypol.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/yU7fs.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/xxLmR.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/YiIiQ.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="move(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="move(1)">❯</a>
</div>
</body>
</html>
Related
I have a little bit problem while using variables of two functions together. In this both functions are not working at once.
Here are my two functions :
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " red";
}
var slideIndex = 1;
showDivs2(slideIndex);
function plusDivs2(n) {
showDivs2(slideIndex += n);
}
function currentDiv2(n) {
showDivs2(slideIndex = n);
}
function showDivs2(n) {
var i;
var x = document.getElementsByClassName("mySlides2");
var dots = document.getElementsByClassName("demo2");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " red";
}
.mySlides {
display: none;
}
.mySlides2 {
display: none;
}
<div class="content">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/43288.png" style="width: 300px;height: 200px;">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/17874.jpg" style="width: 300px;height: 200px;">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/blog.jpg" style="width: 300px; height: 200px;">
</div>
<div class="center">
<div class="section">
<button class="button light-grey" onclick="plusDivs(-1)">❮ Prev</button>
<button class="button light-grey" onclick="plusDivs(1)">Next ❯</button>
</div>
</div>
<div class="content2">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/43288.png" style="width: 300px;height: 200px;">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/17874.jpg" style="width: 300px;height: 200px;">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/blog.jpg" style="width: 300px;height: 200px;">
</div>
<div class="center">
<div class="section">
<button class="button light-grey" onclick="plusDivs2(-1)">❮ Prev</button>
<button class="button light-grey" onclick="plusDivs2(1)">Next ❯</button>
</div>
</div>
In this, I have two div containing images with next and prev button, images of first function is loading by default but when i click on button then second image is appear. I just want to fix it i.e images of both div will load default.
I have follow tutorial from w3school
Now I want to improve it with prev / next for the indicators, not for the slider
This is what I want to achieve
Also this is my code
example
OR
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
}
#indi {
width: 200px;
float:left;
}
<body>
<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%">
<div class="w3-row-padding w3-section">
<div id="indi" class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)">
</div>
<div id="indi" class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%" onclick="currentDiv(2)">
</div>
<div id="indi" class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%" onclick="currentDiv(3)">
</div>
</div>
</div>
</body>
Thanks before, any help appreciated
Next:
$("#next").click(function () {
$("#container div:eq(" + num + ")").slideUp(450);
num = (num + 1) % 4;
$("#container div:eq(" + num + ")").fadeIn(450);
});
Last:
$("#last").click(function () {
$("#container div:eq(" + num + ")").slideUp(450);
num = 4;
$("#container div:eq(" + num + ")").fadeIn(450);
});
This has already been asked and answered - How do I add buttons to my Javascript/Jquery Slider?
If you need any more specific help please don't hesitate to ask though.
I have created this slider for my website but I need to apply a fadeIn/out when go next/prev. Can anyone explain me how to do this or show me the code?
JS
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
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";
}
HTML
<div class="container">
<img class="mySlides" src="http://placehold.it/600x200">
<img class="mySlides" src="http://placehold.it/600x150" style="display:none">
<img class="mySlides" src="http://placehold.it/600x100" style="display:none">
<img class="mySlides" src="http://placehold.it/600x200" style="display:none">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>
I think you can replace this:
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
With this:
$('.mySlides:visible').fadeOut(function() {
$(x[slideIndex-1]).fadeIn();
});
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
$('.mySlides:visible').fadeOut(function() {
$(x[slideIndex-1]).fadeIn();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img class="mySlides" src="http://placehold.it/600x200">
<img class="mySlides" src="http://placehold.it/600x150" style="display:none">
<img class="mySlides" src="http://placehold.it/600x100" style="display:none">
<img class="mySlides" src="http://placehold.it/600x200" style="display:none">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>
I put an image slider on my website to show the image one by one on click event, but on the last image I want to stop image slider. I don't want to repeat image again and I don't want forward slide but we can go back.
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
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";
}
</script>
HTML:
<div class="w3-content w3-display-container">
<div style="margin-left:150px">
<img class="mySlides" src="../../../../../imageslider2/slide1.jpg" style="width:auto; height:auto"/>
<img class="mySlides" src="../../../../../imageslider2/slide2.jpg" style="width:auto; height:auto"/>
<pre> <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating w3-display-right" onclick="plusDivs(1)">❯</a>
</div>
First you need to get a count of the total number of slides and set it as a variable, which you can do with .length and then you need to add a conditional statement to your plusDivs function to do something(alert in the below example) if the slideIndex value is equal to that of the total number of slides:
var slideIndex = 1,
totalSlides = document.querySelectorAll('.mySlides').length;
showDivs(slideIndex);
function plusDivs(n) {
if (slideIndex === totalSlides) {
alert('End of slideshow');
} else {
showDivs(slideIndex += n);
}
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
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";
}
<div class="w3-content w3-display-container">
<div style="margin-left:150px">
<img class="mySlides" src="http://placehold.it/250x250" style="width:auto; height:auto"/>
<img class="mySlides" src="http://placehold.it/250x250/000/fff" style="width:auto; height:auto"/>
<pre>❮
❯ </pre>
</div>
</div>
Alternatively, you could use the same approach to simply hide the previous or next buttons if they are at the start or the end of the slideshow.
<html>
<head>
<style>
.mySlides {
display:none;
height:200px;
width:800px;
margin-left:auto;
margin-right:auto;
}
</style>
<head>
<body>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) { myIndex = 1 }
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
<section id="images">
<img id="yeah" class="mySlides" src="image1.jpg" />
<img class="mySlides" src="image2.jpg" />
<img class="mySlides" src="image3.jpg" />
</section>
</body>
</html>
So i'm not sure why this automatic slideshow isn't working when it was copied almost verbatim from w3schools, the result doesn't display anything. Ive been trying to find out whats wrong with it for about a day and a half now and still no luck, Please Help!
I believe that this was not working because before the edit, your script tag was before your html tags..hence the script executed the function and raised a couple of errors since your html was not fully loaded...
Place your script tag below your html codes (in this scenario)
see snippet
<html>
<style>
.mySlides {
display: none;
height: 200px;
width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<section id="images">
<img id="yeah" class="mySlides" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRxjU7k88PhMjr8f7tCmwOhiaik22dtZYY773ZtWG4TSOLgspnOeIhpOHHa" />
<img class="mySlides" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQiUk8V76AvsGFAkDEHVjnZID8iFgB8LF7mQMbVVDB8mLnxb81v1g" />
</section>
</body>
</html>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
console.log(x, myIndex);
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
Here is a slightly different implementation of the slideshow that allows auto rotation of the images.
var image_number = 0;
function slideshow(num) {
var images = new Array("image1.jpg", "image2.jpg", "image3.png");
var description = new Array("Title1", "Title2", "Title3");
var image_length = images.length - 1;
image_number = image_number + num;
if (image_number > image_length) {
image_number = 0;
}
if (image_number < 0) {
image_number = image_length;
}
// Change <img> src and image description in DOM
document.getElementById("slideshow").src=images[image_number];
document.getElementById("description").innerHTML = description[image_number];
return false;
}
function auto_slideshow() {
setInterval(function(){
slideshow(1);
}, 3000);
}