change speed of transition in scrolling sideshow
Question
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>
2 answers
solution1
0 ACCPTED 2017-09-30 01:55:28
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, eg https://codepen.io/anon/pen/JrJeoB
solution2
0 2017-09-30 02:01:56
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.