I have a carousel that is not displaying the images upon loading the webpage for some reason. I am working in dream weaver and for some reason the JS function only kicks in after clicking on one of the arrow buttons. I feel like I need to force feed the function one image in order for it show upon loading the page but I am not sure how to do this. Thanks for the help!
Here is the HTML (I have the JS fucntion in the head tags):
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";
}
<script src="testcar.js"></script>
<section class="carousel">
<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://www.healthypawspetinsurance.com/Images/V3/DogAndPuppyInsurance/Dog_CTA_Desktop_HeroImage.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.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.what-dog.net/Images/faces2/scroll001.jpg" style="width:80%">
<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>
</section>
Just try loading your JS after the HTML.
Check out the difference here:
https://jsfiddle.net/vy9uwxhk/ - look at the console for the error. As it's not finding the appropriate HTML, the code execution stops and results in non-working of the carousel.
https://jsfiddle.net/6k92zvze/ - here the <script> is loaded after the HTML and as it finds the HTML, the execution is successful and the carousel works fine.
Hope this helps. Here's more info on where to include your script tags.
Related
In my website's image gallery section, I have an image lightbox set to open when an image is clicked on.
My question is how would I prevent the lightbox from opening ONLY on mobile screens?
I have never altered javascript for different screen sizes nor have I ever used javascript within a media query so this is new to me...
<script>
// Open the Modal
function openModal() {
document.getElementById("myModal").style.display = "block";
document.getElementById("navclose").style.display = "none";
}
// Close the Modal
function closeModal() {
document.getElementById("myModal").style.display = "none";
document.getElementById("navclose").style.display = "";
}
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");
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";
}
</script>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img class="grid-image" src="images/grid.jpg" style="width:100%"> <h5 id="imagecaption">Pfieffer Beach Restoration </h5>
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img class="grid-image" src="images/gridgallery2.jpeg" style="width:100%"> <h5 id="imagecaption">Birchwood Condo Gardens</h5>
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img class="grid-image" src="images/gridgallery3.jpg" style="width:100%"> <h5 id="imagecaption"> Pershing Square Master Plan </h5>
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img class="grid-image" src="images/gridgallery1.jpg" style="width:100%"> <h5 id="imagecaption"> UCLA Quad Redesign</h5>
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</section>
Let's test if pointer-events: none is stronger than event listeners.
function lightBox() {
alert("yay you are not on mobile")
}
#media (max-width: 767px) {
button {
pointer-events: none;
}
}
<button onclick="lightBox()">Click for lightbox</button>
(try it on mobile size snippet vs full page)
Yes! so there you have it.
#media (max-width: 767px) {
.mySlides {
pointer-events: none;
}
}
I'm attempting to adapt the HTML, CSS, an JavaScript from here: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp
The problem I'm having is I would like to have all the JavaScript in the JS file and none be in the html.
When I try to move the onclick out of the HTML and into the JS file I have had nothing but problems. Beginning with the DOM not being loaded(solved with a domLoaded function) then to a problem with event listeners for the individual pictures.
My current problem is that the slides in the showSlides function is undefined if I pass the number 1 through it, either as you see in the document.querySelector or if I call the currentSlides or showSlides function in the console.
//waits for the DOM to load so that everything is ready for the gallery code.
window.addEventListener("DOMContentLoaded", domLoaded);
function domLoaded() {
showSlides(slideIndex);
}
document.querySelector("#img1").addEventListener("click", currentSlide.bind(1));
document.querySelector("#img2").addEventListener("click", currentSlide.bind(2));
document.querySelector("#img3").addEventListener("click", currentSlide.bind(3));
document.querySelector('#img4').addEventListener("click", currentSlide.bind(4));
document.querySelector('#img5').addEventListener("click", currentSlide.bind(5));
document.querySelector('#img6').addEventListener("click", currentSlide.bind(6));
//Begin w3schools gallery code
var slideIndex = 1;
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
console.log("click working")
let i;
var slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("demo");
let 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;
}
<div class="container">
<!-- Full-width images with number text -->
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img class="mainImage" src="assets/dancingSnow.jpg">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img class="mainImage" src="assets/CABELL CO TOURNEY 2016.jpg">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img class="mainImage" src="assets/IMG_9320.JPG">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img class="mainImage" src="assets/Invitation.jpg">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img class="mainImage" src="assets/SCAbattleline.jpg">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img class="mainImage" src="assets/Yorick Paragon Druid.jpg">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Image text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail images -->
<div class="row">
<div class="column">
<img class="demo" src="assets/dancingSnow.jpg" id="img1" alt="Dancing in the Snow">
</div>
<div class="column">
<img class="demo" src="assets/CABELL CO TOURNEY 2016.jpg" id="img2" alt="Cabell Co Tourney 2016">
</div>
<div class="column">
<img class="demo" src="assets/IMG_9320.JPG" id="img3" alt="unknown">
</div>
<div class="column">
<img class="demo" src="assets/Invitation.jpg" id="img4" alt="Invitation">
</div>
<div class="column">
<img class="demo" src="assets/SCAbattleline.jpg" id="img5" alt="Ready for War">
</div>
<div class="column">
<img class="demo" src="assets/Yorick Paragon Druid.jpg" id="img6" alt="Amtgard Award">
</div>
</div>
</div>
Any input is much appreciated.
With your bind solution, plusSlides function works incorrectly. If you put console.log(n) inside you'll see that n is not a number but rather [object PointerEvent], and so your slideIndex gets messed up and breaks showSlides function. The first argument of bind is usually the this pointer and you have to offset your desired arguments by one. You can pass null as the first argument, like this:
document.querySelector("#img1").addEventListener("click", currentSlide.bind(null,1));
Here is a working example:
https://jsfiddle.net/progmars/njwo0ct7/
However, it could be so much cleaner with jQuery and better model separation from view.
How can I make this slider run automatically with previous/next controls?
It's working fine when I click on the previous and next buttons, but the sliders are not running automatically. Also, when I move the cursor to any of the slides it won't pause on mouse up.
var slideIndex = 0;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(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";
setTimeout(showSlides, 1000);
}
<div class="slideshow-container">
<div class="mySlides fade">
<img src="/imgs/hol_str_08mar.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/amz_dls_05mar.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/smr_apl_08feb.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/meg_fas_08mar.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/spk_str_08mar.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center;display:none">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
Maybe to solve your problem, you should try to pass the "SlideIndex" Variable as parameter of the showslides function in your setTimeout.
So your setTimeout code should be
setTimeout(function(){showSlides(SlideIndex+1)},1000)
Or you could even use your plus function
setTimeout(function(){plusSlides(1)},1000)
Can you help me a little, please? I have no experience with JavaScript yet. I would like to change images every 5 seconds, but the buttons remain functional (ie when I press them, change the image, even if the 5 seconds have not yet passed). Thank you very much!
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving1.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving6.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving3.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor</div>
<img src="imagini/driving2.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</section>
<div class="dots" >
<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>
</div>
<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>
The following code achieves exactly what you want. Every time a news slide is set the old timer gets invalidated and a new one is initiated. The timer will run the plusSlides function every 5 seconds. Hope this code helps you:
<section>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 1</div>
<img src="imagini/driving1.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 2</div>
<img src="imagini/driving6.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 3</div>
<img src="imagini/driving3.jpg">
</div>
<div class="mySlides fade">
<div class="titlu">Traffic Signs Tutor 4</div>
<img src="imagini/driving2.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</section>
<div class="dots" >
<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>
</div>
<script>
//timer
var newSlide;
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n = +1) {
slideIndex = slideIndex + n;
showSlides(slideIndex);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
//invalidate old timer
clearInterval(newSlide);
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";
//set a new interval
newSlide = setInterval(plusSlides, 5000);
}
</script>
I have some problem in the script -
Html -
<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)">jjjj</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 -
<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>
Question
If showSlides in showSlides(slideIndex) is a function where slide Index is passed as a parimeter
What is n here , if it is a perimeter , why it's data type is not defined
function plusSlides(n) {
showSlides(slideIndex += n);
}
If showSlides is a function then how it is defined under function plusSlides() function
What is n in the Script
n gets propagated as 1 here. When we call showSlides(slideIndex) we are really doing showSlides(1). Since the only parameter of showSlides is n, then we're setting n=1 in the scope of that specific function call.
showSlides is indeed a function, and all that plusSlides(n) does is call showSlides with a new parameter.