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;
}
Related
So I'm trying to implement an infinite autoplay multiple carousel using Jquery.
I have created two different carousel blocks on same page
this is the body of the page
<div class="rotating_block">
<div class="block one"></div>
<div class="block two"></div>
<div class="block three"></div>
</div>
<br>
<div class="rotating_block">
<div class="block one"></div>
<div class="block two"></div>
<div class="block three"></div>
</div>
CSS for the same
.rotating_block {
display: flex;
}
.one {
background: red;
height: 100px;
width: 100px;
}
.two {
background: green;
height: 100px;
width: 100px;
}
.three {
background: blue;
height: 100px;
width: 100px;
}
In JS i've created slideIndex array and childrens (blocks) array for each carousel
slideIndex[n] stores current slide number to show while
childrens[n] stores array of blocks/childrens
For each parent div '.rotating_block' I'm storing its slideIndex and its children in those arrays and performing the carousel function.
At the end I'm calling for setTimeout so as to run the function once again every five seconds and change the slide to give carousel like effect the problem is I'm getting max call exceeded stack / console getting logged every second multiple times
var slideIndex = [];
var childrens = [];
$(".rotating_block").each(function (index) {
slideIndex[index] = 0;
childrens[index] = $(this).find(".block");
function carousel(children, slideIndex) {
console.log('hello world');
for (let i = 0; i < children.length; i++) {
$(children[i]).hide();
}
if (slideIndex > children.length) {
slideIndex = 1;
}
$(children[slideIndex - 1]).show();
setTimeout(carousel(children, slideIndex), 5000);
}
carousel(childrens[index], slideIndex[index]);
});
link to pen
The problem is that you are passing the function carousel with parameters which is actually calling the function.
setTimeout(carousel(children, slideIndex), 5000);
To solve this, pass an arrow function to setTimeout
setTimeout(() => carousel(children, slideIndex), 5000);
EDIT
Also, you forgot to increment the slideIndex value:
var slideIndex = [];
var childrens = [];
$(".rotating_block").each(function (index) {
slideIndex[index] = 0;
childrens[index] = $(this).find(".block");
function carousel(children, slideIndex) {
console.log(slideIndex);
for (let i = 0; i < children.length; i++) {
$(children[i]).hide();
}
//////////////////////
slideIndex++;
//////////////////////
if (slideIndex > children.length) {
slideIndex = 1;
}
$(children[slideIndex - 1]).show();
setTimeout(() => carousel(children, slideIndex), 5000);
}
carousel(childrens[index], slideIndex[index]);
});
what im trying to do is to make my slideshow do some animation while changing photos, i have the very basic slide show
<div class="slider-wrapper">
<div class="slider-wrapper-item " style="background-image: url(/wp-content/themes/ETL/img/slider-image-1.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-2.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-3.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-4.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-5.jpg);"></div>
<div class="slider-play-icon"><img src="/wp-content/themes/ETL/img/play-arrow-grey.png"></div>
this is the js
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("slider-wrapper-item");
console.log("slides",slides);
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 2 seconds
}
</script>
i have found an article on how to make the fade animation but its complicated and i have no luck with it https://cobwwweb.com/simple-looping-crossfade-image-slideshow
this is the exact animation i want.
if you want animation you can't use display none or block because display property does not support transition.
don't use this
slides[i].style.display = "none" and slides[slideIndex-1].style.display = "block";
instead of that make class for animation and add that class and remove whenever you want.
for example
.addAnimation{
// write your code here
}
.removeAnimation{
// write your code here
}
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).
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.
I am new to this and have a quick question. I have a very simple slideshow on my home page. The problem I am having is the first second or so of loading the page, the slideshow images show up 1 on top of the other. Once the first second or so of loading the page is over, everything works fine. Here is my code for the javascript:
<script type="text/javascript" language="javascript">
window.onload = function () {
var rotator = document.getElementById("slideshow_content");
var images = rotator.getElementsByTagName("img");
for (var i = 1; i < images.length; i++) {
images[i].style.display = "none";
}
var counter = 1;
setInterval(function () {
for (var i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
images[counter].style.display = "block";
counter++;
if (counter == images.length) {
counter = 0;
}
}, 3000);
};
</script>
Here is the body code:
<div id="slideshow">
<div id="slideshow_content" style="padding-top:10px; padding-bottom:10px;">
<img alt="" src="/images/slide1.jpg" />
<img alt="" src="/images/slide2.jpg" />
</div>
</div>
Here is the CSS for the 2 divs:
#slideshow {position:relative; top:0; left:0; max-width:1680px; height:342px; margin:0 auto; padding:0; background-color:#070707;}
#slideshow_content {width:960px; max-height:322px; margin:0 auto; padding:0;}
How would you recommend fixing this?
I would set the CSS to hide the slideshow on page load, and then when the slideshow starts it could be unhidden.
This would also mean that if someone had javascript disabled they wouldn't get a weird looking pile of images.
Alternatively you could hide all but the first image using CSS, so that even if someone had javascript disabled they would see the first image.