<h1>Pure CSS Slideshow v3</h1>
<div class="container">
<div class="slideshow">
<div id="slide-1" class="slide">
<input type="radio" id="slide-1-prev" name="slide-selector" /><label for="slide-1-prev" title="previous"></label>
<input type="radio" id="slide-1-next" name="slide-selector" /><label for="slide-1-next" title="previous"></label>
<img src="https://c1.staticflickr.com/9/8724/16310801553_cea90ae63d_n.jpg" />
</div>
<div id="slide-2" class="slide">
<input type="radio" id="slide-2-prev" name="slide-selector" /><label for="slide-2-prev" title="previous"></label>
<input type="radio" id="slide-2-next" name="slide-selector" /><label for="slide-2-next" title="previous"></label>
<img src="https://c2.staticflickr.com/4/3719/19819674272_2384feaaf8_n.jpg" />
</div>
<div id="slide-3" class="slide">
<input type="radio" id="slide-3-prev" name="slide-selector" /><label for="slide-3-prev" title="previous"></label>
<input type="radio" id="slide-3-next" name="slide-selector" /><label for="slide-3-next" title="previous"></label>
<img src="https://c2.staticflickr.com/2/1627/24319275501_3ec6f36fa7_n.jpg" />
</div>
<div id="slide-4" class="slide">
<input type="radio" id="slide-4-prev" name="slide-selector" /><label for="slide-4-prev" title="previous"></label>
<input type="radio" id="slide-4-next" name="slide-selector" /><label for="slide-4-next" title="previous"></label>
<img src="https://c2.staticflickr.com/2/1460/25194537936_e3c54faefc_n.jpg" />
</div>
<div id="slide-5" class="slide">
<input type="radio" id="slide-5-prev" name="slide-selector" /><label for="slide-5-prev" title="previous"></label>
<input type="radio" id="slide-5-next" name="slide-selector" /><label for="slide-5-next" title="previous"></label>
<img src="https://c2.staticflickr.com/2/1460/26216238325_9c425923a7_n.jpg" />
</div>
<div id="slide-6" class="slide">
<input type="radio" id="slide-6-prev" name="slide-selector" /><label for="slide-6-prev" title="previous"></label>
<input type="radio" id="slide-6-next" name="slide-selector" /><label for="slide-6-next" title="previous"></label>
<img src="https://c2.staticflickr.com/8/7578/26194232483_8204bf119b_n.jpg" />
</div>
<div id="slide-7" class="slide">
<input type="radio" id="slide-7-prev" name="slide-selector" /><label for="slide-7-prev" title="previous"></label>
<input type="radio" id="slide-7-next" name="slide-selector" checked /><label for="slide-7-next" title="previous"></label>
<img src="https://c2.staticflickr.com/8/7106/26862741906_d5283c42ba_n.jpg" />
</div>
</div>
<div class="pagination">
<label for="slide-7-next" title="slide 1"></label>
<label for="slide-1-next" title="slide 2"></label>
<label for="slide-2-next" title="slide 3"></label>
<label for="slide-3-next" title="slide 4"></label>
<label for="slide-4-next" title="slide 5"></label>
<label for="slide-5-next" title="slide 6"></label>
<label for="slide-6-next" title="slide 7"></label>
</div>
</div>
<aside>
<h2>About</h2>
<p>I wanted to create a pure CSS image slideshow and this is the result. In my <a href="https://codepen.io/cchana/pen/xxwgLgY">original attempt</a>, I created the slideshow with <code>a</code> tags, but with the <code>:has()</code> selector I can use input elements which solve two of the problems I had.</p>
<p>This slideshow was created using just CSS and HTML. Click anywhere on the left half to go to the previous slide, anywhere on the right half to go to the next slide. Oh and it loops in a carousel.</p>
<p>If your browser does not support the <code>:has()</code> selector then it will just show the first slide and hide the pagination. <code>aspect-ratio</code> is used instead of a pseudo-element and padding hacks.</p>
<p>There's pagination too so you can jump to any slide.</p>
<h2>What could be improved?</h2>
<ul>
<li>Automatically cycle through images</li>
</ul>
</aside>@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap');
body {
background: linear-gradient(-45deg, #83a4d4, #b6fbff);
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
}
h1,
aside,
.container {
margin: 0 auto 20px;
max-width: 500px;
}
label {
cursor: pointer;
}
.container {
border-radius: 5px;
margin: 0 auto;
position: relative;
transition: box-shadow 200ms;
&:hover {
box-shadow: 0 10px 50px -10px rgba(0,0,0,0.25);
}
}
.slideshow {
aspect-ratio: 6 / 4;
position: relative;
width: 100%;
.slide {
img {
border-radius: 5px;
height: 100%;
object-fit: cover;
width: 100%;
}
}
label {
display: block;
height: 100%;
opacity: 0;
position: absolute;
transition: opacity 0.5s;
width: 50%;
&:nth-child(4) {
left: 50%;
}
&:after {
border-color: #FFF #FFF transparent transparent;
border-style: solid;
border-width: 2px;
color: #FFF;
display: block;
height: 10px;
position: absolute;
top: calc(50% - 5px);
width: 10px;
}
&:nth-child(2):after {
content: '';
left: 10px;
transform: rotate(-135deg);
}
&:nth-child(4):after {
content: '';
right: 10px;
transform: rotate(45deg);
}
}
.slide {
box-sizing: border-box;
display: none;
height: 100%;
position: absolute;
width: 100%;
img {
border-radius: 5px;
width: 100%;
}
input {
display: none;
&:checked {
+ label {
background-color: rgba(0,0,0,0.5);
}
}
}
}
}
.pagination {
display: flex;
bottom: 10px;
justify-content: center;
position: absolute;
width: 100%;
label {
background: rgba(#FFF,0.5);
border-radius: 50%;
display: block;
height: 10px;
width: 10px;
&:not(:last-child) {
margin-right: 5px;
}
}
}
@supports not selector(a) {
.slide label,
.pagination {
display: none;
}
.slide:first-child {
display: block;
}
}
@supports selector(a) {
.slideshow {
&:hover label {
opacity: 1;
}
}
.container {
&:has(#slide-1-prev:checked) {
#slide-7 {
display: block;
}
.pagination label:nth-child(7) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-1-next:checked) {
#slide-2 {
display: block;
}
.pagination label:nth-child(2) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-2-prev:checked) {
#slide-1 {
display: block;
}
.pagination label:nth-child(1) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-2-next:checked) {
#slide-3 {
display: block;
}
.pagination label:nth-child(3) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-3-prev:checked) {
#slide-2 {
display: block;
}
.pagination label:nth-child(2) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-3-next:checked) {
#slide-4 {
display: block;
}
.pagination label:nth-child(4) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-4-prev:checked) {
#slide-3 {
display: block;
}
.pagination label:nth-child(3) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-4-next:checked) {
#slide-5 {
display: block;
}
.pagination label:nth-child(5) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-5-prev:checked) {
#slide-4 {
display: block;
}
.pagination label:nth-child(4) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-5-next:checked) {
#slide-6 {
display: block;
}
.pagination label:nth-child(6) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-6-prev:checked) {
#slide-5 {
display: block;
}
.pagination label:nth-child(5) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-6-next:checked) {
#slide-7 {
display: block;
}
.pagination label:nth-child(7) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-7-prev:checked) {
#slide-6 {
display: block;
}
.pagination label:nth-child(6) {
background-color: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
&:has(#slide-7-next:checked) {
#slide-1 {
display: block;
}
.pagination label:nth-child(1) {
background: #FFF;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 2px 1px rgba(0,0,0,0.25);
}
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.