JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
        <div id="panorama">
            <img src="http://acwongblog.qiniudn.com/panorama0.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama1.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama2.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama3.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama4.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama5.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama6.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama7.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama8.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama9.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama10.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama11.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama12.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama13.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama14.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama15.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama16.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama17.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama18.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama19.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama20.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama21.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama22.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama23.jpg" alt="">
            <img src="http://acwongblog.qiniudn.com/panorama24.jpg" alt="">
            <img...

CSS

#container{width:400px;height:255px;border:6px solid #ccc;margin:30px auto 0;overflow:hidden;cursor:move;-webkit-user-select: none;}
#container img{display:block;width:400px;height:255px;z-index: 5;}

JavaScript

$(function() {
    var panorama = $('#panorama');
	var images = panorama.find('img');
	var len = images.length;
	var start_X = 0;
	var start_Y = 0;
    
    panorama.on('dragstart', function(event) {
    
		start_X = event.originalEvent.x;
		start_Y = event.originalEvent.y;
	});

	panorama.on('drag', function(event) {
		var mouse_X = event.originalEvent.x;
		var mouse_Y = event.originalEvent.y;

		if (mouse_X - start_X > 0) {
			moveImg('right');
			start_X = mouse_X;
		} else if (start_X - mouse_X > 0) {
			moveImg('left');
			start_X = mouse_X;
		}
	});
    function moveImg(dir) {
		var current_img = panorama.find('img:visible');
		var index = current_img.index();
		if (dir === 'right') {
			if (index + 1 === len) {
				images.eq(0).show().siblings().hide();
			} else {
				images.eq(index + 1).show().siblings().hide();
			}
		} else {
			if (index - 1 === 0) {
				images.eq(len - 1).show().siblings().hide();
			} else {
				images.eq(index - 1).show().siblings().hide();
			}
		}
	}
})