JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<div id="k3dCarousel">
    <img src="http://1.bp.blogspot.com/-77bRCV9xoOc/UIJiWk3Kh0I/AAAAAAAAGCM/3gGkIF5vNe0/s72-c/410_133.jpg" />
    <img src="http://2.bp.blogspot.com/-AGqCG70KPak/TqFfptAfNOI/AAAAAAAAACQ/qELiuhCdgUI/s72-c/slide2.jpg" />
    <img src="http://3.bp.blogspot.com/-ChU7KdSQZM4/VI6UNpgQeDI/AAAAAAAAABw/Z9nqwsP02v0/s72-c/header.jpg" />
    <img src="http://1.bp.blogspot.com/-rvxMVjyd840/UBP1txN2MRI/AAAAAAAAADg/iokDB6U74J0/s72-c/7.jpg" />
    <img src="http://2.bp.blogspot.com/-KVMHzln6-YE/UWcnhp46N5I/AAAAAAAAAHk/nqi9VgZP0c8/s72-c/ComputerDesktopWallpapersCollection355_016.jpg" />
    <img src="http://3.bp.blogspot.com/-OJsLTBmY9ZU/UXbiKx1jdaI/AAAAAAAAAIg/i9rMuOigAl4/s72-c/thomas07-synthetic-bass.jpg" />
    <img src="http://4.bp.blogspot.com/-TTMEN4Cbfw4/UlThu6wSOVI/AAAAAAAACWo/qd-NgWjUVqM/s72-c/cute_anime_boy_by_tudorlucia-d4u4a6k.jpg" />
</div>

JavaScript

(function ($) {
    $.fn.k3dCarousel = function (options) {
        return this.each(function () {
            var $this = $(this);
            var settings = {
                'radius': $this.width() * .3,
                    'centerX': $this.width() / 2,
                    'centerY': $this.height() / 2,
                    'rotateDuration': 1000,
                    'pauseDuration': 2000
            };
            if (options) {
                $.extend(settings, options);
            }
            var items = $this.find('img').css({
                'position': 'absolute',
                    'opacity': 0,
                    'display': 'block'
            });
            items.each(function (index, el) {
                el.style.left = (settings.centerX - el.offsetWidth / 2) + 'px';
                el.style.top = '0px';
                el.origWidth = el.offsetWidth;
                el.origHeight = el.offsetHeight;
            });
            var numitems = items.length;
            var positions = [];
            var degs = Math.PI / (numitems / 2);
            var iter = 0;
            for (var i = 0; i < numitems; ++i) {
                var sin = Math.sin(degs * i);
                positions.push({
                    'left': settings.centerX + (Math.cos(degs * i) * settings.radius),
                        'zIndex': parseInt(50 * sin + 50),
                        'top': sin * 10 + 10,
                        'opacity': .45 * sin + .55,
                        'zoom': .4 * sin + .6
                });
                items[i] = $(items[i]);
            }
            this.style.position = 'relative';

            function setPositions() {
                for (var i = 0; i < numitems; ++i) {
                    var newWidth = positions[i].zoom * items[i][0].origWidth;
                    var newHeight = positions[i].zoom * items[i][0].origHeight;
                    items[(i + iter) % numitems].animate({
                        'left': positions[i].left -...