- let sliderItems = [{ "id":"1", "title": "Stearman PT-17", "meta": "Lorem ipsum dolor.", "href": "https://", "src": "https://images.unsplash.com/photo-1563782414411-b05969e9ebd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80" }, { "id": "2", "title": "Havilland DH.88 Comet", "meta": "Lorem ipsum dolor.", "href": "https://", "src": "https://images.unsplash.com/photo-1510958197061-8a5f866174e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" }, { "id": "3", "title": "Piper J-3 USMC", "meta": "Lorem ipsum dolor.", "href": "https://", "src": "https://images.unsplash.com/photo-1592567195085-51ef98414c44?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80" }, { "id": "4", "title": "Samson airkraft", "meta": "Lorem ipsum dolor.", "href": "https://", "src": "https://images.unsplash.com/photo-1582282046939-c37555bb2c8b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80" }, { "id": "5", "title": "Icon A5 Airplane", "meta": "Lorem ipsum dolor.", "href": "https://", "src": "https://images.unsplash.com/photo-1576175161184-bb926de82d8c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80" }]
.slider
.container
each slider in sliderItems
input(type="radio" name="i" id=`input-${slider.id}`)
.slider-dot
each slider in sliderItems
label(class="dot" for=`input-${slider.id}`)
.slider-arrow
each slider in sliderItems
label(for=`input-${slider.id}`)
each slider in sliderItems
label(class="slider-thumb" id=`thumb-${slider.id}` for=`input-${slider.id}`)
img(alt=`${slider.title}` id=`p-${slider.id}` src=`${slider.src}`)
.head
h2= slider.title
p= slider.meta
a(href=`${slider.href}`)
|read more...
.slider-content
.slider-inner
each slider in sliderItems
figure
img(alt=`${slider.title}` id=`p-${slider.id}` src=`${slider.src}`)
figcaption.head
h2= slider.title
p= slider.meta
a(href=`${slider.href}`)
|read more...
* { box-sizing:border-box; }
body, html { padding: 0; margin: 0; width: 100%; height: 100%; }
$font-family: Arial, sans-serif;
$body-bg: #000;
$body-color: #fff;
body {
font-family: $font-family;
color: $body-color;
background: $body-bg;
}
$slider-container-width: 1200px;
$slider-primary: #00ABFA;
$slider-thumb-height: 20%;
$slider-bg: #000;
$slider-color: #fff;
$slider-dot-size: 1rem;
$slider-dot-height: 2rem;
$slider-arrow-size: 3rem;
$dot-bg: #fff;
$n: 5;
@mixin arrow($content, $position-left, $position-right, $float) {
width: $slider-arrow-size;
height: $slider-arrow-size;
margin-top: $slider-arrow-size / 2;
top: 50%;
display: inline-block;
position: relative;
cursor: pointer;
background: rgba($slider-bg,.5);
color: $slider-color;
font-size: $slider-arrow-size;
line-height: 1;
font-family: monospace;
float: $float;
left: $position-left;
right: $position-right;
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
content: $content;
}
}
.slider {
height: 100%;
.container {
width: 100%;
height: 100%;
margin: 0px auto;
position: relative;
text-align: left;
max-width: $slider-container-width;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-fit: cover;
vertical-align: middle;
border: 0;
position: relative;
}
.head {
font-size: 16px;
position: absolute;
z-index: 12;
top: 0;
left: 0;
width: auto;
height: auto;
margin: .5em;
padding: .5em;
opacity: 1;
overflow: hidden;
transition: all 0.5s ease-in-out;
background: rgba($slider-bg, .5);
h2 {
color: $slider-color;
text-transform: uppercase;
padding: 0;
margin: 0 0 .25em;
line-height: 1.2;
font-size: 1.5em;
}
p {
color: rgba($slider-color, .8);
padding: 0;
margin: 0 0 .125em;
line-height: 1.2;
font-size: 1em;
}
a {
color: $slider-primary;
text-decoration: none;
line-height: 1.2;
font-size: .75em;
&:hover {
color: darken($slider-primary, 20%);
text-decoration: underline;
}
}
}
&-content {
overflow: hidden;
margin: 0 auto;
position: relative;
width: 100%;
height: calc(100% - #{$slider-thumb-height});
figure {
margin: 0;
padding: 0;
cursor: pointer;
position: relative;
width: 20%;
transition: all 2s ease-in-out;
}
}
&-inner {
line-height: 0;
display: flex;
height: 100%;
width: 500%;
animation: 30s slidy infinite;
transition: all 2s ease-in-out;
}
&-thumb {
display: block;
z-index: 1000;
cursor: pointer;
position: absolute;
width: calc(100% / #{$n});
height: $slider-thumb-height;
bottom: 0;
// margin: calc(100% - #{$slider-thumb-height}) 0 0 0;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $slider-bg;
opacity: .5;
transition: all .2s ease-in-out;
}
&:hover:after {
opacity: 0;
}
.head {
background: transparent;
font-size: 8px;
margin: 0;
}
}
input[type="radio"] {
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
appearance: none;
appearance: none;
appearance: none;
}
&-arrow {
position: absolute;
left: 0;
z-index: 15;
top: 0%;
width: 100%;
height: 3.125rem;
top: 50%;
transform: translateY(-50%);
}
&-dot {
height: $slider-dot-height;
bottom: $slider-thumb-height;
width: 100%;
z-index: 10;
position: absolute;
text-align: center;
background: rgba($slider-bg, 0.7);
font-size: 0;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
.dot {
display: block;
border-radius: 50%;
margin: 0 $slider-dot-size / 2;
width: $slider-dot-size;
height: $slider-dot-size;
background: $dot-bg;
border: 2px solid $slider-primary;
cursor: pointer;
&:hover {
background: $slider-primary;
}
}
}
@for $i from 1 through $n {
#input-#{$i}:checked ~ #thumb-#{$i}:after { opacity: 0; }
#input-#{$i}:checked ~ &-dot>.dot:nth-child(#{$i}) {
opacity: 1; background: $slider-primary;
}
}
@for $i from 0 through $n - 1 {
#thumb-#{$i+1} { left: $i * (100% / $n); }
#input-#{$i+1}:checked ~ &-content .slider-inner {
margin-left: $i * -100%;
}
}
@for $i from 1 through $n {
@if $i == $n {
#input-#{$i}:checked ~ &-arrow>label:nth-child(1) {
@include arrow(">", auto, 0, right);
}
#input-1:checked ~ &-arrow>label:nth-child(#{$n}) {
@include arrow("<", 0, auto, left);
}
} @else {
#input-#{$i}:checked ~ &-arrow>label:nth-child(#{($i + 1)}) {
@include arrow(">", auto, 0, right);
}
#input-#{($n - $i + 1)}:checked ~ &-arrow>label:nth-child(#{($n - $i)}) {
@include arrow("<", 0, auto, left);
}
}
}
input:checked ~ &-inner,
span:focus ~ &-inner {
animation: none;
}
input:hover ~ &-inner,
label:hover ~ &-inner,
span:hover ~ &-inner {
animation-play-state: paused;
}
}// 1. Set your slider data array in html(pug)
// 2. The amount of data in the array is $n in the css(scss) window
// 3. Set scss variables in css(scss) window
// 4. In css(scss) window Click ⌄ and choose view compiled CSS
// 4. In html(pug) window Click ⌄ and choose view compiled HTML
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.