JSFiddle - React, Tailwind, and code Playground

by Shang WenLong

HTML

<div style="width:1px;height:15px;background-color:black;margin:0 auto;"></div>




	<section id="barely_slide">
		<article>
							
																					<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Alone.jpg" alt="Alone"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Ball.jpg" alt="Ball"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Buy-Bye.jpg" alt="Buy-Bye"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Can-you.jpg" alt="Can-you"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Catz.jpg" alt="Catz"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Chasing.jpg" alt="Chasing"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Fan.jpg" alt="Fan"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Fix-it.jpg" alt="Fix-it"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Freckles.jpg" alt="Freckles"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Gliding.jpg" alt="Gliding" class="focus" />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Gravity.jpg" alt="Gravity"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/GuRu.jpg" alt="GuRu"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Helix.jpg" alt="Helix"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Industrial.jpg" alt="Industrial"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Lucid.jpg" alt="Lucid"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Pool.jpg" alt="Pool"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Precious.jpg" alt="Precious"  />
											<img src="http://portfolio.sandrophoto.com/gallery/Album1/lg/Read.jpg" alt="Read"  />
											<img...

CSS

#barely_slide {
	overflow: hidden;
	padding-top: 150px;
}
#barely_slide article {}
#barely_slide article img {
	display: block;
	float: left;
	padding: 0 5px;
	cursor: pointer;
	height: 300px;
}

JavaScript

//
	function set_slide_width(add_extra) {
		add_extra = add_extra || 0;
		var slide_width = 0;
		$("#barely_slide article img").each(function(){
			slide_width += $(this).outerWidth();
		});
		$("#barely_slide article").css("width",slide_width + add_extra);
	}
	//
	set_slide_width();
	

	//
	function move_slide() {
		var focus_margin = 0;
		var img_real_height = 0;
	    var add_extra = 0;
		$("#barely_slide article img").each(function(){
			if ($(this).hasClass("focus")) {
					var theImage = new Image();
					theImage.src = $(this).attr("src");
					var img_real_width = theImage.width;
					var img_real_width_padding = img_real_width + ($(this).outerWidth() - $(this).width());
					img_real_height = theImage.height;
					//
						add_extra = img_real_width_padding - $(this).outerWidth();
					//
				focus_margin += img_real_width_padding / 2;
				return false;
            } else if ($(this).hasClass("previous")) {
              var shrinked_width = 300 *  $(this).width() / $(this).height();
              var img_width_width_padding = shrinked_width + ($(this).outerWidth() - $(this).width());
              focus_margin += img_width_width_padding;
            } else {
              focus_margin += $(this).outerWidth();
            }
		});
		//
			set_slide_width(add_extra);
		//
		var container_center = $("#barely_slide").outerWidth() / 2;
		var offset = container_center - focus_margin;
		//console.dir(offset);
		$("#barely_slide article").animate({"margin-left": offset }, "fast");
			//
			var img_height_offset = (img_real_height / 2) - 150;
			$(".focus").animate({"height":img_real_height,"margin-top":-img_height_offset}, "fast");
	}
	//
	move_slide();


	//
	var resize_timeout;
	$(window).resize(function() {
		clearTimeout(resize_timeout);
		resize_timeout = setTimeout(function(){    
        	move_slide();
    	},100);
	});


	//
	$("#barely_slide article img").on("click", function(){
		if ($(this).attr("class") == "focus") {return...