JSFiddle - React, Tailwind, and code Playground

by Bruno Alla

HTML

<div class="crsl-items" id="gallery">
    <div class="crsl-wrap">
        <figure class="crsl-item">
            <a href="">
                <img src="http://www.portmonteau.com/wp-content/uploads/2012/07/Coyote-Kisses-6001.jpg"/>
            </a>
        </figure>
        <figure class="crsl-item">
            <a href="">
                <img src="https://i4.sndcdn.com/artworks-000017133186-ctdh1q-t500x500.jpg"/>
            </a>
        </figure>
        <figure class="crsl-item">
            <a href="">
                <img src="http://www.clique.tv/wp-content/uploads/2014/11/artworks-000092214116-emzey0-t500x500.jpg"/>
            </a>
        </figure>
        <figure class="crsl-item">
            <a href="">
                <img src="http://www.thissongslaps.com/wp-content/uploads/2013/06/artworks-000050986719-4s5s8q-t500x500.jpg"/>
            </a>
        </figure>
        <figure class="crsl-item">
            <a href="">
                <img src="https://i2.sndcdn.com/artworks-000050305011-e8ynd4-t500x500.jpg?a5f823a"/>
            </a>
        </figure>
            
            
            
            
    </div>
</div>

SCSS

.crsl-items{
    .crsl-wrap{
        .crsl-item{
            img {
                max-width: 50px;
                max-height: 50px;
            }
        }
    }
}

JavaScript

/*! responsiveCarousel.JS - v1.2.0
 * http://basilio.github.com/responsiveCarousel
 *
 * Copyright (c) 2013 Basilio Cáceres <[email protected]>;
 * Licensed under the MIT license */

;(function($){
	"use strict";
	$.fn.carousel = function(args){
		var defaults, obj;
		defaults = {
			infinite : true,
			visible : 1,
			speed : 'fast',
			overflow : false,
			autoRotate : false,
			navigation : $(this).data('navigation'),
			itemMinWidth : 0,
			itemEqualHeight : false,
			itemMargin : 0,
			itemClassActive : 'crsl-active',
			imageWideClass : 'wide-image',
			// Use to build grid system - carousel : false
			carousel : true
		};
		return $(this).each( function(){
			// Set Object
			obj = $(this);

			// Extend
			if( $.isEmptyObject(args) === false )
				$.extend( defaults, args );
			if( $.isEmptyObject( $(obj).data('crsl') ) === false )
				$.extend( defaults, $(obj).data('crsl') );


			// Touch detection
			defaults.isTouch = 'ontouchstart' in document.documentElement || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) ? true : false ;

			obj.init = function(){
				// Set some default vars
				defaults.total = $(obj).find('.crsl-item').length;
				defaults.itemWidth = $(obj).outerWidth();
				defaults.visibleDefault = defaults.visible;

				// Touch Defaults
				defaults.swipeDistance = null;
				defaults.swipeMinDistance = 100;
				defaults.startCoords = {};
				defaults.endCoords = {};

				// .crsl-items
				$(obj).css({ width: '100%' });
				// .crls-item
				$(obj).find('.crsl-item').css({ position: 'relative', float: 'left', overflow: 'hidden', height: 'auto' });
				// .crsl-item > images with full width
				$(obj).find('.'+defaults.imageWideClass).each( function(){
					$(this).css({ display: 'block', width: '100%', height: 'auto' });
				});
				// .crsl-item > iframes (videos)
				$(obj).find('.crsl-item iframe').attr({ width: '100%' });


				// Declare the item ative
				if( defaults.carousel...