JSFiddle - React, Tailwind, and code Playground

by BandonRandon

HTML

<script src="//cdn.jsdelivr.net/prettyphoto/3.1.5/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/prettyphoto/3.1.5/css/prettyPhoto.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/flexslider/2.1/flexslider.css">
<script src="//cdn.jsdelivr.net/flexslider/2.1/jquery.flexslider-min.js"></script>
<script src="https://raw.github.com/wandoledzep/bxslider-4/master/jquery.bxslider.js"></script>
<link rel="stylesheet" href="https://github.com/wandoledzep/bxslider-4/blob/master/jquery.bxslider.css">
<a href="#inline-1" rel="prettyPhoto"><img src="http://placehold.it/350x150"/></a>

<div  id="inline-1" class="hide">
        <ul class="bxslider">
            <li>
                <img src="http://placehold.it/350x150" />
            </li>
            <li>
                <img src="http://placehold.it/350x150" />
            </li>
            <li>
                <img src="http://placehold.it/350x150" />
            </li>
            <li>
                <img src="http://placehold.it/350x150" />
            </li>
        </ul>
  </div>

CSS

div.facebook .pp_arrow_previous, div.facebook .pp_arrow_next, div.facebook .currentTextHolder {
    display:none;
}

JavaScript

$(document).ready(function () {
    $("a[rel^='prettyPhoto']").prettyPhoto({
        theme: 'facebook',
        show_title: false,
        overlay_gallery: false,
        social_tools: false
    });
});

$('.bxslider').bxSlider({});
$('.flexslider').flexslider({
    animation: "slide"
});
api_images = ['http://placehold.it/350x150', 'http://placehold.it/350x150', 'http://placehold.it/350x150'];
api_titles = ['Title 1', 'Title 2', 'Title 3'];
api_descriptions = ['Description 1', 'Description 2', 'Description 3'];
$.prettyPhoto.open(api_images, api_titles, api_descriptions);