JavaScript로 간단한 회전식 슬라이더 만들기

6701 단어 beginnersprogrammingwebdevjavascript
이 기사에서는 Javascript를 사용하여 매우 간단한 회전식 슬라이더를 만듭니다. 또한 기본 구조를 생성하고 Javascript Carousel Slider의 스타일을 지정하기 위해 Html 및 Css를 사용합니다. 여기에서 Javascript 캐러셀 슬라이더의 출력을 볼 수 있습니다.

오늘의 주제를 시작하기 전에 Carousel Slider가 정확히 무엇인지 살펴보겠습니다.

CSS의 캐러셀 슬라이더는 무엇입니까?

캐러셀은 단일 섹션에서 다양한 이미지나 제품을 표시하거나 보여주는 효과적인 방법입니다.

캐러셀의 장점:
캐러셀은 누군가가 새로운 제품이나 제안을 강조하고 싶을 때 아주 유용합니다. 그것도 페이지를 꽉 채우지 않고 더 적은 공간을 차지하기 때문입니다.

간단한 JS 캐러셀 소스 코드

1단계: 간단한 캐러셀 HTML 부분

먼저 HTML 코드를 살펴보겠습니다.

<!DOCTYPE html>  
 <html>  
   <head>  
     <title>  
       Carousel-Slider  
     </title>  
     <link href="/styles.css" type="text/css" rel="stylesheet">   
   </head>  
   <body>  
     <h1>Gear 4th Luffy</h1>  
     <div class="carousel">  
       <div class="carouselContainer">  
         <img class="slides" id="lastslide" src="/assets/3.jpg" alt="">  
         <img class="slides" src="/assets/1.jpg" alt="">  
         <img class="slides" src="/assets/2.jpg" alt="">  
         <img class="slides" src="/assets/3.jpg" alt="">  
         <img class="slides" id="firstslide" src="/assets/1.jpg" alt="">          
       </div>  
     </div>  
     <button class="button" id="prev">PREV</button>  
     <button class="button" id="next">NEXT</button>  
     <script src="/app.js"></script>  
   </body>  
 </html>


위의 HTML 코드에서 우리는 2개의 div 태그를 만들었습니다.
” carousel ” 클래스가 있는 첫 번째 div 태그는 Carousel의 모든 요소를 ​​보유합니다.
” carouselContainer ” 클래스가 있는 두 번째 태그는 슬라이드의 이미지를 보유합니다.
두 번째 div 태그 아래에는 슬라이드의 다음 및 이전 탐색을 위해 선언된 두 개의 버튼이 있습니다.

2단계: 간단한 캐러셀 CSS 부분
이제 HTML 코드용 CSS를 살펴보겠습니다.
오늘은 Carousel에 대한 필수적이고 기본적인 CSS만 살펴보겠습니다.

*{  
   margin: 0px;  
   padding: 0px;  
   box-sizing: border-box;  
   background-color: indigo;  
 }  
 h1{  
   text-align: center;  
   color: white;  
 }  
 .carousel{  
   width:50%;  
   margin: auto;  
   overflow: hidden;  
 }  
 .carouselContainer{  
   display: flex;  
 }  
 .slides{  
   width: 100%;  
   height:390px;  
 }  
 .button{  
   position: relative;  
   transition: 0.1s ease-in;  
 }  
 #next{  
   position: absolute;  
   background-color: white;  
   opacity: 0.5;  
   top: 25%;  
   right: 25%;  
   width: 5%;  
   height: 20%;  
   z-index: 5;  
 }  
 #next:hover{  
   opacity: 0.2;  
 }  
 #prev{position: absolute;  
   background-color: white;  
   opacity: 0.5;  
   top: 25%;  
   left: 25%;  
   width: 5%;  
   height: 20%;  
   z-index: 5;  
 }  
 #prev:hover{  
   opacity: 0.2;  
 }


3단계: 간단한 Carousel JS 코드

이제 JavaScript를 사용하여 Carousel에 생명을 불어넣어 보겠습니다. 모든 조각을 함께 가져와 작동하게 만드는 코드의 가장 중요한 부분입니다.

const carouselContainer = document.querySelector(".carouselContainer");  
 const slides = document.querySelectorAll('.slides');  
 const next = document.querySelector('#next');  
 const prev = document.querySelector('#prev');  
 let counter = 1 ;  
 const size = slides[0].clientWidth;  
 carouselContainer.style.transform = 'translateX(' + (-size * counter ) + 'px';  
 next.addEventListener('click',()=>{  
   if (counter>=slides.length)return;  
   carouselContainer.style.transition = 'transform 0.4s ease-in-out';  
   counter++;  
   carouselContainer.style.transform = 'translateX(' + (-size * counter ) + 'px';  
 });  
 prev.addEventListener('click',()=>{  
   if (counter<=0)return;  
   carouselContainer.style.transition = 'transform 0.4s ease-in-out';  
   counter--;  
   carouselContainer.style.transform = 'translateX(' + (-size * counter ) + 'px';  
 });  
 carouselContainer.addEventListener('transitionend',()=>{  
   console.log(slides[counter]);  
   if(slides[counter].id ==='lastslide'){  
   carouselContainer.style.transition = 'none';  
   counter = slides.length - 2;      
   carouselContainer.style.transform = 'translateX(' + (-size * counter ) + 'px';  
   }  
 });  
 carouselContainer.addEventListener('transitionend',()=>{  
   console.log(slides[counter]);  
   if(slides[counter].id ==='firstslide'){  
   carouselContainer.style.transition = 'none';  
   counter = slides.length - counter;      
   carouselContainer.style.transform = 'translateX(' + (-size * counter ) + 'px';  
   }  
 });


모든 코드를 적절하게 적용한 후에는 자신만의 Carousel을 성공적으로 만들 수 있습니다.

결론 — 간단한 Javascript 회전식 슬라이더

참고: Html에서 Body 태그 맨 아래에 Script 태그를 작성합니다.
이 캐러셀 예제는 diff에 반응하지 않습니다. 화면 크기 회전 목마의 개념과 작동 방식을 이해하기 위한 예일 뿐입니다.
이 링크에서 이 Carousel을 사용해 볼 수 있습니다: Carousel-Slider.
소스 코드는 모든 자산인 Carousel-Slider-Repo와 함께 내 Github에서 사용할 수 있습니다.

아래에 의견을 남기고 문의 사항이 있으면 알려주십시오.

오늘도 저희 블로그를 방문해 주셔서 감사합니다. 다른 게시물을 확인하십시오.

작성자: @OmBandiwan

최종 출력 Instagram 클론:



html과 css로 Instagram 복제 프로젝트를 성공적으로 만들었습니다. 우리는 이제 끝났습니다… 하지만 주어진 코드로 이 프로젝트를 작업해야 합니다. 또한 아래에 언급된 프로젝트에 대한 코드 펜 링크를 사용할 수 있습니다.

이 블로그 도움말 전체를 찾으시기 바랍니다. 그런 다음 추천 프런트 엔드 웹 개발 프로젝트를 위해 Instagram에서 codewithrandom을 팔로우해야 합니다. 또한 친구들이 이 블로그를 사용할 수 있도록 이 블로그를 친구들과 공유하십시오.

참조 코드 – turk aysenur

작성자 – Raghunathan s

일부 관련 주제 -

simple-javascript-carousel-how-to-create-a-carousel-using-css-js

countdown-timer-html-css

responsive-carousel-slider-using-html-css-jquery

page-flip-animation-css-page-flip-using-html-css
Flask API로 파일을 업로드하는 방법
데이터베이스 소개 - swapnakpanda

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage