I'm having some issues with a slideshow banner for the top of my webpage. I tried following the W3 tutorial on it but not having much luck. So, below is my code:
HTML:
<div class="slide-content" style="max-width:1000px"> <img class="slidepic" src="testheadphoto.jpg" style="width:100%" border="0" /> <img class="slidepic" src="testphototwo.jpg" style="width:100%" border="0" />
<div class="slide-center slide-section slide-large slide-text-white slide-display-bottommiddle" style="width:100%">
<div class="slide-left slide-padding-left slide-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="slide-right slide-padding-right slide-hover-text-khaki" onclick="plusDivs(-1)">❯</div>
<span class="slide-stamp demo slide-border slide-transparent slide-hover-white" _="_" span="span"> <span class="slide-stamp demo slide-border slide-transparent slide-hover-white" onclick="currentDiv(1)"></span> <span class="slide-stamp demo slide-border slide-transparent slide-hover-white" onclick="currentDiv(2)"></span> </span> </div>
CSS:
.slide {
display:none;
}
.slide-left, .slide-right, .slide-stamp {
cursor: pointer;
}
.slide-stamp {
height: 13px;
width: 13px;
padding: 0;
}
Javascript:
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("slidepic");
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(" slide-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " slide-white";
}
At the moment, the two images are both appearing on the page at the same time and the arrows for right and left are below them. When you click an arrow, one of the pictures disappears and the slide effectively does work. It doesn't look how it's supposed to though. I've attached two images (One of how the slide should look and the other, how mine looks. As always, any help is much appreciated!
Thanks
Your images are line breaking because the container is not setup right.
In your CSS, try:
.slide-content {
white-space: nowrap;
}
I also recommend putting your controls into this same container and positioning them absolutely to their respective corners, with a z-index set to ensure they'll be on top of the images that are sliding in.
Related
My website has a simple slide carousel which works correctly, but the SEOptimer evaluation report says:
“Cannot read property 'className' of undefined at showSlides (http://www.abacus-arts.org.uk/:78:8) ”
Line 78 is near the end below and says: dots[slideIndex-1].className += " active";
Can I safely ignore the SEOptimer problem report, or can you help me to fix it?
<div>
<!-- code for slides 1 to 4 removed, below are slides 5 and 6 in the carousell -->
<div class="mySlides">
<div class="picnumber"> 5 / 6</div> <img src="Pic-5-DM.jpg" alt="Pic5" style="width:100%";>
<div class="pictitle"> Breakout room LHS view </div> </div>
<div class="mySlides">
<div class="picnumber"> 6 / 6</div> <img src="Pic-6-GW.jpg" alt="Pic6" style="width:100%";>
<div class="pictitle"> Street view of entrance </div> </div>
<!-- Back and forward buttons jump to the Java Script lower down -->
<a class="prev" onclick="plusSlides(-1)"> <</a>
<a class="next" onclick="plusSlides(1)"> ></a>
</div>
<!-- from https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp -->
<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("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;
}
</script>
UPDATE. Solved by removing the lines for unused variables as shown //.
#phuzi Thank you all for encouraging me to search for unused variables, I found in evolving the HTML I has stopped using "demo, dots and captiontext" and the problem went away when these code lines were excluded.
Many thanks. Graeme.
var dots = document.getElementsByClassName("demo");
there is null, it mean - i dont find any classes with name "demo"
check html part code
Hello and apologies if my question is unclear due to the lack of my javascript knowledge. I am a self-taught php:er and decided to try javascript with a php approach. So here's my problem:
I want to make a slideshow of pictures which:
1) have buttons to go next/prev pic, (works)
2) automatically changes picture every X seconds, (works)
3) stops changing pictures automatically after the whole series of pictures have been previewed, (works)
4) stops changing pictures automatically if the next/prev button has been pressed. (doesn't work)
1 - 3 I have managed to figure out. But for reasons beyond my pathetic understanding I can't do #4! I have tried to set a "lap" variable if the "n" variable is set. Which I thought meant that if the "next/prev" button has been pressed, lap will be set and the javascript codes will not read the line which settimeout the showSlides. It hasn't worked no matter how many different ways I try it! Can you help me please? Here are my codes:
CSS below
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
width: auto;
padding: 16px;
margin-top: -22px;
color: #595959;
font-weight: normal;
font-size: 38px;
transition: 0.6s ease;
user-select: none;
}
/* Position the "next button" to the right */
.next {
top:50px;
right: 0;
}
.prev {
top:50px;
left: 0;
}
HTML below
<td class='slideshow-container' valign='top' style='width:50%;padding:3%;text-align:center;'>
<center>
<div class='mySlides fade' style='position:relative;'>
<img src='forsig.JPG' style='width:90%'>
</div>
<div class='mySlides fade' style='position:relative;'>
<img src='grundblocket.JPG' style='width:90%'>
</div>
<div class='mySlides fade' style='position:relative;'>
<img src='kajaky.JPG' style='width:90%'>
</div>
<div class='mySlides fade' style='position:relative;'>
<img src='Rescueshot1.jpg' style='width:90%'>
</div>
<div class='mySlides fade' style='position:relative;'>
<img src='rescueshot2.jpg' style='width:90%'>
</div>
<div class='mySlides fade' style='position:relative;'>
<img src='skoretc.JPG' style='width:90%'>
</div>
echo "</center>
<a class='prev' onclick='plusSlides(-1)'>❮</a>
<a class='next' onclick='plusSlides(1)'>❯</a>
</td>
Javascript below:
<script>
var slideIndex = 0;
showSlides();
function plusSlides(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";
}
if (typeof n == 'undefined') {slideIndex++;}
if (slideIndex > slides.length) {slideIndex = 1}
if (slideIndex == slides.length) {var lap = "ye"}
slides[slideIndex-1].style.display = "block";
if (typeof lap == 'undefined') {
if (typeof n == 'undefined') {setTimeout(showSlides, 5000);}
}
}
</script>
Add var lap; on the top where var slideIndex = 0; goes, replace var lap = "ye"; with lap = "ye"; Now, you can set lap variable with any other funciton and it will stop autoplay.
Leaving some details for you to figure out.
Here's the code now doing what I want it to do:
<script>
var slideIndex = 0;
var lap
var to
showSlides();
function plusSlides(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";
}
if (typeof n == 'undefined') {slideIndex++;}
if (slideIndex > slides.length) {slideIndex = 1}
if (slideIndex == slides.length) {lap = "ye"}
if (typeof n !== 'undefined') {
lap = "ye";
clearTimeout(to);
}
slides[slideIndex-1].style.display = "block";
if (typeof lap == 'undefined') {
if (typeof n == 'undefined') {to = setTimeout(showSlides, 5000);}
}
}
</script>
My slideshow works great except when the page loads initially. I've set my CSS to "display:none" to begin with, then the Javascript loops through the images to display them as inline-blocks when the next button is clicked. But, the first image displays as "none" to start out.
I'm sure there's a way to just display the first image while keeping all the images after hidden. I'm pretty new to this.
I followed along a tutorial on w3schools.com here: https://www.w3schools.com/howto/howto_js_slideshow.asp
You can see my full code and the product on my codepen:
https://codepen.io/catherinehh/pen/orpeJV
CSS:
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.slideImg {
display: none;
}
JAVASCRIPT:
var slideIndex = 1;
function nextSlide(n){
showSlides(slideIndex += n);
}
function currentSlide(n){
showSlides(slideIndex = n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("slideImg");
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 = "inline-block";
}
I've basically followed the tutorial on w3schools.com line by line, and I can't find where my code differs from the tutorial. It should run just like the slideshow on that page.
Any help is appreciated! Thank you!
You have forgotten to initialize the slider by calling showSlides(slideIndex)
var slideIndex = 1;
function nextSlide(n){
showSlides(slideIndex += n);
}
function currentSlide(n){
showSlides(slideIndex = n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("slideImg");
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 = "inline-block";
}
showSlides(slideIndex)
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.slideImg {
display: none;
}
<div class="wrapper">
<header>
<h1>Catherine Hill Hyman</h1>
<p>Professional Creations</p>
</header>
<main>
<section class="designSection">
<h2>Design</h2>
</section>
<section class="developmentSection">
<h2>Web Development</h2>
</section>
<section class="photoSection">
<h2>Photography</h2>
<!-- begin photo slideshow-->
<div class="photoSlideshow">
<button name="prevButt" onclick="nextSlide(-1)">❮</button>
<div class="slideImg">
<img id="uncleBud" src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/58378586_10157043937729774_1705977854832934912_n.jpg?_nc_cat=111&_nc_oc=AQl-LK_lpsqPa3rT2zTbc5KJpNNZECz9jxm15Xk0bNbYjtTklfxf34uVybG2xSjjffA&_nc_ht=scontent.fcae1-1.fna&oh=c5b64ef84d76c6d7ef2a9b9409e12637&oe=5DBFF07F"
alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
</div>
<div class="slideImg">
<img src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/61008492_10157093314404774_1267282211523002368_o.jpg?_nc_cat=111&_nc_oc=AQldqecidxJd5LhQsCrYpnGnQ3mmLDqqMe9OGcChpmZyP82vSw7oBZvBDCZfbYktIGQ&_nc_ht=scontent.fcae1-1.fna&oh=c57a3d3827f6cab302470ec0e697f7ed&oe=5D88E446"
alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
</div>
<div class="slideImg">
<img src="https://scontent.fcae1-1.fna.fbcdn.net/v/t1.0-9/59285770_10157043934564774_1801122100677705728_n.jpg?_nc_cat=107&_nc_oc=AQlfwDfzSUayQL0nmF9apZnwLzQJtIZw3KsWx2mM5P0O1x2q508-vo4lsCD6EfUD9ik&_nc_ht=scontent.fcae1-1.fna&oh=4948f8ea74480440b542e60d119e23a9&oe=5D7E8C45"
alt="black and white image of half a woman's face with dark hair looming over the camera. Her eyes are not visible." style="height:300px">
</div>
<button name="nextButt" onclick="nextSlide(1)">❯</button>
<script src="slideShow.js"></script>
</div>
<!-- end photo slideshow-->
</section>
<section class="writingSection">
<h2>Writing</h2>
</section>
</main>
If you want the slider to start working on page load, so you can call the first slide at the end of above codes:
showSlides(slideIndex);
For more confident (as I dont know where do you put the script in your page if in Header or after the Body tag) you can use <body onload="showSlides(1)"> to postpone the slider function after complete page load.
If you want to show the first image initially and start the slider on click, so use the CSS rule to exclude the first image of being hidden:
.slideImg:first-of-type {
display: block;
}
I created a simple picture slideshow for my website but the problem I have is when you first go to the site it shows all the pictures and its not until you click one of the scroll arrows that it goes to a slideshow. I want it to automatically only show one picture at a time when you first open the website. Here is the code I have:
<div class="wrapper">
<h2>Gallery</h2>
<img class="mySlides" src="assets/images/chickens1.jpg">
<img class="mySlides" src="assets/images/goat1.jpg">
<img class="mySlides" src="assets/images/goat4.jpg">
<img class="mySlides" src="assets/images/goat2.jpg">
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button>
JavaScript:
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";
}
It's hard to tell just from what you've posted, but what I expect is going on is that initially, all 4 images are visible, due to the CSS styling on them. Then, when a user interacts with the page, your JavaScript gets called, which makes only 1 of them visible.
One thing you might try is to set it up so they are all set to display:none to begin with, and on page load, call showDivs(1).
<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);
}