[HTML/Css/JS] 이미지 슬라이드 만들기

아래 동그란 버튼을 누르면 화면이 바뀌는 이미지 슬라이드를 만들고 싶었다.

원래는 자연스럽게 fadein fadeout 되는 화면을 만들고싶었는데 일단 화면 구현을 위해 옆으로 넘어가는걸 만들어따!!! 

설명은 코드 안에 주석으로 달아놓았습니당당구리당당구

 

 

 

 

HMTL

<div class="slider">
		<div class="slide_viewer">
			<div class="slide_group">
				<div class="slide"><img src="https://velog.velcdn.com/images/taeeuno_o/post/d4a70503-a625-418f-be05-53db4e72d833/image.png"></div>
				<div class="slide"><img src="https://velog.velcdn.com/images/taeeuno_o/post/07c03795-a0a9-4c7b-a4b3-56929f231a5a/image.png"></div>
				<div class="slide"><img src="https://velog.velcdn.com/images/taeeuno_o/post/6ea93b5c-c88d-48cc-982a-388e56443d39/image.png"></div>
				<div class="slide"></div>
			</div>
		</div>
	</div>

 

 

CSS  데스크탑용

/* 데스크탑 */
body {
	background-color: #4AB34A;
	font-family: 'STIX Two Math';
}

/*  이미지 슬라이드    */
.slider {
	margin: 0 auto;
	max-width: 100%;
	height: 80vh;
}

.slide_viewer {
	height: 80vh;
	overflow: hidden;
	position: relative;
}

.slide_group {
	height: 100%;
	position: relative;
	width: 100%;
}
.slide_group img{
 width:100%;
    height:100%;
    object-fit:cover;
}
.slide {
	display: none;
	height: 100%;
	position: absolute;
	width: 100%;
}

.slide:first-child {
	display: block;
}

.slide:nth-of-type(1) {
	background: #D7A151;
}

.slide:nth-of-type(2) {
	background: #F4E4CD;
}

.slide:nth-of-type(3) {
	background: #C75534;
}

.slide:nth-of-type(4) {
	background: #D1D1D4;
}

.slide_buttons {
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	bottom: 150px;
	z-index:100;
}

a.slide_btn {
	color: #474544;
	font-size: 42px;
	margin: 0 0.175em;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.slide_btn.active, .slide_btn:hover {
	color: #428CC6;
	cursor: pointer;
}

.directional_nav {
	height: 340px;
	margin: 0 auto;
	max-width: 940px;
	position: relative;
	top: -340px;
}

.previous_btn {
	bottom: 0;
	left: 100px;
	margin: auto;
	position: absolute;
	top: 0;
}

.next_btn {
	bottom: 0;
	margin: auto;
	position: absolute;
	right: 100px;
	top: 0;
}

.previous_btn, .next_btn {
	cursor: pointer;
	height: 65px;
	opacity: 0.5;
	-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-ms-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
	width: 65px;
}

.previous_btn:hover, .next_btn:hover {
	opacity: 1;
}

@media only screen and (max-width: 767px) {
	.previous_btn {
		left: 50px;
	}
	.next_btn {
		right: 50px;
	}
}

 

CSS 모바일용

/* 모바일  -------------------------------------------------------*/
@media ( max-width : 768px) {
	body {
		background-color: #FF0000;
	}
/*  이미지 슬라이드  -----------  */
.slider {
  margin: 0 auto;
  width: 100%;
  height : 50vw;
}

.slide_viewer {
  overflow: hidden;
  position: relative;
    height : 50vw;
}

.slide_group {
  height: 100%;
  position: relative;
  width: 100%;
}

.slide {
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
}

.slide:first-child {
  display: block;
}

.slide:nth-of-type(1) {
  background: #D7A151;
}

.slide:nth-of-type(2) {
  background: #F4E4CD;
}

.slide:nth-of-type(3) {
  background: #C75534;
}

.slide:nth-of-type(4) {
  background: #D1D1D4;
}

.slide_buttons {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  bottom:150px;
}

a.slide_btn {
  color: #474544;
  font-size: 42px;
  margin: 0 0.175em;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.slide_btn.active, .slide_btn:hover {
  color: #428CC6;
  cursor: pointer;
}

.directional_nav {
  height: 340px;
  margin: 0 auto;
  max-width: 940px;
  position: relative;
  top: -340px;
}

.previous_btn {
  bottom: 0;
  left: 100px;
  margin: auto;
  position: absolute;
  top: 0;
}

.next_btn {
  bottom: 0;
  margin: auto;
  position: absolute;
  right: 100px;
  top: 0;
}

.previous_btn, .next_btn {
  cursor: pointer;
  height: 65px;
  opacity: 0.5;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  width: 65px;
}

.previous_btn:hover, .next_btn:hover {
  opacity: 1;
}
.slide_buttons{
display:none;
}

	
}

 

JavaScript

//$('.slider') 선택자를 통해 모든 슬라이더 요소를 선택
//.each() 메서드를 사용해 각각에 대해 반복문을 실행
$('.slider').each(function() {
	//반복문 내부에서 변수들을 초기화
	  var $this = $(this);  // 현재 슬라이더 요소를 jQurey 객체러 저장
	  var $group = $this.find('.slide_group'); //현재 슬라이더 내에서 슬라이드 그룹을 나타내는 요소를 선택
	  var $slides = $this.find('.slide'); //현재 슬라이더 내의 개별 슬라이드 요소들을 선택
	  var bulletArray = []; // 인디케이터(버튼) 요소들을 저장한 배열을 생성
	  var currentIndex = 0; // 현재 보여지고있는 슬라이드의 인덱스를 나타내는 변수를 초기화
	  var timeout; // 자동 슬라이드 타이머를 제어하기위한 변수를 초기화
	  
	  // move(newIndex) 함수는 슬라이드를 이동하는 역할을 한다.
	  function move(newIndex) {
	    var animateLeft, slideLeft;
	    
	    advance(); // 함수를 호출하여 자동 슬라이드 타이머를 초기화
	    
	    //만약 슬라이드 그룹 '$group' 이 현재 애니메이션 중이거나 현재 인댁스 'currentIndex' 와 새 인덱스 /newIndex'가 동일한 경우 함수를 종료
	    if ($group.is(':animated') || currentIndex === newIndex) {
	      return;
	    }
	    
	    bulletArray[currentIndex].removeClass('active');
	    bulletArray[newIndex].addClass('active');
	    
	    if (newIndex > currentIndex) {
	      slideLeft = '100%';
	      animateLeft = '-100%';
	    } else {
	      slideLeft = '-100%';
	      animateLeft = '100%';
	    }
	    
	    $slides.eq(newIndex).css({
	      display: 'block',
	      left: slideLeft
	    });
	    $group.animate({
	      left: animateLeft
	    }, function() {
	      $slides.eq(currentIndex).css({
	        display: 'none'
	      });
	      $slides.eq(newIndex).css({
	        left: 0
	      });
	      $group.css({
	        left: 0
	      });
	      currentIndex = newIndex;
	    });
	  }
	  
	  function advance() {
	    clearTimeout(timeout);
	    timeout = setTimeout(function() {
	      if (currentIndex < ($slides.length - 1)) {
	        move(currentIndex + 1);
	      } else {
	        move(0);
	      }
	    }, 4000);
	  }
	  
	  
// slide_buttons 추가 -----------------
	//$slides 배열의 각 요소에 대해 반복문($.each)을 실행합니다
	  $.each($slides, function(index) {
	    var $button = $('<a class="slide_btn">&bull;</a>');
	    
	    // 현재 인덱스 'index' 가 'currentIndex'와 일치하는 경우 해당 버튼에 'active' 클래스를 추가
	    if (index === currentIndex) {
	      $button.addClass('active');
	    }
	    // 버튼에 클릭 이벤트를 연결 . 클릭스 'move(index)' 함수를 호출하여 해당 인덱스에 해당하는 슬라이스로 이동
	    $button.on('click', function() {
	      move(index);
	      // 생성된 버튼들 '.slide_buttons' 요소에 추가
	    }).appendTo('.slide_buttons');
	    // 생성된 버튼을 'bulletArray' 배열에 추가
	    bulletArray.push($button);
	  });
	  
	  advance();
	});