I am trying to find a solution to having a slideshow in my chrome extension. I have buttons for > and < within the slideshow and they are not working with the inline JS issue. I have overcome this by putting it all in a JS file but its still not working.
HTML:
<div class="contents">
<div class="description">
<div id="options-greet" style="font-size: 1.75em; font-weight: bold;"></div>
<div class="overview_description">
<div class="slideshow-container">
<div class="mySlides">
<q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>
<div class="mySlides">
<q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="mySlides">
<q>I have not failed. I've just found 10,000 ways that won't work.</q>
<p class="author">- Thomas A. Edison</p>
</div>
<a class="prev" id="button1" >❮</a>
<a class="next" id = "button2">❯</a>
</div>
JS file:
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";
}
document.getElementById("button2").addEventListener("onclick", plusSlides(1));
When you write 'onclick', plusSlides(1) you're immediately calling plusSlides and assigning the return value to the listener. But you're not returning anything - you're just calling a new function which also doesn't return anything. So, instead, pass a function reference that does call plusSlides when you have a click event.
.addEventListener('onclick', () => plusSlides(1));
Related
Im creating a website and one of the function is to change the display image in the section every time user scrolls back to that section
I've tried using the carousel method whereby image changes once when scroll value reaches (lets say) 100. The website glitches and image change multiple times
As shown, code should cause image to change only when user scroll pass a certain point. However, when user scroll pass a certain point, image changes multiple times and starts lagging.
var slideTopIndex = 0;
showTopDivs(slideTopIndex);
function plusTopDivs(n) {
showTopDivs(slideTopIndex += n);
}
function currentTopDiv(n) {
showTopDivs(slideTopIndex = n);
}
function showTopDivs(n) {
var i;
var x = document.getElementsByClassName("myTopSlides");
var dots = document.getElementsByClassName("dotted");
if (n > x.length) {
slideTopIndex = 1
}
if (n < 1) {
slideTopIndex = 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(" active", "");
}
x[slideTopIndex - 1].style.display = "block";
dots[slideTopIndex - 1].className += " active";
}
showTopSlides();
function showTopSlides() {
var i;
var slides = document.getElementsByClassName("myTopSlides");
var dots = document.getElementsByClassName("dotted");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideTopIndex++;
if (slideTopIndex > slides.length) {
slideTopIndex = 1
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideTopIndex - 1].style.display = "block";
dots[slideTopIndex - 1].className += " active";
window.onscroll = function() {
if (window.pageYOffset = 500) {
setTimeout(showTopSlides, 2000); // Change image every 2 seconds
}
}
}
<div class="myTopSlides fade">
<div class=" vidsection">
<div class=" video1"></div>
<div class="zt-content zt-center zt-display-center" style="background-color:rgba(0,0,0,0.4); max-width:30%; height:auto; padding:48px;z-index: 2;">The platform that bridges today to tomorrow's learning landscape</div>
</div>
</div>
<!-- Slide 2 -->
<div class="myTopSlides fade">
<div class=" vidsection">
<div class=" video2"></div>
<div class="zt-content zt-center zt-display-center" style="background-color:rgba(0,0,0,0.4); max-width:30%; height:auto; padding:48px;z-index: 2;">The platform that bridges today to tomorrow's learning landscape</div>
</div>
</div>
<!-- Slide 3 -->
<div class="myTopSlides fade">
<div class=" vidsection">
<div class=" video3"></div>
<div class="zt-content zt-center zt-display-center" style="background-color:rgba(0,0,0,0.4); max-width:30%; height:auto; padding:48px; z-index: 2;">The platform that bridges today to tomorrow's learning landscape</div>
</div>
</div>
<br>
<div style="display:none;">
<span class="dotted" onclick="currentTopDiv(1)"></span>
<span class="dotted" onclick="currentTopDiv(2)"></span>
<span class="dotted" onclick="currentTopDiv(3)"></span>
</div>
</div>
I'm an absolute newbie on Javascript, but I'm trying to put together three separate automatic slideshows on the same page. I've found a couple of helpful links from W3Schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto & https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr), but when using either, I can't include all three slideshows together, or if I repeat the same <script>three times (changing the document.getElementsByClassName) all of the slideshows seem to collapse. I've also found some options for multiple slideshows, but I have no idea how to make them automatic. CSS is no problem, I just can't figure out the combination in the script to make all three slideshows work simultaneously and automatic.
Thanks in advance!
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("slide1", "slide2", "slide3");
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
}
</script>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide1");
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>
<div id="container1">
<img id="aa" class="slide1" src="id1.png">
<img id="bb" class="slide1" src="id2.png">
<img id="cc" class="slide1" src="id3.png">
</div>
<div id="container2">
<img id="dd" class="slide2" src="cr1.png">
<img id="ee" class="slide2" src="cr2.png">
<img id="ff" class="slide2" src="cr3.png">
</div>
<div id="container3">
<img id="ab" class="slide3" src="id1.png">
<img id="hh" class="slide3" src="id2.png">
<img id="ii" class="slide3" src="id3.png">
</div>
I had the same problem, I gave each slideshow a different class, then I included a separate function for each class and then I isolated each function by wrapping it in the below
;(function() {
JS code
})()
I've edited your code so it should work now :)
<div id="container1">
<img id="aa" class="slide1" src="id1.png">
<img id="bb" class="slide1" src="id2.png">
<img id="cc" class="slide1" src="id3.png">
</div>
<div id="container2">
<img id="dd" class="slide2" src="cr1.png">
<img id="ee" class="slide2" src="cr2.png">
<img id="ff" class="slide2" src="cr3.png">
</div>
<div id="container3">
<img id="ab" class="slide3" src="id1.png">
<img id="hh" class="slide3" src="id2.png">
<img id="ii" class="slide3" src="id3.png">
</div>
<script>
;(function() {
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide1");
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
}
})()
;(function() {
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide2");
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
}
})()
;(function() {
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide3");
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>
The image slider doesn't show the image when it is clicked on at the bottom.
What may be the problem?
It shows differently in UC browser and differently in Firefox
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;
}
<div class="container">
<!-- Container for the image gallery -->
<!-- Full-width images with number text -->
<div class="mySlides">
<img src="https://via.placeholder.com/350x150" style="width:100%"><br/>
</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 cursor" src="https://via.placeholder.com/50x50" style="width:100%" onclick="currentSlide({{$i}})" alt="good">
</div>
</div>
</div>
I have the HTML code below and want to randomize the images. How to accomplish it?
Below the code is part of html, and the code is running to show the images in order. I don't know how to ulter the javascripte and want the images can be showed randomly.
Thank you for your concern and hopefully somebody can help.
Lawrence
<div class="slideshow-container">
<div class="mySlides fade">
<img src="http://i.dailymail.co.uk/i/pix/2017/03/01/14/3DD766C300000578-4271496-image-a-39_1488378897470.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://hips.hearstapps.com/roa.h-cdn.co/assets/16/30/1469467513-01-2016-aston-martin-db9-gt.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202017/Magazine-Articles/April/Google-Auto-Profile-images-2017/PRF-811" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.lexus.com/byl2014/pub-share/images/series/lc.png" style="width:100%">
</div>
</div>
<br>
<script>
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 = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
You can generate a random number to choose a random image:
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}
var rand = Math.floor((Math.random() * slides.length));
slides[rand].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
I found a w3 schools slideshow that seems to work half the time perfectly the other half it will give me an error that says Uncaught TypeError: Cannot read property 'style' of undefined at showDivs (slideshow.js:33) which is the x[slideIndex-1] part. I can't quite seem to figure out whats wrong.
HTML
<h2 class="w3-center"></h2>
<div class="w3-content w3-display-container">
<img class="mybottom mySlides" src="pics/pic3.3.jpg" style="width:100%">
<img class="mybottom mySlides" src="pics/pic3.jpg" style="width:100%">
<img class="mybottom mySlides" src="pics/pic2.jpg" style="width:100%">
<img class="mybottom mySlides" src="pics/pic4.jpg" style="width:100%">
<button id="back" class="w3-button w3-black w3-display-left">❮</button>
<button id="forward" class="w3-button w3-black w3-display-right">❯</button>
</div>
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";
}
document.getElementById("back").addEventListener("click", function(){
plusDivs(-1);
});
document.getElementById("forward").addEventListener("click", function(){
plusDivs(1);
});