swiper auto loop .. 따라해봄1 (반응형x)

http://www.wisecamp.com/event/metaconcertlive/

와이즈캠프 - 초등영어 초등수학 다 담은 초등인강 초등학습지

 

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>


<div class="bg1">
		<div class="embed_wrap">
		
		
			<img src="http://www.wisecamp.com/event/metaconcertlive/images/img_03.jpg" class="img-center">
			<img src="http://www.wisecamp.com/event/metaconcertlive/images/img_03_icon.png" class="chat_icon">
			
			
			<div class="chat_txt">
				<div class="swiper mySwiper"> 
						<div class="swiper-wrapper">
							<div class="swiper-slide swiper-no-swiping"> 
								<img src="http://www.wisecamp.com/event/metaconcertlive/images/img_03_txt.png">
							</div><!--swiper-wrapper 여기에 스타일을 추가하면 spaceBetween값 필요 --> 
						</div><!-- swiper-wrapper -->
				</div><!-- swiper -->
			</div><!-- chat_txt -->
		</div><!-- embed_wrap -->
	</div>
	
	
	<script type="text/javascript">
	var swiper = new Swiper(".mySwiper",{
		direction : "vertical",
		loop : true,
		spaceBetween : 530,
		speed : 10000,
		autoplay : {
			delay : 0,
			disableOninteraction : false
		},
	});
	
	</script>
	
	
	<style>
	.bg1 {
		background: #fbfbfb;
		display: block;
		text-align: center;
		margin: 0 auto;
		width: 100%;
		padding-top: 150px;
		padding-bottom: 150px;
	}
	
	.embed_wrap {
		position: relative;
		width: 100%;
	}
	
	.img-center {
		display: block;
		margin: 0 auto;
		border: 0px;
	}
	.chat_icon {
		position: absolute;
		left: 10%;
		top: 14%;
		z-index: 1;
	}
	
	.chat_txt {
		position: absolute;
		width: 100%;
		left: 10%;
		right: 0;
		top: 29.4%;
		bottom: 18%;
		overflow: hidden;
	}
	</style>

동영상 첨부가 안되는데.. 집가서 다시 해봄..

저 글씨 영역이 계속 움직임..

 

https://swiperjs.com/demos

Swiper Demos

 

위에 코드는 반응형이 아니라서

새로 작성중인데.. 

글씨영역이 겹친다. 

안 겹치게 하려면 

swiper-wrapper 에 높이값을 주거나

화면 넓이에 따라 spaceBetween의 값이 달라져야 하는데.. 아직 헤매는 중..