Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Last active July 1, 2017 15:20
Show Gist options
  • Save feo52/346b530cf7daf8369092 to your computer and use it in GitHub Desktop.
Save feo52/346b530cf7daf8369092 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Slider
Raw
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>Pure CSS Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
use left<br>
<div class="slider">
<img class="sliderL" alt src="http://placehold.jp/ff0000/ffffff/160x120.png">
<img class="sliderL" alt src="http://placehold.jp/00ff00/ffffff/160x120.png">
<img class="sliderL" alt src="http://placehold.jp/0000ff/ffffff/160x120.png">
<img class="sliderL" alt src="http://placehold.jp/ffff00/ffffff/160x120.png">
<img class="sliderL" alt src="http://placehold.jp/00ffff/ffffff/160x120.png">
<img class="sliderL" alt src="http://placehold.jp/ff00ff/ffffff/160x120.png">
</div>
<div class="slider">
<a href="#" class="sliderL"><img alt src="http://placehold.jp/ff0000/ffffff/160x120.png"></a>
<a href="#" class="sliderL"><img alt src="http://placehold.jp/00ff00/ffffff/160x120.png"></a>
<a href="#" class="sliderL"><img alt src="http://placehold.jp/0000ff/ffffff/160x120.png"></a>
<a href="#" class="sliderL"><img alt src="http://placehold.jp/ffff00/ffffff/160x120.png"></a>
<a href="#" class="sliderL"><img alt src="http://placehold.jp/00ffff/ffffff/160x120.png"></a>
<a href="#" class="sliderL"><img alt src="http://placehold.jp/ff00ff/ffffff/160x120.png"></a>
</div>
<br>
<br>
use top<br>
<div class="slider">
<img class="sliderT" alt src="http://placehold.jp/ff0000/ffffff/160x120.png">
<img class="sliderT" alt src="http://placehold.jp/00ff00/ffffff/160x120.png">
<img class="sliderT" alt src="http://placehold.jp/0000ff/ffffff/160x120.png">
<img class="sliderT" alt src="http://placehold.jp/ffff00/ffffff/160x120.png">
<img class="sliderT" alt src="http://placehold.jp/00ffff/ffffff/160x120.png">
<img class="sliderT" alt src="http://placehold.jp/ff00ff/ffffff/160x120.png">
</div>
<div class="slider">
<a href="#" class="sliderT"><img alt src="http://placehold.jp/ff0000/ffffff/160x120.png"></a>
<a href="#" class="sliderT"><img alt src="http://placehold.jp/00ff00/ffffff/160x120.png"></a>
<a href="#" class="sliderT"><img alt src="http://placehold.jp/0000ff/ffffff/160x120.png"></a>
<a href="#" class="sliderT"><img alt src="http://placehold.jp/ffff00/ffffff/160x120.png"></a>
<a href="#" class="sliderT"><img alt src="http://placehold.jp/00ffff/ffffff/160x120.png"></a>
<a href="#" class="sliderT"><img alt src="http://placehold.jp/ff00ff/ffffff/160x120.png"></a>
</div>
<br>
<br>
use translateX<br>
<div class="slider">
<img class="sliderX" alt src="http://placehold.jp/ff0000/ffffff/160x120.png">
<img class="sliderX" alt src="http://placehold.jp/00ff00/ffffff/160x120.png">
<img class="sliderX" alt src="http://placehold.jp/0000ff/ffffff/160x120.png">
<img class="sliderX" alt src="http://placehold.jp/ffff00/ffffff/160x120.png">
<img class="sliderX" alt src="http://placehold.jp/00ffff/ffffff/160x120.png">
<img class="sliderX" alt src="http://placehold.jp/ff00ff/ffffff/160x120.png">
</div>
<div class="slider">
<a href="#" class="sliderX"><img alt src="http://placehold.jp/ff0000/ffffff/160x120.png"></a>
<a href="#" class="sliderX"><img alt src="http://placehold.jp/00ff00/ffffff/160x120.png"></a>
<a href="#" class="sliderX"><img alt src="http://placehold.jp/0000ff/ffffff/160x120.png"></a>
<a href="#" class="sliderX"><img alt src="http://placehold.jp/ffff00/ffffff/160x120.png"></a>
<a href="#" class="sliderX"><img alt src="http://placehold.jp/00ffff/ffffff/160x120.png"></a>
<a href="#" class="sliderX"><img alt src="http://placehold.jp/ff00ff/ffffff/160x120.png"></a>
</div>
<br>
<br>
use translateY<br>
<div class="slider">
<img class="sliderY" alt src="http://placehold.jp/ff0000/ffffff/160x120.png">
<img class="sliderY" alt src="http://placehold.jp/00ff00/ffffff/160x120.png">
<img class="sliderY" alt src="http://placehold.jp/0000ff/ffffff/160x120.png">
<img class="sliderY" alt src="http://placehold.jp/ffff00/ffffff/160x120.png">
<img class="sliderY" alt src="http://placehold.jp/00ffff/ffffff/160x120.png">
<img class="sliderY" alt src="http://placehold.jp/ff00ff/ffffff/160x120.png">
</div>
<div class="slider">
<a href="#" class="sliderY"><img alt src="http://placehold.jp/ff0000/ffffff/160x120.png"></a>
<a href="#" class="sliderY"><img alt src="http://placehold.jp/00ff00/ffffff/160x120.png"></a>
<a href="#" class="sliderY"><img alt src="http://placehold.jp/0000ff/ffffff/160x120.png"></a>
<a href="#" class="sliderY"><img alt src="http://placehold.jp/ffff00/ffffff/160x120.png"></a>
<a href="#" class="sliderY"><img alt src="http://placehold.jp/00ffff/ffffff/160x120.png"></a>
<a href="#" class="sliderY"><img alt src="http://placehold.jp/ff00ff/ffffff/160x120.png"></a>
</div>
<br>
<br>
use opacity<br>
<div class="slider">
<img class="sliderO" alt src="http://placehold.jp/ff0000/ffffff/160x120.png">
<img class="sliderO" alt src="http://placehold.jp/00ff00/ffffff/160x120.png">
<img class="sliderO" alt src="http://placehold.jp/0000ff/ffffff/160x120.png">
<img class="sliderO" alt src="http://placehold.jp/ffff00/ffffff/160x120.png">
<img class="sliderO" alt src="http://placehold.jp/00ffff/ffffff/160x120.png">
<img class="sliderO" alt src="http://placehold.jp/ff00ff/ffffff/160x120.png">
</div>
<div class="slider">
<a href="#" class="sliderO"><img alt src="http://placehold.jp/ff0000/ffffff/160x120.png"></a>
<a href="#" class="sliderO"><img alt src="http://placehold.jp/00ff00/ffffff/160x120.png"></a>
<a href="#" class="sliderO"><img alt src="http://placehold.jp/0000ff/ffffff/160x120.png"></a>
<a href="#" class="sliderO"><img alt src="http://placehold.jp/ffff00/ffffff/160x120.png"></a>
<a href="#" class="sliderO"><img alt src="http://placehold.jp/00ffff/ffffff/160x120.png"></a>
<a href="#" class="sliderO"><img alt src="http://placehold.jp/ff00ff/ffffff/160x120.png"></a>
</div>
</body>
</html>
Raw
style.css
/* ------------------------------------------------------------------------- */
/* Pure CSS Slider */
/* ------------------------------------------------------------------------- */
/* ---------------------------------------------------------- */
/* Container */
/* ---------------------------------------------------------- */
.slider { display: inline-block; position: relative; overflow: hidden; width: 160px; height: 120px; }
.slider > a { width: 100%; height: 100%; }
.slider img { width: 100%; height: auto; }
/* ---------------------------------------------------------- */
/* Initial */
/* ---------------------------------------------------------- */
.slider .sliderL { position: absolute; left: -100%; }
.slider .sliderT { position: absolute; top: -100%; }
.slider .sliderX { position: absolute; transform: translateX(-100%); }
.slider .sliderY { position: absolute; transform: translateY(-100%); }
.slider .sliderO { position: absolute; opacity: 0; visibility: hidden; }
/* ---------------------------------------------------------- */
/* Animation */
/* ---------------------------------------------------------- */
.slider .sliderL:nth-of-type(1) { animation: sliderL 18s ease -1s infinite; }
.slider .sliderL:nth-of-type(2) { animation: sliderL 18s ease 2s infinite; }
.slider .sliderL:nth-of-type(3) { animation: sliderL 18s ease 5s infinite; }
.slider .sliderL:nth-of-type(4) { animation: sliderL 18s ease 8s infinite; }
.slider .sliderL:nth-of-type(5) { animation: sliderL 18s ease 11s infinite; }
.slider .sliderL:nth-of-type(6) { animation: sliderL 18s ease 14s infinite; }
.slider .sliderT:nth-of-type(1) { animation: sliderT 18s ease -1s infinite; }
.slider .sliderT:nth-of-type(2) { animation: sliderT 18s ease 2s infinite; }
.slider .sliderT:nth-of-type(3) { animation: sliderT 18s ease 5s infinite; }
.slider .sliderT:nth-of-type(4) { animation: sliderT 18s ease 8s infinite; }
.slider .sliderT:nth-of-type(5) { animation: sliderT 18s ease 11s infinite; }
.slider .sliderT:nth-of-type(6) { animation: sliderT 18s ease 14s infinite; }
.slider .sliderX:nth-of-type(1) { animation: sliderX 18s ease -1s infinite; }
.slider .sliderX:nth-of-type(2) { animation: sliderX 18s ease 2s infinite; }
.slider .sliderX:nth-of-type(3) { animation: sliderX 18s ease 5s infinite; }
.slider .sliderX:nth-of-type(4) { animation: sliderX 18s ease 8s infinite; }
.slider .sliderX:nth-of-type(5) { animation: sliderX 18s ease 11s infinite; }
.slider .sliderX:nth-of-type(6) { animation: sliderX 18s ease 14s infinite; }
.slider .sliderY:nth-of-type(1) { animation: sliderY 18s ease -1s infinite; }
.slider .sliderY:nth-of-type(2) { animation: sliderY 18s ease 2s infinite; }
.slider .sliderY:nth-of-type(3) { animation: sliderY 18s ease 5s infinite; }
.slider .sliderY:nth-of-type(4) { animation: sliderY 18s ease 8s infinite; }
.slider .sliderY:nth-of-type(5) { animation: sliderY 18s ease 11s infinite; }
.slider .sliderY:nth-of-type(6) { animation: sliderY 18s ease 14s infinite; }
.slider .sliderO:nth-of-type(1) { animation: sliderO 18s ease -1s infinite; }
.slider .sliderO:nth-of-type(2) { animation: sliderO 18s ease 2s infinite; }
.slider .sliderO:nth-of-type(3) { animation: sliderO 18s ease 5s infinite; }
.slider .sliderO:nth-of-type(4) { animation: sliderO 18s ease 8s infinite; }
.slider .sliderO:nth-of-type(5) { animation: sliderO 18s ease 11s infinite; }
.slider .sliderO:nth-of-type(6) { animation: sliderO 18s ease 14s infinite; }
/* ---------------------------------------------------------- */
/* Keyframes */
/* ---------------------------------------------------------- */
@keyframes sliderL {
0% { left: -100%; }
5.55556% { left: 0%; }
16.66667% { left: 0%; }
22.22222% { left: 100%; }
100% { left: 100%; } }
@keyframes sliderT {
0% { top: -100%; }
5.55556% { top: 0%; }
16.66667% { top: 0%; }
22.22222% { top: 100%; }
100% { top: 100%; } }
@keyframes sliderX {
0% { transform: translateX(-100%); }
5.55556% { transform: translateX( 0%); }
16.66667% { transform: translateX( 0%); }
22.22222% { transform: translateX( 100%); }
100% { transform: translateX( 100%); } }
@keyframes sliderY {
0% { transform: translateY(-100%); }
5.55556% { transform: translateY( 0%); }
16.66667% { transform: translateY( 0%); }
22.22222% { transform: translateY( 100%); }
100% { transform: translateY( 100%); } }
@keyframes sliderO {
0% { opacity: 0; visibility: hidden; }
5.55556% { opacity: 1; visibility: visible; }
16.66667% { opacity: 1; visibility: visible; }
22.22222% { opacity: 0; visibility: hidden; }
100% { opacity: 0; visibility: hidden; } }
/* ---------------------------------------------------------- */
/* Reference */
/* Minimal pure css slider */
/* https://codepen.io/eltonkamami/pen/hjBrE */
/* ---------------------------------------------------------- */
Raw
style.scss
/* ------------------------------------------------------------------------- */
/* Pure CSS Slider */
/* ------------------------------------------------------------------------- */
// -----------------------------------------------------------//
// Settings //
// ---------------------------------------------------------- //
$iImage : 6; // the number of images
$iImageTime: 3; // display time of image ( one image )
$iTotalTime: $iImageTime * $iImage; // display time of total ( all image )
$iShiftTime: 1; // slide ( fade ) time
$iSlideInit: 1; // 0:Hide / 1:Show
$iImageYoko: 160px;
$iImageTate: 120px;
$strSliderClassName: ".slider";
$strSliderKeyframes: "slider";
/* ---------------------------------------------------------- */
/* Container */
/* ---------------------------------------------------------- */
#{ $strSliderClassName } {
display: inline-block;
position: relative;
overflow: hidden;
width: #{ $iImageYoko };
height: #{ $iImageTate };
}
#{ $strSliderClassName } > a {
width: 100%;
height: 100%;
}
#{ $strSliderClassName } img {
width: 100%;
height: auto;
}
/* ---------------------------------------------------------- */
/* Initial */
/* ---------------------------------------------------------- */
#{ $strSliderClassName } #{ $strSliderClassName }L { position: absolute; left:-100%; }
#{ $strSliderClassName } #{ $strSliderClassName }T { position: absolute; top: -100%; }
#{ $strSliderClassName } #{ $strSliderClassName }X { position: absolute; transform: translateX(-100%); }
#{ $strSliderClassName } #{ $strSliderClassName }Y { position: absolute; transform: translateY(-100%); }
#{ $strSliderClassName } #{ $strSliderClassName }O { position: absolute; opacity: 0; visibility: hidden; }
/* ---------------------------------------------------------- */
/* Animation */
/* ---------------------------------------------------------- */
@for $i from 1 to $iImage + 1 {
#{ $strSliderClassName } #{ $strSliderClassName }L:nth-of-type(#{$i}) {
animation: #{ $strSliderKeyframes }L #{ $iTotalTime }s ease #{ $iImageTime * ($i - 1) - $iShiftTime * $iSlideInit }s infinite;
}
}
@for $i from 1 to $iImage + 1 {
#{ $strSliderClassName } #{ $strSliderClassName }T:nth-of-type(#{$i}) {
animation: #{ $strSliderKeyframes }T #{ $iTotalTime }s ease #{ $iImageTime * ($i - 1) - $iShiftTime * $iSlideInit }s infinite;
}
}
@for $i from 1 to $iImage + 1 {
#{ $strSliderClassName } #{ $strSliderClassName }X:nth-of-type(#{$i}) {
animation: #{ $strSliderKeyframes }X #{ $iTotalTime }s ease #{ $iImageTime * ($i - 1) - $iShiftTime * $iSlideInit }s infinite;
}
}
@for $i from 1 to $iImage + 1 {
#{ $strSliderClassName } #{ $strSliderClassName }Y:nth-of-type(#{$i}) {
animation: #{ $strSliderKeyframes }Y #{ $iTotalTime }s ease #{ $iImageTime * ($i - 1) - $iShiftTime * $iSlideInit }s infinite;
}
}
@for $i from 1 to $iImage + 1 {
#{ $strSliderClassName } #{ $strSliderClassName }O:nth-of-type(#{$i}) {
animation: #{ $strSliderKeyframes }O #{ $iTotalTime }s ease #{ $iImageTime * ($i - 1) - $iShiftTime * $iSlideInit }s infinite;
}
}
/* ---------------------------------------------------------- */
/* Keyframes */
/* ---------------------------------------------------------- */
@keyframes #{ $strSliderKeyframes }L {
0%{left:-100%;}
#{ ($iShiftTime ) / $iTotalTime * 100 }%{left: 0%;}
#{ ($iImageTime ) / $iTotalTime * 100 }%{left: 0%;}
#{ ($iImageTime + $iShiftTime) / $iTotalTime * 100 }%{left: 100%;}
100%{left: 100%;}
}
@keyframes #{ $strSliderKeyframes }T {
0%{top: -100%;}
#{ ($iShiftTime ) / $iTotalTime * 100 }%{top: 0%;}
#{ ($iImageTime ) / $iTotalTime * 100 }%{top: 0%;}
#{ ($iImageTime + $iShiftTime) / $iTotalTime * 100 }%{top: 100%;}
100%{top: 100%;}
}
@keyframes #{ $strSliderKeyframes }X {
0%{ transform: translateX(-100%);}
#{ ($iShiftTime ) / $iTotalTime * 100 }%{ transform: translateX( 0%);}
#{ ($iImageTime ) / $iTotalTime * 100 }%{ transform: translateX( 0%);}
#{ ($iImageTime + $iShiftTime) / $iTotalTime * 100 }%{ transform: translateX( 100%);}
100%{ transform: translateX( 100%);}
}
@keyframes #{ $strSliderKeyframes }Y {
0%{ transform: translateY(-100%);}
#{ ($iShiftTime ) / $iTotalTime * 100 }%{ transform: translateY( 0%);}
#{ ($iImageTime ) / $iTotalTime * 100 }%{ transform: translateY( 0%);}
#{ ($iImageTime + $iShiftTime) / $iTotalTime * 100 }%{ transform: translateY( 100%);}
100%{ transform: translateY( 100%);}
}
@keyframes #{ $strSliderKeyframes }O {
0%{opacity: 0; visibility: hidden;}
#{ ($iShiftTime ) / $iTotalTime * 100 }%{opacity: 1; visibility:visible;}
#{ ($iImageTime ) / $iTotalTime * 100 }%{opacity: 1; visibility:visible;}
#{ ($iImageTime + $iShiftTime) / $iTotalTime * 100 }%{opacity: 0; visibility: hidden;}
100%{opacity: 0; visibility: hidden;}
}
/* ---------------------------------------------------------- */
/* Reference */
/* Minimal pure css slider */
/* https://codepen.io/eltonkamami/pen/hjBrE */
/* ---------------------------------------------------------- */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment