<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="https://codingwithnick.in/responsive-image-slider-using-html-css-javascript/#google_vignette" target="_blank" class="ke-link">https://codingwithnick.in/responsive-image-slider-using-html-css-javascript/#google_vignette</a></b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>반응형 이미지 슬라이더 | 수동 버튼 및 자동 재생 – Html Css Javascript </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>닉과 함께 코딩하기 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>에 의해 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>닉과 함께 코딩하기 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>2021년 6월 2일 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>0 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>5420 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>공유하다 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML과 CSS로 슬라이더를 만드는 방법... </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Pause </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Unmute </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Remaining Time -24:22 </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Captions </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Fullscreen </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>지금 재생 중 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML 및 CSS 웹 사이트에서 슬라이더를 만드는 방법 _ HTML CSS를 사용한 애니메이션 이미지 슬라이더 디자인 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML CSS JS로 반응형 이미지 갤러리를 만드는 방법 _ 라이트박스 이미지 갤러리 디자인 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>11:20 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>PowerPoint 튜토리얼의 반응형 사진 슬라이드쇼 애니메이션 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>11:05 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML 및 CSS 웹 사이트에서 슬라이더를 만드는 방법 _ HTML CSS를 사용한 애니메이션 이미지 슬라이더 디자인 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>26:04 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML5 &에서 jQuery를 사용하여 이미지 슬라이더를 구축하는 Javascript Setinterval() 프로젝트 CSS3 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>14:39 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML과 CSS를 사용하여 이미지 갤러리를 만드는 방법 _ HTML 웹사이트를 위한 애니메이션 이미지 갤러리 디자인 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>9:11 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML CSS JavaScript를 사용하여 이미지 슬라이더를 만드는 방법 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>11:54 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML CSS &의 이미지 슬라이더 JavaScript _ 카드 슬라이더 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>18:47 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML과 CSS를 사용하여 애니메이션으로 이미지 슬라이더를 만드는 방법 _ 애니메이션을 사용한 웹 디자인 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>13:49 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML CSS에서 반응형 이미지 슬라이더를 만드는 방법 & JavaScript_Swiperjs _ 이미지 슬라이드쇼 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>16:21 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML 및 CSS 웹 사이트에서 슬라이더를 만드는 방법 _ HTML CSS를 사용한 애니메이션 이미지 슬라이더 디자인 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>26:04 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Play Video </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Html Css Javascript를 사용하는 반응형 이미지 슬라이더 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>안녕하세요 친구 여러분, 오늘 이 블로그에서는 반응형 이미지 슬라이더 | 수동 버튼 및 자동 재생 – Html Css Javascript . 이전에 HTML 및 CSS를 사용한 반응형 탐색 모음 디자인 에 대한 블로그를 공유했습니다 . 이 블로그에서는 Html Css Javascript를 사용하여 반응형 이미지 슬라이더를 만들어 보겠습니다 . </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>오늘 이 블로그에서는 반응형 이미지 슬라이더 | 수동 버튼 및 자동 재생 기능이 있습니다. 이 슬라이더에는 5개의 이미지가 있으며, 이러한 이미지는 일정 기간이 지나면 자동으로 변경됩니다. 특정 시간 간격 후에 이미지를 변경하기 위해 JavaScript 코드를 사용했습니다. JavaScript를 모른다면  HTML 및 CSS로 자동 이미지 슬라이더를 만든 이 비디오를 시청할 수 있습니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Html Css Javascript를 사용한 반응형 이미지 슬라이더 의 비디오 튜토리얼 </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>지금 구독하세요 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>당신은 이것을 좋아할 것입니다 : </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>반응형 이미지 갤러리 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Html Css 및 Javascript를 사용하여 포트폴리오 필터 만들기 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Html Css를 사용하여 반응형 전자상거래 웹사이트 완성  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>반응형 이미지 슬라이더 [소스 코드] </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Html Css Javascript를 사용하여 이 반응형 이미지 슬라이더를 만들려면 . 먼저 HTML 파일, CSS 파일, Javascript 파일의 세 가지 파일을 만들어야 합니다. 이러한 파일을 생성한 후 주어진 소스 코드를 복사하여 텍스트 편집기에 붙여넣고 요구 사항에 따라 편집하십시오. 제공된 다운로드 버튼에서 이 반응형 이미지 슬라이더 의 소스 코드 파일을 다운로드할 수도 있습니다 . </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b># HTML 코드 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>먼저 HTML 파일(index.html)을 만들고 제공된 코드를 CSS 파일에 붙여넣습니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE HTML> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><머리> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, 초기-규모=1"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><본문> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div 클래스="슬라이드쇼-컨테이너"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="mySlides 페이드"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="numbertext">1/3</div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <img src="img1.jpg" 스타일="너비:100%"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="text">캡션 텍스트</div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="mySlides 페이드"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="numbertext">2/3</div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <img src="img2.jpg" 스타일="너비:100%"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="text">캡션 2</div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <div class="mySlides 페이드"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="numbertext">3 / 3</div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <img src="img3.jpg" 스타일="너비:100%"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <div class="text">캡션 3</div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <a class="prev" xxonclick="plusSlides(-1)">❮</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <a class="next" xxonclick="plusSlides(1)">❯</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <br> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <div style="text-align:center"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <span class="dot" xxonclick="currentSlide(1)"></span> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <span class="dot" xxonclick="currentSlide(2)"></span> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        <span class="dot" xxonclick="currentSlide(3)"></span> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    </div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <script src="script.js"></script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>에조익 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b># CSS 코드 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>둘째, CSS 파일(style.css)을 만들고 주어진 코드를 CSS 파일에 붙여넣습니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* 저작권 - NICK과 함께 코딩*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>* { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    상자 크기 조정: 테두리 상자 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>몸 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    글꼴 모음: Verdana, sans-serif; 여백:0 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.mySlides { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    디스플레이: 없음 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>img { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    수직 정렬: 중간; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* 슬라이드쇼 컨테이너 */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.슬라이드쇼-컨테이너 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  최대 너비: 80%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  위치: 상대; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  여백: 자동; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* 다음 및 이전 버튼 */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.prev, .next { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  커서: 포인터; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  위치: 절대; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  상단: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  너비: 자동; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  패딩: 16px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  여백 상단: -22px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  색상: 흰색; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  글꼴 두께: 굵게; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  글꼴 크기: 18px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  전환: 0.6초 용이성; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  테두리 반경: 0 3px 3px 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  사용자 선택: 없음; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* "다음 버튼"을 오른쪽에 배치 */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.다음 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  오른쪽: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  테두리 반경: 3px 0 0 3px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* 마우스를 올리면 약간 비치는 검정색 배경색을 추가합니다 */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.prev:호버, .next:호버 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  배경색: rgba(0,0,0,0.8); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* 캡션 텍스트 */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.텍스트 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  색상: #f2f2f2; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  글꼴 크기: 15px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  패딩: 8px 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  위치: 절대; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  하단: 8px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  너비: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  텍스트 정렬: 중앙; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* 숫자 텍스트(1/3 등) */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.번호텍스트 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  색상: #f2f2f2; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  글꼴 크기: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  패딩: 8px 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  위치: 절대; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  상단: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* 점/글머리 기호/표시 */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.점 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  커서: 포인터; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  높이: 15px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  너비: 15px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  여백: 0 2px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  배경색: #bbb; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  테두리 반경: 50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  디스플레이: 인라인 블록; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  전환: 배경색 0.6초 용이성; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.active, .dot:hover { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  배경색: #717171; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* 페이딩 애니메이션 */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.페이드 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  -webkit-animation-name: 페이드; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  -웹킷-애니메이션-기간: 1.5초; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  애니메이션 이름: 페이드; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  애니메이션 지속 시간: 1.5초; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@-webkit-keyframes 페이드 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  {불투명도: .4}에서 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  {불투명도: 1} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@keyframes 페이드 { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  {불투명도: .4}에서 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  {불투명도: 1} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* 작은 화면에서는 텍스트 크기를 줄입니다 */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@media 전용 화면 및 (최대 너비: 300px) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  .prev, .next,.text {글꼴 크기: 11px} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.점{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> 높이: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  너비: 10px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@미디어 전용 화면 및 (최대 너비: 500px) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  .prev, .next,.text {글꼴 크기: 14px} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>에조익 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b># JS 코드 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>마지막으로 JavaScript 파일( script.js )을 만들고 주어진 코드를 JavaScript 파일에 붙여넣습니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>var 슬라이드인덱스 = 1; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>showSlides(slideIndex); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>함수 plusSlides(n) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    showSlides(slideIndex += n); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>함수 currentSlide(n) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    showSlides(slideIndex = n); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>함수 showSlides(n) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    var i; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    var Slides = document.getElementsByClassName("mySlides"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    var dots = document.getElementsByClassName("dot"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    if (n > Slides.length) { 슬라이드인덱스 = 1 } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    if (n < 1) { 슬라이드인덱스 = 슬라이드.길이 } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    for (i = 0; i < 슬라이드.길이; i++) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        슬라이드[i].style.display = "없음"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    for (i = 0; i < dots.length; i++) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        dots[i].className = dots[i].className.replace(" 활성", ""); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    슬라이드[slideIndex - 1].style.display = "블록"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    dots[slideIndex - 1].className += " 활성"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>// 자동 슬라이드 자동 슬라이드가 필요한 경우 커밋 "//"을 제거하세요. </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>//var 슬라이드인덱스 = 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>//쇼슬라이드(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>//함수 showSlides() { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    //var i; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  // var Slides = document.getElementsByClassName("mySlides"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>   // for (i = 0; i < Slides.length; i++) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>   // 슬라이드[i].style.display = "없음"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>   // } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  // 슬라이드인덱스++; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>   // if (slideIndex > Slides.length) { SlideIndex = 1 } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>   // 슬라이드[slideIndex - 1].style.display = "블록"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>   // setTimeout(showSlides, 2000); // 2초마다 이미지 변경 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>//} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>그게 다입니다. 이제 Html Css Javascript를 사용하여 반응형 이미지 슬라이더를 성공적으로 만들었습니다 . 코드가 작동하지 않거나 오류 및 문제가 발생한 경우 제공된 다운로드 버튼에서 소스 코드를 다운로드하십시오. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이 블로그가 도움이 되길 바랍니다. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>지금 다운로드 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>더 읽기 – </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Html 및 Css를 사용하여 반응형 이미지 갤러리를 만드는 방법 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Htm Css JS를 사용하여 온라인 상점 웹사이트를 만드는 방법 | 다중 페이지 웹사이트 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Javascript를 사용하여 음악 플레이어 만들기 | 자바스크립트 오디오 플레이어 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>공유하다 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이전 기사 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML과 CSS를 사용한 반응형 네비게이션 바 디자인 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>다음 기사 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML CSS Bootstrap4를 사용하여 이력서 CV 웹사이트를 만드는 방법 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>닉과 함께 코딩하기 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>닉과 함께 코딩하기 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="https://codingwithnick.in" target="_blank" class="ke-link">https://codingwithnick.in</a></b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>관련 기사 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이미지 슬라이더 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Html Css 및 javascript를 사용하는 배경 이미지 슬라이더 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML 및 CSS 프로젝트 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>Html Css를 사용하여 가격표 만들기 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML 및 CSS 프로젝트 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>10 CSS 버튼 호버 효과 | 버튼 애니메이션 및 호버 효과 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>답장을 남겨주세요 </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>논평: </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>논평: </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이름:* </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이름:* </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이메일:* </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>이메일:* </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>웹사이트: </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>웹사이트: </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> 다음에 댓글을 달 때 내 이름, 이메일, 웹사이트를 이 브라우저에 저장하세요. </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>html tag</b></span></p>
<!-- -->
]]>
카페 게시글
♥☞HTML 파일방◈▶
반응형 이미지 슬라이더 | 수동 버튼 및 자동 재생
gyun님
추천 0
조회 29
23.12.20 14:29
댓글 0
다음검색
