JSFiddle - React, Tailwind, and code Playground

by Przemek Misztal

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://raw.githubusercontent.com/Pagawa/PgwSlider/master/pgwslider.js"></script>
<ul class="pgwSlider">
    <li><img src="http://static.pgwjs.com/img/pg/slider/paris.jpg" alt="Paris, France" data-description="Eiffel Tower and Champ de Mars"></li>
    <li><img src="http://static.pgwjs.com/img/pg/slider/montreal_mini.jpg" alt="Montréal, QC, Canada" data-large-src="http://static.pgwjs.com/img/pg/slider/montreal.jpg"></li>
    <li>
        <img src="http://static.pgwjs.com/img/pg/slider/shanghai.jpg">
        <span>Shanghai, China</span>
    </li>
    <li>
        <a href="http://www.nyc.gov" target="_blank">
            <img src="http://static.pgwjs.com/img/pg/slider/new-york.jpg">
	    <span>New York, NY, USA</span>
        </a>
    </li>
</ul>

CSS

/**
 * PgwSlider - Version 2.3
 *
 * Copyright 2014, Jonathan M. Piat
 * http://pgwjs.com - http://pagawa.com
 *
 * Released under the GNU GPLv3 license - http://opensource.org/licenses/gpl-3.0
 */
.pgwSlider {
    width: 100%;
    color: #fff;
}

.pgwSlider a{
    display: block;
    text-decoration: none;
    color: #fff;
}

.pgwSlider .ps-current {
    float: left;
    width: 74%;
    overflow: hidden;
    height: inherit;
    position: relative;
    font-size: 1rem;
}

.pgwSlider.listOnTheLeft .ps-current {
    float: right;
}

.pgwSlider .ps-current ul {
    width: 100%;
}

.pgwSlider .ps-current li {
    width: 100%;
    z-index: 1;
    opacity: 0;
    display: none;
}

.pgwSlider .ps-current img {
    max-width: 100%;
    min-width: 100%;
    height: auto;
    display: block;
    transition: margin-top 250ms linear;
}

.pgwSlider .ps-caption {
    position: absolute;
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.7);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
    left: 0;
    bottom: 0;
    display: none;
    z-index: 3;
}

ul.pgwSlider,
.pgwSlider  ul {
    float: right;
    width: 25%;
    padding: 0;
    list-style: none;
    margin: 0;
}

ul.pgwSlider.listOnTheLeft,
.pgwSlider.listOnTheLeft > ul {
    float: left;
}

ul.pgwSlider > li,
.pgwSlider > .ps-list > li {
    height: 50px;
    margin-bottom: 6px;
    overflow: hidden;
    position: relative;
    opacity: 0.6;
    filter: alpha(opacity=60);
    font-size: 0.8rem;
    transition: opacity 200ms linear;
}

ul.pgwSlider > li:last-child,
.pgwSlider > ul > li:last-child {
    margin-bottom: 0;
}

ul.pgwSlider > li span,
.pgwSlider > .ps-list > li span {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 5px;
    background: rgba(0, 0, 0, 0.7);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
    overflow: hidden;
    text-overflow:...

JavaScript

$(document).ready(function() {
    $('.pgwSlider').pgwSlider();
});