CSS only slideshow with navigation
by cchana
HTML
<div class="container">
<div class="slideshow">
<div id="slide-1" class="slide">
<a href="#slide-7"></a>
<a href="#slide-2"></a>
<img src="https://c1.staticflickr.com/9/8724/16310801553_cea90ae63d_n.jpg" />
</div>
<div id="slide-2" class="slide">
<a href="#slide-1"></a>
<a href="#slide-3"></a>
<img src="https://c2.staticflickr.com/4/3719/19819674272_2384feaaf8_n.jpg" />
</div>
<div id="slide-3" class="slide">
<a href="#slide-2"></a>
<a href="#slide-4"></a>
<img src="https://c2.staticflickr.com/2/1627/24319275501_3ec6f36fa7_n.jpg" />
</div>
<div id="slide-4" class="slide">
<a href="#slide-3"></a>
<a href="#slide-5"></a>
<img src="https://c2.staticflickr.com/2/1460/25194537936_e3c54faefc_n.jpg" />
</div>
<div id="slide-5" class="slide">
<a href="#slide-4"></a>
<a href="#slide-6"></a>
<img src="https://c2.staticflickr.com/2/1460/26216238325_9c425923a7_n.jpg" />
</div>
<div id="slide-6" class="slide">
<a href="#slide-5"></a>
<a href="#slide-7"></a>
<img src="https://c2.staticflickr.com/8/7578/26194232483_8204bf119b_n.jpg" />
</div>
<div id="slide-7" class="slide">
<a href="#slide-6"></a>
<a href="#slide-1"></a>
<img src="https://c2.staticflickr.com/8/7106/26862741906_d5283c42ba_n.jpg" />
</div>
</div>
</div>SCSS
.container {
width: 320px;
}
.slideshow {
position: relative;
width: 100%;
&:after {
content: '';
display: block;
padding-bottom: calc((100% / 6) * 4);
}
&:hover a {
opacity: 1;
}
a {
opacity: 0;
position: relative;
text-decoration: none;
transition: opacity 0.5s;
&: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;
}
&:first-child:after {
content: '';
left: 10px;
transform: rotate(-135deg);
}
&:nth-child(2):after {
content: '';
right: 10px;
transform: rotate(45deg);
}
}
.slide {
background-color: #FFF;
box-sizing: border-box;
display: none;
height: 100%;
position: absolute;
width: 100%;
&:first-child,
&:target {
display: block;
}
a {
display: block;
height: 100%;
position: absolute;
width: 50%;
&:nth-child(2) {
left: 50%;
}
}
img {
width: 100%;
}
}
}