간단한 jQuery 슬라이더를 만드는 방법

이 기사를 사용하여 간단한 사진 캐리셀을 만들도록 안내합니다. jQuery를 기반으로 구축 된 BXSLIDER 라이브러리를 사용하고 회전 목마를 설정하기위한 많은 구성 옵션을 제공합니다.

이제 그림 회전 목마는 웹 사이트에서 필수 기능이되었습니다. 한 사진이 천 단어보다 낫습니다!

사진 회전 목마를 사용하기로 결정한 후 다음 질문은 그것을 만드는 방법입니다. 먼저 고품질 고해상도 사진을 수집해야합니다.

다음으로 HTML과 일부 JavaScript 코드를 사용하여 이미지 회전 목마를 만들어야합니다. 웹에는 다양한 방식으로 회전 목마를 만드는 데 도움이되는 라이브러리가 많이 있습니다. 오픈 소스 BXSLIDER 라이브러리를 사용할 것입니다.

BXSLIDER 라이브러리는 반응 형 디자인을 지원 하므로이 라이브러리로 구축 된 회전식은 모든 장치에 적응할 수 있습니다. 반응 형 웹 사이트를 구축하고 오늘날 다른 장치에 적응하는 것이 중요하다는 것을 알고 있습니다. 따라서 반응 형 디자인은 회전 목마를 구축하기 위해 타사 라이브러리를 선택할 때 필수 기능입니다.

다음 섹션에서는 BXSLIDER 라이브러리의 기본 사항과 설정을 탐색하기 시작합니다. 다음으로 BXSLIDER 라이브러리의 사용을 보여주는 실용적인 예를 구축 할 것입니다. 마지막으로, BXSLIDER 라이브러리에서 지원하는 중요한 매개 변수 중 일부에 대해 배우면 회전 목마를 귀하의 요구에 맞게 사용자 정의 할 수 있습니다.

bxslider는 무엇입니까?

jQuery 기반 콘텐츠 회전 목마를 찾고 있다면 BXSLIDER는 최고의 라이브러리 중 하나이며 컨텐츠 및 사진 회전 목마를 매우 쉽게 만들 수 있습니다.

그것이 제공하는 내용을 간단히 살펴 보겠습니다.

• 모든 유형의 장치에 완전히 반응하고 적응할 수 있습니다.
• 수평, 수직 및 페이드 모드와 같은 다양한 디스플레이 모드를 지원합니다. 기사의 뒷부분에서 자세히 소개하겠습니다.
• 회전 목마 내용은 사진, 비디오 또는 HTML 텍스트와 같은 컨텐츠 일 수 있습니다.
• 모든 인기있는 브라우저를 지원합니다.
• 사용자 정의 요구에 따라 회전 목마를 사용자 정의 할 수있는 다양한 구성 옵션을 제공합니다.
• 마지막으로 구현하기 쉽습니다. 다음 섹션에서 볼 수 있습니다.

이제 BXSLIDER 라이브러리의 설치 프로세스를 살펴 보겠습니다. 이 기사에서는 CDN URL을 사용하여 필요한 JavaScript 및 CSS 파일을로드하지만 공식 BXSLIDER GITHUB 리포지토리에서 이러한 파일을 다운로드하거나 복제 할 수도 있습니다.

javaScript 및 CSS 파일 포함

아래 코드 스 니펫에 표시된대로 HTML 파일에 필요한 JavaScript 및 CSS 파일을 포함하는 것입니다.

 <cod> <link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet">  <br>   HTML 문서의 태그. 보시다시피, CDN URL에서 필요한 파일을로드했습니다. 프로젝트를 위해이 파일을 다운로드 한 경우 각 파일에 대한 올바른 경로를 제공해야합니다.  <h3 id="회전-목마-내용-설정"> 회전 목마 내용 설정 </h3> <p>이 섹션에서는 HTML 파일에서 회전 목마 컨텐츠를 설정하는 방법을 배웁니다. </p> <p> 다음 코드 스 니펫을 살펴 보겠습니다. </p> <pre class="brush:php;toolbar:false"> <cod> <div class="슬라이더"> <br>  <h2 id="슬라이드"> 슬라이드 </h2> <br>  슬라이드 2  <br>  <br> <br> 회전 목마가 초기화됩니다. 위의 코드 스 니펫에서 CSS 클래스는 메인 <code> <div>  요소에 사용됩니다. 현재 <code> 슬라이더 코드>를 CSS 클래스로 사용하므로 BXSLIDER의 설정 프로세스 중에이 값을 사용할 것입니다. 물론 <p> 텍스트뿐만 아니라 무엇이든 사용할 수 있습니다. 전체 사진 회전 목마를 만드는 방법을 살펴보면 다음 섹션 에서이 부분으로 돌아갑니다. 이제 메인 <code> <div>  요소에 제공하는 CSS 클래스에 주목하면됩니다. <p> 우리의 회전 목마는 Raw HTML 만 사용하여 좋아 보이지 않으므로 제목의 배경, 글꼴 크기 및 텍스트 정렬을 지정하기 위해 추가 CSS를 추가합니다. </p> <fre> body {<br>  마진 : 20px 자동; <br>  font-family : 'lato'; <br>  <br>  너비 : 600px; <br>  <br>  배경 : 오렌지; <br>  font-size : 6rem; <br>  line-height : 3; <br>  마진 : 0; <br> } <br>   <h3 id="bxslider-초기화"> bxslider 초기화 </h3> <p> 지금까지 우리는 필요한 라이브러리 파일을 포함시키고 회전 목마에 HTML 컨텐츠를 설정했습니다. 남은 유일한 것은 Bxslider를 초기화하여 정적 HTML 컨텐츠를 아름답게 보이는 회전식 회전 목마로 변환하는 것입니다! </p> <p> 회전 목마를 초기화하는 코드 스 니펫을 살펴 보겠습니다. </p> <pre class="brush:php;toolbar:false"> <br> <br> $ (document) .ready (function () {<br> $ ( '. slider'). bxslider (); <br>}); <br> <br>  <p> 이것은 javaScript 코드이므로 <code> <crod> </crod></code> 태그에도 넣을 수도 있습니다. 또는 페이지가로드 된 후 JavaScript를 실행하기 위해 HTML 파일의 하단에 <code>  </code> 태그 바로 위에 배치 할 수 있습니다. <code> <cript> </cript></code> 태그에 넣기를 원한다면 필요한 JavaScript 및 CSS 파일이로드 된 후에 배치해야합니다. </p> <p> 보시다시피 <code> 슬라이더 </code> CSS 클래스를 사용하여 회전 목마를 초기화합니다. </p> <p>이 세 가지 간단한 단계를 통해 jQuery 기반 BXSLIDER 라이브러리를 사용하여 반응 형 회전 목마를 구축합니다! 다음은 회전 목마의 실제 효과를 보여줍니다. </p> <p> <iframe alludfullscreen="true" frameborder="no"    style="max-width:90%" loding="lazy" scrolling="no" src="https://codepen.io/tutsplus/wweflus/explus/redfulbed/redital-tepult/the%20=%20"> </iframe> </p> <p> 다음 섹션에서는 지금까지 논의한 내용을 확장 할 것이며 BXSlider 라이브러리에서 제공하는 다양한 구성 옵션을 사용하여 회전 목마를 구축하려고합니다. </p> <h2 id="실질적인-예제"> 실질적인 예제 </h2> <p> 이전 섹션에서는 BXSLIDER 라이브러리를 사용하여 기본 회전 목마를 설정하는 방법에 대해 논의했습니다. 이 섹션에서는 웹 사이트의 회전 이미지 회전 목마를 작성하는 방법을 보여주는 실용적인 예를 소개합니다. </p> <p> 문서의 루트 디렉토리에서 다음 코드 스 니펫이 포함 된 HTML 파일을 만듭니다. </p> <pre class="brush:php;toolbar:false"> <br>  <br>  <br>  <br>  <link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.csss"> <br>   <div class="슬라이더"> <br>  <liv> <img  src="https://img.php.cn/upload/article/000/000/17416235471357.jpg" title="A Beautiful Landscape " alt="간단한 jQuery 슬라이더를 만드는 방법" >  </liv>
</div> <br>  <liv> <img  src="https://img.php.cn/upload/article/000/000/174162355685315.jpg%20" title="테이블 " alt="간단한 jQuery 슬라이더를 만드는 방법" >  <bbr> g.php.cn/upload/article/000/000/000/174162355874714.jpg "title ="커피 머그 ">  </bbr></liv>