Skip to content

Instantly share code, notes, and snippets.

@damiencarbery

damiencarbery/css-slider.php

Last active September 21, 2020 09:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save damiencarbery/cdd0a1c4e743e5037293f9486c6d9f5d to your computer and use it in GitHub Desktop.
Save damiencarbery/cdd0a1c4e743e5037293f9486c6d9f5d to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS slider - proof of concept - A slider using only CSS transitions. https://www.damiencarbery.com/2020/09/pure-css-slider-proof-of-concept/
Raw
css-slider.php
<!DOCTYPE html>
<html>
<head>
<title>CSS fade in/out slider</title>
</head>
<?php
$slides = array( '<div><img src="http://placekitten.com/g/612/612"/></div>',
'<div><img src="https://unsplash.it/id/237/612/612"/></div>',
'<div><img src="https://unsplash.it/id/400/612/612"/></div>',
'<div><img src="https://unsplash.it/id/181/612/612"/></div>',
'<div><img src="https://unsplash.it/id/100/612/612"/></div>',
);
$fade_time = 1; // Seconds fade in.
$show_time = 4; // Show for this many seconds.
$slide_count = count( $slides );
$slideshow_length = $slide_count * ( $fade_time + $show_time );
$show_time_end = intval( $slide_count * 100 / $slideshow_length );
$fade_percent = intval( $fade_time * $show_time_end / ($fade_time + $show_time) );
?>
<style>
.slider { position: relative; /*height: 612px; height: 612px;*/ } /* May need to set height and width. */
.slider > div { position: absolute; top: 0; left: 0; opacity: 0; }
/* <?php echo $fade_time + $show_time; ?>s per slide x <?php echo $slide_count; ?> = <?php echo $slideshow_length; ?>s animation. */
@keyframes slide_animation {
0% {opacity: 0;} /* Start hidden. */
<?php echo $fade_percent; ?>% {opacity: 1;} /* Fade in over <?php echo $fade_time; ?> seconds. */
<?php echo $show_time_end; ?>% {opacity: 1; transform: scale(1, 1); } /* Show for <?php echo $show_time; ?> seconds. */
/* Overlap fade out with fade in of next slide. Add a scale as eye candy. */
<?php echo $show_time_end + $fade_percent; ?>% {opacity: 0; transform: scale(0, 0); }
}
.slider > div { animation-name: slide_animation; animation-duration: <?php echo $slideshow_length; ?>s; animation-iteration-count: infinite; }
<?php
// Delete second and subsequent slides until after preceeding slide animation finished.
for ($i = 2; $i <= $slide_count; $i++) {
printf( '.slider > div:nth-child(%d) { animation-delay: %ds; }%s', $i, ($fade_time + $show_time) * ($i - 1), "\n" );
}
?>
</style>
<body>
<div id="myslider" class="slider">
<?php echo implode( "\n", $slides ); ?>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment