JSFiddle - React, Tailwind, and code Playground

by dauruk0512

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<div class="vertical-slider-container">
    <img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" id="prev" class="vertical-slider-nav vertical-slider-nav-up" />
    <div class="slideshow"
         data-cycle-fx="carousel"
         data-cycle-timeout="3000"
         data-cycle-next="#next"
         data-cycle-prev="#prev"
         data-cycle-carousel-visible="3"
         data-cycle-carousel-vertical="true">

        <img src="http://malsup.github.io/images/beach1.jpg" />
        <img src="http://malsup.github.io/images/beach2.jpg" />
        <img src="http://malsup.github.io/images/beach3.jpg" />
        <img src="http://malsup.github.io/images/beach4.jpg" />
        <img src="http://malsup.github.io/images/beach5.jpg" />
        <img src="http://malsup.github.io/images/beach9.jpg" />
    </div>
    <img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" id="next" class="vertical-slider-nav vertical-slider-nav-down" />
</div>

CSS

.vertical-slider-container {
    background: #fff;
    border: 20px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    margin: 40px auto;
    position: relative;
    width: 120px;
}

.slideshow {
    background: #fff;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slideshow img {
    display: block;
    width: 100px;
    height: 100px;
    padding: 10px;
}

.vertical-slider-nav {
    color: rgba(0,0,0,0.8);
    cursor: pointer;
    display: block;
    height: 40px;
    margin-left: -20px;
    left: 50%;
    z-index: 10;
    position: absolute;
    overflow: hidden;
    opacity: 0;
    text-decoration: none;
    width: 40px;
    transition: all .3s ease;
}

.vertical-slider-nav-up {
    top: -60px;
}

.vertical-slider-container:hover .vertical-slider-nav-up:hover {
    opacity: 1;
}

.vertical-slider-container:hover .vertical-slider-nav-up {
    top: -20px;
    opacity: 0.7;
}

.vertical-slider-nav-down {
    bottom: -60px;
}

.vertical-slider-container:hover .vertical-slider-nav-down:hover {
    opacity: 1;
}

.vertical-slider-container:hover .vertical-slider-nav-down {
    bottom: -20px;
    opacity: 0.7;
}

JavaScript

$('.slideshow').cycle();