Mitch Mitch - 1 month ago 12
CSS Question

Slide show with different slide times

Right now i'm trying to make a kind of slide show to display Images and Videos one by one.

My code so far looks like this:

Html:



<div id="div1" class="hidden">
<video autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
<div id="div2" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
<div id="div3" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
<div id="div4" class="hidden">
<video autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
<div id="div5" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
<div id="div6" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
<div id="div7" class="hidden">
<video autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
<div id="div8" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>
<div id="div9" class="hidden"><img src="http://www.w3schools.com/css/trolltunga.jpg" /></div>


This code collects 9 "slides". 3 videos and 7 images.
I want to show these one by one on the web page (each displaying for a different time).

I do this by:

Script:



<script type="text/javascript">
//show first slide
function showIt() {
document.getElementById("div1").className = "shown";
}
setTimeout("showIt()", 0000);

//Start fading first slide
function hideIt() {
document.getElementById("div1").className = "fade";
}
setTimeout("hideIt()", 16000);

//Start showing 2nd slide
function showIt2() {
document.getElementById("div2").className = "shown";
}
setTimeout("showIt2()", 16500);

//Remove the first slide
function removeIt() {
document.getElementById("div1").className = "hidden";
}
setTimeout("removeIt()", 17000);

//Start fading second slide
function hideIt2() {
document.getElementById("div2").className = "fade";
}
setTimeout("hideIt2()", 27000);

//Remove the second slide
function removeIt2() {
document.getElementById("div1").className = "hidden";
}
setTimeout("removeIt2()", 28000);

//When end is reached, reload page
setTimeout(window.location.reload.bind(window.location), 28000);
</script>


And the Css:



img {
max-width: 78%;
position:absolute;
margin-left: 10.5%;
}

video {
max-width: 78%;
position:absolute;
margin-left: 10.5%;
}

.hidden{
visibility: hidden;
}

.fade{
-webkit-animation: fadeout 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadeout 1s; /* Firefox < 16 */
-ms-animation: fadeout 1s; /* Internet Explorer */
-o-animation: fadeout 1s; /* Opera < 12.1 */
animation: fadeout 1s;
}

@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}


.shown{
-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s; /* Firefox < 16 */
-ms-animation: fadein 1s; /* Internet Explorer */
-o-animation: fadein 1s; /* Opera < 12.1 */
animation: fadein 1s;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}


As you can see, i'm only displaying 2 slides right now. while i have 9 ready. (in total i have got 40+). If i keep going the way i go right now. i will get tons and tons of code...

Question:




Is there a way to make this more compact/smaller?

I searched the internet for slideshows and find things. However i want
to set the time to be seen for each slide. Since some slides need to
be displayed 20 seconds and other 10.


Also i made a fiddle, but it is not working in there...
https://jsfiddle.net/a10yarxj/

Answer

I understand, in your question, that you want to have full control over the slideshow timings.
The display time...
And I added the possibility for fade in/out times to be different aswell.

The slides will contain image or video, wich may be longer than your timing... Letting the sound continue while other slides are displayed.

I suppose that the image/video order may (and will!) change over time...
And that the slide amount is variable.

So I made this small script that you will not have to modify each time you change the slideshow content.
All params are provided in the HTML:

  • data-timing (time in seconds)
  • data-fadein (time in seconds)
  • data-fadeout (time in seconds)
  • data-videopause (true/false)

For the 3 first parameters, if the value is missing, default time is applyed and a «NOTICE» is shown in console.log().
For the last, if it is missing, it will be considered false.

I used jQuery .animate() instead of CSS @keyframes because the effect is easier to achieve this way, since only the opacity is affected.

The slideshow is looping... So no need for a new page load at the end.

Here it is, in the below snippet and on CodePen:

var slides = $(".slide");
var lastSlideIndex = slides.length-1;
var currentSlideIndex = 0;
var defaultTiming = 1000;
var defaultFadeInTime = 1000;
var defaultFadeOutTime = 1000;



// Show slide function
function showSlide() {
    
	var thisSlide = slides.eq(currentSlideIndex);
	
	// Delays
	var timing = parseFloat(thisSlide.attr("data-timing")) * 1000;	// Transform seconds in milliseconds
	if(isNaN(timing)){timing=defaultTiming; console.log("NOTICE: ----------- data-timing is missing, using default.");}
	var fadeInTime = parseFloat(thisSlide.attr("data-fadein")) * 1000;
	if(isNaN(fadeInTime)){fadeInTime=defaultFadeInTime; console.log("NOTICE: ----------- data-fadein is missing, using default.");}
	var fadeOutTime = parseFloat(thisSlide.attr("data-fadeout")) * 1000;
	if(isNaN(fadeOutTime)){fadeOutTime=defaultFadeOutTime; console.log("NOTICE: ----------- data-fadeout is missing, using default.");}
	
    console.log("Slide: "+currentSlideIndex+":\n Display time: "+timing+" millisec.\n Fadein: "+fadeInTime+" millisec.\n Fadeout: "+fadeOutTime+" millisec.");
    thisSlide.animate({"opacity":1},fadeInTime);
    
	// If this slide contains a video
	if(slides.eq(currentSlideIndex).find("video").length > 0){
		
		// Prevents more than 1 video to play at the same time
		$("video").each(function(){
			console.log("All video paused.")
			$(this)[0].pause();
		});
		
		// Play this video from the start
		var thisVideo = slides.eq(currentSlideIndex).find("video")[0];
		thisVideo.currentTime = 0;
		console.log("Video playing.");
		thisVideo.play()
	}
	
    // Prepare for next slide
    currentSlideIndex++;
	
	// Reset to slide 0 if last was reached
    if(currentSlideIndex>lastSlideIndex){
        currentSlideIndex=0;
    }
    
    setTimeout(function(){
        // Fade out previous slide
		var previousSlideIndex = currentSlideIndex-1;
		
		
		// If previous was last slide
		if(previousSlideIndex == -1){
			previousSlideIndex = lastSlideIndex;
		}
		
		// If previous slide was set to pause
		if(slides.eq(previousSlideIndex).attr("data-videopause")=="true"){
			console.log("Video has been paused.");
			slides.eq(previousSlideIndex).find("video")[0].pause();
		}
		
		slides.eq(previousSlideIndex).animate({"opacity":0},fadeOutTime);
        showSlide();
    }, timing);
}

// Init
showSlide();
img {
    max-width: 78%;
    position:absolute;
    margin-left: 10.5%;
}

video {
    max-width: 78%;
    position:absolute;
    margin-left: 10.5%;
}

.slide{
    opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide" data-timing=4 data-fadein=0.5 data-fadeout=1 data-videopause=false>
    <video>
        <source src="https://www.bessetteweb.com/SO/39920322/video-1.mp4" type="video/mp4">
    </video>
</div>
<div class="slide" data-timing=4 data-fadein=0.5 data-fadeout=0.5><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Fritz_von_Wille_0071.jpg" /></div>
<div class="slide" data-timing=2 data-fadein=0.5 data-fadeout=1><img src="https://upload.wikimedia.org/wikipedia/commons/f/f3/Truncated_View_of_the_Broekzijdse_Molen_on_the_Gein_by_Piet_Mondrian.jpg" /></div>
<div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=2 data-videopause=true>
    <video>
        <source src="https://www.bessetteweb.com/SO/39920322/video-2.mp4" type="video/mp4">
    </video>
</div>
<div class="slide" data-timing=2 data-fadein=0.5 data-fadeout=3><img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Walter_Leistikow_-_Liebesinsel_(1905).jpg" /></div>
<div class="slide" data-timing=4 data-fadein=0.5 data-fadeout=1><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/%D0%92%D0%B5%D1%87%D0%B0%D1%80_%D0%90._%D0%93%D0%B0%D1%80%D0%B0%D1%9E%D1%81%D0%BA%D1%96.jpg" /></div>
<div class="slide" data-timing=6 data-fadein=0.5 data-fadeout=0.5 data-videopause=true>
    <video>
        <source src="https://www.bessetteweb.com/SO/39920322/video-3.mp4" type="video/mp4">
    </video>
</div>
<div class="slide" data-timing=3 data-fadein=0.5 data-fadeout=1><img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Morris21.jpg" /></div>
<div class="slide" data-timing=2 data-fadein=0.5 data-fadeout=2><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Fritz_von_Wille_0071.jpg" /></div>



<!-- ---------------------------
Copyright issues:
Images used here are labelled for reuse and videos were made by me for this example.

The Google image search I used: https://www.google.ca/search?q=paysage&espv=2&biw=1600&bih=1110&tbs=islt:svga,isz:ex,iszw:500,iszh:400&tbm=isch&source=lnt#tbs=islt:svga%2Cisz:ex%2Ciszw:500%2Ciszh:400%2Csur:fc&tbm=isch&q=landscape+-flickr&imgrc=pqMMLvfhjtbSuM%3A

 -->

Comments