I have a slideshow it has images I want the slider to stop on a specific slide in large screen, and I want it to keep the slideshow going in small screen, how can I do that? here is my javascript code:
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
I've used http://wicky.nillia.ms/enquire.js/ in the past and it's worked well for viewport-width specific JS.
If you wanted something really simple, you could just check the document.body.offsetWidth on load and run custom JS from there.
For example limit width = 1000px
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
var w = window.innerWidth;
if(w < 1000){
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
}
See example: https://jsfiddle.net/kilotonna/n9j42q8x/1/
OR with listener resize:
var slideIndex = 0;
var w = window.innerWidth;
carousel();
window.addEventListener('resize', function(){
w = window.innerWidth;
}
);
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
if(w < 700){
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
}
https://jsfiddle.net/kilotonna/n9j42q8x/7/
Related
this function loops trough a div called mySlides, and sets the current slide on display block and the one before, back to a display none.
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var info = document.getElementsByClassName("numbertext");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
I want to deley this display block for 1 second, i dont know how to setTimeOut() to such a function.
slides[slideIndex - 1].style.display = "block";
};
Your bottom for loop would look like this
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
setTimeout(function(){
slides[i - 1].style.display = "block";
}, 1000) //time in ms
}
I have implemented automatic and manual image slider together. But I also want to pause the automatic sliding on hover. How can i do this. Here is the code snippet. No external libraries other than jQuery.
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);
}
}
Hi I have a slideshow javascript running on my website but it doesn't seem to be working properly when I change the images back and forth and the automaticity doesn't show image 6. Could someone please help me write it up because I have been trying over a month and reached nowhere.
https://wbd-ownwork-13--15nalaas.repl.co/
<script>
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("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;
}
var slideIndex = 0;
showSlides();
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 = 2}
slides[slideIndex-2].style.display = "block";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>
First of all you need not to add the custom controls for changing the slides because the slide show is more than enough.
And secondly you need to change the entire script to the given script only then it is going to work because rest of your script is messing with the slideshow.
Change the entire script from line 94 to line 125 in your HTML to this -
<script>
var slideIndex = 0;
showSlides();
function showSlides(){
var slides = document.querySelectorAll('.mySlides');
for(var i = 0; i < slides.length; i++){
slides[i].style.display = "none";
}
slides[slideIndex].style.display = "block";
slideIndex++;
if(slideIndex > slides.length - 1){slideIndex = 0}
loop();
}
function loop(){
setTimeout(showSlides, 1000);
}
</script>
If still you have a problem the please ask again.
$("#forward_carousel").click( () => {
//sets timeout back and starts
clearTimeout(timeout);
timeout = 0;
var i;
var x = $(".carousel_size");//class for the pictures in carousel
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
timeout =setInterval(carousel, 5000);
})
$("#backward_carousel").click( () => {
clearTimeout(timeout);
timeout = 0;
var i;
var x = $(".carousel_size");//class for the pictures in carousel
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex--;
if (slideIndex < x.length){slideIndex = 3}
x[slideIndex-1].style.display = "block";
timeout =setInterval(carousel, 5000);
})
the forward button is working, but the backward button is just working if the current picture is at index 1. If the index is not at 1 the backward button is not working at all.
Your condition for backward index is not correct.
Change this line:
if (slideIndex < x.length){slideIndex = 3}
To this:
if (slideIndex < 0){slideIndex = x.length}
What's the problem here, everything worked well until 2 days ago!
JavaScript code:
var slideIndex = 0;
carousel();
function carousel() {
"use strict";
var i;
var x = document.getElementsByClassName("istaknutiOglasi");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1;
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 10000);
}
HTML code:
<div class="single_sidebar wow fadeInDown">
<h2><span>Istaknuti Oglasi</span></h2>
<div class="sideAdd">
<img class="istaknutiOglasi" src="/images/Istaknuti_Oglasi.png">
<img class="istaknutiOglasi" src="/images/Banner_2.png">
</div>
</div>
On google shows me error to x[slideIndex - 1].style.display = "block";
Two things :
if (slideIndex > x.length) {
slideIndex = 1;
}
Should be changed to:
if (slideIndex >= x.length) {
slideIndex = 0;
}
and
x[slideIndex - 1].style.display = "block";
should be changed to:
x[slideIndex].style.display = "block";
Here's a working example
var slideIndex = 0;
carousel();
function carousel() {
"use strict";
var i;
var x = document.getElementsByClassName("istaknutiOglasi");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex >= x.length) {
slideIndex = 0;
}
x[slideIndex].style.display = "block";
setTimeout(carousel, 1000);
}
<div class="single_sidebar wow fadeInDown">
<h2><span>Istaknuti Oglasi</span></h2>
<div class="sideAdd">
<img class="istaknutiOglasi" src="https://unsplash.it/200/300">
<img class="istaknutiOglasi" src="https://unsplash.it/200/400">
</div>
</div>
What was happening was that the indexes were trying to access elements outside of the array (x). This was a out of bounds error. How this helps you out!