JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="blinds">
    <ul>
        <li>
            <img src="http://placekitten.com/g/300/200" alt="" />
        </li>
        <li>
            <img src="http://placekitten.com/g/300/200" alt="" />
        </li>
        <li>
            <img src="http://placekitten.com/g/300/200" alt="" />
        </li>
        <li>
            <img src="http://placekitten.com/g/300/200" alt="" />
        </li>
    </ul>
</div>

CSS

body {
    max-width: 500px;
}
#blinds {
    width: 100%;
    height: 200px;
    float: left;
    overflow: hidden;
}
#blinds ul, #blinds li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#blinds ul {
    float: left;
    width: 500%;
    height: 100%;
}
#blinds li {
    float: left;
}
#blinds .image_wrap {
    float: left;
    overflow: hidden;
}

JavaScript

$(function () {
    
    
    var blinds = $('#blinds'),
        blindsP = blinds.parent(),
        blinds_li = blinds.find('li'),
        imageW = 300;
    
    blinds_li.each(function () {
        
        var obj = $(this);
        
        obj.addClass('image_wrap');
        
        fit_images();
        $(window).on("resize", fit_images);
        
        obj.on("mouseenter mouseleave", function (e) {
            
            var contentW = blindsP.width(),
                bodyPW = parseInt(blindsP.css('max-width')),
                winW = $(window).width();
            
            if (e.type === 'mouseenter') {
                
                obj.stop().animate({
                    width: imageW
                }, 400);
                
                obj.siblings().stop().animate({
                    // If parent element width smaller than window width, 
                    width: bodyPW > winW ? (bodyPW - imageW) / (blinds_li.length - 1) : (contentW - imageW) / (blinds_li.length - 1)
                }, 400);
                
            } else {
                
                blinds_li.stop().animate({
                    width: contentW / blinds_li.length
                }, 400);
                
            }
            
        });
        
        function fit_images() {
            
            var contentW = blindsP.width();
            blinds_li.width(contentW / blinds_li.length);
            
            
        }
        
    });
    
});








$(document).ready(function() {

    $('.box').togglebox({
    
        clickEvent: function() {
            var obj = $(this),
                objD = obj.data(),
                arClass = objD.active ? 'addClass' : 'removeClass';
            
            $(this)[ arClass ]('active'); 
            
        }
    
    });

});

(function($) {
  $.fn.extend({
    togglebox: function( options ) {
      
      var defaults = {
          speed: [300, 200],
          imgSize: [300,200],
         ...