JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<a class="arrow left" href="#"></a>
<a class="arrow right" href="#"></a>
<a class="arrow slideshow" href="#"></a>
<div class="image">
    <div class="variations">
        <a class="checked" href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </div>
    <img src="http://4otaku.ru/images/booru/resized/a64a8853b826445045dcf855fa187767.jpg" />
</div>

CSS

.left {
   left: 0; 
   background-image: url('http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/48/navigate-left-icon.png');    
}

.right {
   right: 0;    
   background-image: url('http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/48/navigate-right-icon.png');    
}

a.arrow.slideshow {
    bottom: 75%;
    right: 0;      
    background-image: url('http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-5/48/continue-icon.png');
}

.image {
   margin: 0 auto; 
   width: 66%;    
}

.image img {
   width: 100%;
   height: auto;        
}

a.arrow {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 90px;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff;
}

a.arrow:hover {
    background-color: #F0F0F0;
}

.variations {
    position: absolute;
    margin: 5px;
}

.variations a {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px #ddd solid;
    margin: 2px;
    box-shadow: 0px 0px 3px #000;
}

.variations a.checked {
    background: #2c7ca1;
    box-shadow: 0px 0px 3px #2c7ca1;
}

JavaScript

$('.variations a').on('click', function () {
    $(this).addClass('checked')
            .siblings().removeClass('checked');   
    
    return false;
});