change speed of transition in scrolling sideshow - javascript

I found some code for a scrolling slideshow which I want to use and I figured out how to alter the duration of each slide as it comes to rest, but not how to change the duration of the actual transition (the part where the slide moves in and out. I have pasted the code here. Can someone tell me where in the js I need to change values? Also, can this same effect be achieved using just css, and if so, can someone explain how? Ideally I would like to use just css since I think it would be simpler and I am more familiar with it. Thank you.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
width: 960px;
margin: 0 auto 0;
}
</style>
</head>
<body>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides w3-animate-left" src="https://www.bartonlewis.com/_imagesfilm/23rd_st.jpg" alt="Mountain" style="width:100%">
<img class="mySlides w3-animate-left" src="https://www.bartonlewis.com/_imagesfilm/blue.jpg" style="width:100%">
<img class="mySlides w3-animate-left" src="https://www.bartonlewis.com/_imagesfilm/broken_guru.jpg" style="width:100%">
<img class="mySlides w3-animate-left" src="https://www.bartonlewis.com/_imagesfilm/church_ave.jpg" style="width:100%">
</div>
<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, 2500);
}
</script>
</body>
</html>

It looks like the actual fade/slide in transition effect is already being handled by CSS animations, via this style:
.w3-animate-left {
position: relative;
animation: animateleft 0.4s;
}
If you duplicate that style locally you should be able to override it and increase the duration, e.g. https://codepen.io/anon/pen/JrJeoB

in Javascript you need need to change,
setTimeout(carousel, 2500);
This Javascript function is actually Calling carousel
function every 2500 that is 2.5 Seconds.
you can increase/decrease your 2500 values which is 2.5 Seconds as you like .
And for 1 Seconds you need to change the value to 1000 .
and for css
you can USE . transition delay 2s

Related

How do I add transition/animation to slider of images?

How to add a transition effect when the image changes?
When the array loops through images, how do I add a transition so that its more smooth.
var i = 0;
var images = [];
var time = 3000;
images[0] = 'test.jpg';
images[1] = 'test1.jpg';
images[2] = 'test2.jpg';
function changeImg() {
document.slide.src = images[i];
if(i < images.length - 1) {
i++
} else {
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
My easiest way to do it is putting all the images into 1 wrapper.
Then use loop to set active image by element index.
Something like this
<style>
.wrapper { position: relative; }
.wrapper img {
opacity: 0;
visibility: hidden;
transition: 0.5s opacity;
position: absolute;
}
.wrapper img.active {
opacity: 1;
visibility: visible;
position: relative;
}
</style>
<div class="wrapper">
<img src={images[0]} />
<img src={images[1]} />
<img src={images[2]} />
<img src={images[3]} />
</div>
What you are asking for is called cross-fading, this is a possible duplicate of How can I smoothly transition CSS background images?
But a more detailed guide that worked for me in the past can be found here.
http://css3.bradshawenterprises.com/cfimg/
Keep in mind that you might have to take browser compatibility into consideration if you go the CSS route. Properties such as the -webkit CSS extension is just one of many.
One of the easiest ways I found is using w3.css.
In your html code add these lines.
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<img class="w3-animate-fading" name="slide" src="" width="800" />
</body>
</html>
The class parameter in your image tag will call the predefined css animations deom w3.css file.
There are many more options such as slide right, slide left etc. You can view them all here
Codepen Demo

HTML image slideshow shows a blank screen

I do not have much experience with html but I need to setup a image slideshow on my site. I found this bit of code on w3schools but after adding media query it shows a blank screen in between the images. How do i get rid of it and have just back to back images only? Thanks
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
#media only screen and (min-width: 480px) {
#web {
display: none;
}
}
#media only screen and (max-width: 480px) {
#mobile {
display: none;
}
}
</style>
</head>
<body>
<div class="w3-content w3-section" id="web">
<img class="mySlides" src="https://www.91-img.com/pictures/126849-v6-honor-10-mobile-phone-large-1.jpg" style="width:100%">
<img class="mySlides" src="https://static.toiimg.com/photo/64428999/Vivo-NEX.jpg" style="width:100%">
</div>
<div class="w3-content w3-section" id="mobile">
<img class="mySlides" src="https://japan-magazine.jnto.go.jp/jnto2wm/wp-content/uploads/1603_iwate_main.jpg" style="width:100%">
<img class="mySlides" src="https://image.shutterstock.com/image-photo/panoramic-view-idyllic-mountain-scenery-260nw-622792952.jpg" style="width:100%">
</div>
<script>
var myIndex = 1;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 1; 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);
}
</script>
</body>
</html>
All indexes start with 0. So change initial index in your for loop to 0 and get it work. Also you have to change classNames for your images in the mobile version (it's why you got blank pages after a few images shown) and you implemented wrong media queries.
var myIndex = 0;
carousel();
function carousel() {
var i;
if(screen.width <= 480){
var x = document.getElementsByClassName("mySlides_mobile");
}else{
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);
}
.mySlides, .mySlides_mobile {
display:none;
}
#media only screen and (max-width: 480px) {
#web {
display: none;
}
}
#media only screen and (min-width: 480px) {
#mobile {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-content w3-section" id="web">
<img class="mySlides" src="https://www.91-img.com/pictures/126849-v6-honor-10-mobile-phone-large-1.jpg" style="width:100%">
<img class="mySlides" src="https://static.toiimg.com/photo/64428999/Vivo-NEX.jpg" style="width:100%">
</div>
<div class="w3-content w3-section" id="mobile">
<img class="mySlides_mobile" src="https://japan-magazine.jnto.go.jp/jnto2wm/wp-content/uploads/1603_iwate_main.jpg" style="width:100%">
<img class="mySlides_mobile" src="https://image.shutterstock.com/image-photo/panoramic-view-idyllic-mountain-scenery-260nw-622792952.jpg" style="width:100%">
</div>
</body>
</html>

W3 slideshow implementation doesn't work correctly

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_fading
Using the link above, you can see an example of an animated fading slideshow that I am trying to implement into my website. However, when I copy the exact code and use it for me, it displays the images stacked on top of one another as one image, and just fades it in and out to the same image (made up of all of the images).
Any idea why this is happening or another source where I can get an animated slideshow from? The only other thing to take into account is that in the styles file, everything referring to 'webkit' is underlined in red. I am running in chrome though so I don't think that is the issue.
Here is the code:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-content w3-section" style="max-width:500px">
<p>The w3-animate-fading class animates an element in and out (takes about 10 seconds).</p>
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_01.jpg" style="width:100%" alt="image1">
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_02.jpg" style="width:100%" alt="image2">
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_03.jpg" style="width:100%" alt="image3">
<img class="mySlides w3-animate-fading" src="../../assets/img/img_rr_04.jpg" style="width:100%" alt="image4">
</div>
<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, 9000);
}
</script>
</body>
</html>
This is exactly the code on the website, and I downloaded the images they use, so why is it that I can't get it to work?
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-content w3-section" style="max-width:500px">
<p>The w3-animate-fading class animates an element in and out (takes about 10 seconds).</p>
<img class="mySlides w3-animate-fading" src="img_rr_01.jpg" style="width:100%" alt="image1">
<img class="mySlides w3-animate-fading" src="img_rr_02.jpg" style="width:100%" alt="image2">
<img class="mySlides w3-animate-fading" src="img_rr_03.jpg" style="width:100%" alt="image3">
<img class="mySlides w3-animate-fading" src="img_rr_04.jpg" style="width:100%" alt="image4">
</div>
<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, 9000);
}
</script>
</body>
</html>
Here its working correctly. It may me something else that would be causing some problem.

Cannot read property 'style' of undefined at slideshow ERROR

I am new to javascript and I am trying to create a slideshow inside divs. However when I do it give me the error message
Uncaught TypeError: Cannot read property 'style' of undefined
at slideshow (script.js:14)
at script.js:1
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript" src="script.js"></script>
<div id="wrapper">
<div id="content">
<div id="top">
<img class="slide" src="1.png" style="width:100%">
<img class="slide" src="2.png" style="width:100%">
</div>
<div id="left">
</div>
<div id="middle">
</div>
<div id="right">
</div>
</div>
</div>
</body>
</html>
This is my CSS code:
.slide {
display:none;
}
This is my Javascript code:
slideshow();
function slideshow() {
var index = 0;
var i;
var slides = document.getElementsByClassName("slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
index++;
if (index > slides.length) {
index = 1;
}
slides[index-1].style.display = "block";
setTimeout(slideshow, 2000);
}
I think the problem is that the javascript cannot access the images when they are in the div.
1. You are placing the <script> file before the slides. So when your script is executed the first time, the markup does not yet exist in DOM.
Because your slides do not exist, after the initial for (which does nothing), you get to this line
slides[index-1].style.display = "block";
But slides[0] does not exist, so it doesn't have a .style property.
2. You are reassigning the value of 0 to index each time you re-run the function, so it will always show the same slide: the first.
(3.) You chose display as the method to show/hide your slides, which is not animatable. Therefore, your slides will change abruptly, there's no possibility of transition.
(4.) In addition, just as a matter of personal choice, I prefer document.querySelectorAll('.slide') to document.getElementsByClassName("slide"). I don't know exactly why. Probably because it's shorter and maybe because it allows a more flexible selector syntax (classes, ids. attributes or any other valid css selector).

how to show Image slider for long time

I am trying to show the image slider for long time where I already used timeout for every image to display.
But now I want to image slider in this case also:
1.The system should not go the sleep mode if we are not using the system, it
should show the image slider until I close the browser.
2.The system should not go to the screensaver mode, it should show the image
slider until I close the browser.
code:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mySlides
{
display:none;
}
</style>
<body>
<h2 class="w3-center"></h2>
<div class="w3-content w3-section" style=""width='962px';height='565px';frameborder='0'"">
<img class="mySlides" src="Chrysanthemum.jpg" style="width='100%">
<img class="mySlides" src="Desert.jpg" style="width:100%">
<img class="mySlides" src="Hydrangeas.jpg" style="width:100%">
</div>
<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);
}
</script>
</body>
</html>

Categories

Resources