JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="block">
  <div class="animation">
    <div class="first">
      <img src="http://fpoimg.com/200x200?text=First">
    </div>
    <div>
      <img src="http://fpoimg.com/200x200?text=Second">
    </div>
    <div>
      <img src="http://fpoimg.com/200x200?text=Third">
    </div>
    <div>
      <img src="http://fpoimg.com/200x200">
    </div>
    <div>
      <img src="http://fpoimg.com/200x200">
    </div>
    <div>
      <img src="http://fpoimg.com/200x200">
    </div>
    <!-- cut -->
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

CSS

* {margin: 0; padding: 0; box-sizing: border-box;}
.block {
	overflow: hidden;
	width: 1000px;
	margin: 50px auto;
	background: #fff;
	padding: 20px;
}
.animation {
	width: auto;
	font-size: 0px;
	display: flex;
}
.animation div {
	width: auto;
	height: auto;
	margin: 0 10px;
}
.animation:hover > div, .animation.pause > div {
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -o-animation-play-state: paused !important;
	animation-play-state: paused !important;
}
.animation > div:hover img {
	border: 5px solid red;
}

JavaScript

$(window).on('load', function(){
	// 화면 로드 시 스크롤링 시작
	initSmoothScrolling('.block','smoothscroll');
	
	// 각각의 슬라이드 이미지 클릭 이벤트
	$(".animation div").each(function(i,j) {
		$(j).on("click", function() {
			$(".animation").addClass("pause");
			$('#exampleModal').modal('show');
		});
	});
	
	// 모달 팝업을 닫을 때 이벤트
	$('#exampleModal').on('hidden.bs.modal', function (event) {
		$(".animation").removeClass("pause");
	});
});

function initSmoothScrolling(container,animation) {

	var sliderWidth = 0;	
	var animationWidth = 0;	
	var sliderHeight = $('>div>div:first-of-type',container).outerHeight(false);

	$('>div>div', container).each(function(){				
		animationWidth += $(this).outerWidth(false);		
	});
	
	// 보여지는 슬라이드의 개수 확인
	var slidesVisible = $(container).width() / $('>div>div:first-of-type',container).outerWidth(false);	
	slidesVisible = Math.ceil(slidesVisible);

	// 애니메이션 스피드 설정
	var slidesNumber = $('>div>div', container).length;
	var speed = slidesNumber*2;
	
	// 무한 스크롤링을 위해 뒷부분을 덧붙임
	$('>div>div',container).slice(0,slidesVisible).clone().appendTo($('>div',container));	

	// 슬라이더 너비 감지
	$('>div>div', container).each(function(){
		sliderWidth += $(this).outerWidth(false);
	});

	// 슬라이더 면적 설정
	$('>div',container).css({'width':sliderWidth,'height':sliderHeight});
  
	// 동적 스타일 생성
	$("<style type='text/css'>@keyframes "+animation+" { 0% { margin-left: 0px; } 100% { margin-left: -"+animationWidth+"px; } } "+$('>div>div:first-of-type',container).selector+" { -webkit-animation: "+animation+" "+speed+"s linear infinite; -moz-animation: "+animation+" "+speed+"s linear infinite; -ms-animation: "+animation+" "+speed+"s linear infinite; -o-animation: "+animation+" "+speed+"s linear infinite; animation: "+animation+" "+speed+"s linear infinite; }</style>").appendTo("head");	

	// 애니메이션 재시작 (e.g. for safari & ie)
	var cl = $(container).attr("class");
	$(container).removeClass(cl).animate({'nothing':null}, 1, function () {
		$(this).addClass(cl);
	});
}