We meet again slider
I used to swap product images, links, and more out of an e-commerce website’s slider/carousle multiple times a week. So I’m fairly familiar with how they normally work and are built. Almost all of them I’ve encountered had some JavaScript built-in to make them work, but today I built my first version mostly free of JavaScript. It’s really only used to switch it into and out of fullscreen mode. It also doesn’t change slides on its own. I think that’s alright, as this will probably not be used in such a way. It may not be too tough to add a bit to make it automatically change slides though. I also need to make sure I don’t bother displaying the fullscreen toggle button for browsers that don’t support it, or change how it works.
View the code:
HTML and JS
<div class="code-block">
<div class="wrap" id="fullscreen">
<header>
<label for="slide-1-trigger">🍗 Katsu</label>
<label for="slide-2-trigger">🍜 Ramen</label>
<label for="slide-3-trigger">🍕 Pizza Chips</label>
<label for="slide-4-trigger">🌲 Nature</label>
<label><button id="js-fullscreen">↕ View Fullscreen</button></label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<div class="slide slide-one">
<h2>Katsu Udon</h2>
<p>A tasty fried pork cutlet places on top of thick udon noodles and topped with a generous helping of sliced green onions and a tasty curry meat mixture.</p>
</div>
<input id="slide-2-trigger" type="radio" name="slides">
<div class="slide slide-two">
<h2>Ramen</h2>
</div>
<input id="slide-3-trigger" type="radio" name="slides">
<div class="slide slide-three">
<h2>Pizza Chips</h2>
</div>
<input id="slide-4-trigger" type="radio" name="slides">
<div class="slide slide-four">
<h2>Nature</h2>
</div>
</div>
</div>
<script>
// ---------
// Variables
// ---------
let fullscreen = document.querySelector("#fullscreen");
let button = document.querySelector("#js-fullscreen");
// ---------
// Events
// ---------
button.addEventListener('click', () => {
if (!document.fullscreenElement) {
console.log('enable fullscreen');
fullscreen.requestFullscreen();
button.innerHTML = "↕ Disable Fullscreen"
} else {
console.log('disable fullscreen');
button.innerHTML = "↕ View Fullscreen"
document.exitFullscreen();
}
});
</script>CSS
.code-block {
width: 100%;
min-height: 50vh;
height: 100%;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.wrap {
min-height: 50vh;
height: 100%;
width: 100%;
position: relative;
z-index: 2;
overflow: hidden;
background-color: #120103;
color: #fff;
text-align: center;
}
.code-block header {
background-color: #3E474F;
box-shadow: 0 .5em 1em #111;
position: absolute;
bottom: 0;
left: 0;
z-index: 50;
width: 100%;
}
.code-block header label {
cursor: pointer;
color: white;
display: inline-block;
line-height: 2em;
font-size: 20px;
font-weight: bold;
padding: .5em;
vertical-align: middle;
transition: text-shadow .125s ease-out;
min-width: 4ch;
}
.code-block header button {
font-size: 20px;
padding: 9px 12px;
border: 0;
background-color: orange;
border-radius: .25em;
color: #fff;
}
.code-block header label:hover {
background-color: #2e353b;
text-shadow: 0 0 .25em rgb(255, 102, 0);
}
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 4;
padding: 1em;
background-color: #120103;
background-position: 50% 50%;
background-position: center center;
background-size: cover;
transition: left 0s .75s;
display: grid;
place-items: center;
}
.slide h2, .slide p {
max-width: 60ch;
text-shadow: 0 2px .25rem rgba(0, 0, 0, 0.9);
}
[id^="slide"]:checked + .slide {
left: 0;
transition: left .65s ease-out;
z-index: 10;
}
.slide-one { background-image: url('https://jeremycaudle.com/ygg/resources/189e2156-2134-4b4a-b55c-19331833afea.jpeg'); }
.slide-two { background-image: url('https://jeremycaudle.com/ygg/resources/kinugasatonkotsuramen.jpeg'); }
.slide-three { background-image: url('https://jeremycaudle.com/ygg/resources/img0964.jpeg'); }
.slide-four { background-image: url('https://jeremycaudle.com/ygg/resources/e56a2e51-1a07-453b-a2ce-dda130aa06b5.jpeg'); }
.slide h2 {
opacity: 0;
transform: translateY(100%);
transition: transform .5s .5s, opacity .5s;
}
[id^="slide"]:checked + .slide h2 {
opacity: 1;
transform: translateY(0);
transition: all .5s .5s;
}