다중 부트스트랩 캐러셀 슬라이드쇼

한 페이지 또는 한 페이지에 다중 부트스트랩 회전식 슬라이드쇼 슬라이더를 어떻게 추가합니까?

이 튜토리얼에서는 작동하는 소스 코드의 샘플을 제공합니다. 먼저 페이지 하단의 Download Code 버튼을 사용하여 샘플 코드를 다운로드합니다.

페이지에 여러 개의 부트스트랩 캐러셀 슬라이더를 추가하고 생성하는 것은 매우 쉽고 간단합니다.

그럼 샘플 코드부터 시작하겠습니다.

소스 코드 다운로드가 완료되면 "multiple-bootstrap-carousels.zip" zip 파일을 받게 됩니다. 로컬 컴퓨터 시스템의 아무 곳에서나 zip 파일의 압축을 풉니다.

추출 후 "multiple-bootstrap-carousels"라는 디렉토리를 찾으면 해당 디렉토리에서 다음 자산을 얻을 수 있습니다.

1. CSS 디렉토리
2. 글꼴 디렉토리
3. 이미지 디렉토리
4. JS 디렉토리
5. CSS 디렉토리
6. HTML 파일 – multiple-bootstrap-carousels.html

이 증명들은 무엇입니까?

이러한 자산은 부트스트랩 다중 캐러셀 슬라이더를 만드는 데 필요합니다.

• CSS 디렉토리에는 반응형 HTML 페이지를 디자인하는 데 사용되는 "bootstrap.min.css" 파일이 있습니다.
• Fonts 디렉토리는 부트스트랩 CSS에서 다양한 내장 그래픽 아이콘을 생성하는 데 사용됩니다. 회전식 슬라이더 화살표 탐색 컨트롤도 이에 의해 생성됩니다. 여기에서 확인할 수 있습니다.
• 이미지 디렉토리에는 캐러셀 슬라이더의 슬라이드에 사용할 모든 이미지가 포함되어 있습니다.
• JS 디렉토리에는 "jquery.min.js"와 "bootstrap.min.js"라는 2개의 js 파일이 있습니다. jquery.min.js 파일은 jquery가 웹사이트에서 JavaScript를 사용하기 위한 JavaScript 라이브러리입니다. bootstrap.min.js 파일은 부트스트랩 캐러셀, 모델 양식, 도구 설명, 탭 등을 생성하는 데 사용되는 부트스트랩 프레임워크 js 라이브러리 파일입니다. bootstrap.min.js 파일은 jquery.min.js 파일에 종속되어 있으므로 로드가 필요합니다. 부트스트랩 js를 사용하기 전에 먼저. 여기에서 bootstrap js 라이브러리 파일에 대해 자세히 알아볼 수 있습니다.
• HTML 파일(multiple-bootstrap-carousels.html) 에는 여러 캐러셀 슬라이더의 모든 디자인과 코드 부분이 포함되어 있습니다.

multi-bootstrap-carousels.html 파일에 대해 자세히 알아보겠습니다.

HTML 파일을 모든 코드 편집기에서 열어야 합니다. 컴퓨터에 코드 편집기 도구가 설치되어 있지 않으면 여기에 몇 가지 유료 코드 편집기 도구가 있습니다. 코드 편집기 도구를 다운로드하여 설치하십시오.

헤드 섹션에서 필요한 모든 CSS 및 js 파일과 4개의 캐러셀 JS 코드를 아래와 같이 로드했습니다.

암호

 <머리>
 <title>다중 부트스트랩 캐러셀 슬라이드쇼 예</title>
 <메타 문자 집합="utf-8">
 <메타 이름="뷰포트" 콘텐츠="너비=장치 너비, 초기 크기=1">
 
 <!-- 부트스트랩 CSS 라이브러리 -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- jQuery 최신 라이브러리(이 라이브러리를 먼저 로드) -->
 <스크립트 src="js/jquery.min.js"></script>
 
 <!-- 부트스트랩 js 라이브러리 -->
 <스크립트 src="js/bootstrap.min.js"></script>
 
 <!-- CSS 코드를 사용자 정의하는 캐러셀 -->
 <스타일>
 .carousel {
 /* 여기에 슬라이더 높이 너비와 같은 사용자 정의 CSS를 추가할 수 있습니다. */
 }
 </스타일>
 
 <!-- 캐러셀 js 코드 -->
 <스크립트>

 /* 첫 번째 캐러셀 슬라이드쇼 */
 $('#carousel-1').carousel({
      // 순환 슬라이드 사이의 지연 시간, false인 경우 순환 없음
      간격: 500,

      // 마우스 입력 시 슬라이드를 일시 중지하고 마우스 이탈 시 다시 시작합니다.
      일시 중지: "호버",

      // 캐러셀이 계속 순환해야 하는지 아니면 강제로 정지해야 하는지 여부.
      랩: 사실,

      // 캐러셀이 키보드 이벤트에 반응해야 하는지 여부.
      키보드: 사실
 });
 
 
 /* 두 번째 캐러셀 슬라이드쇼 */
 $('#carousel-2').carousel({
      간격: 1000,
      랩: 사실,
      키보드: 사실
 });
 
 
 /* 세 번째 캐러셀 슬라이드쇼 */
 $('#carousel-3').carousel({
     간격: 2000,
     랩: 사실,
     키보드: 사실
 });
 
 
 /* 네 번째 캐러셀 슬라이드쇼 */
 $('#carousel-4').carousel({
     간격: 3000,
     랩: 사실,
     키보드: 사실
 });
 </스크립트>
 </head>

본문 섹션에서 두 개의 캐러셀 HTML 코드를 정의하고 있습니다. 이제 첫 번째 슬라이더 코드의 작동을 설명합니다. col-md-6 클래스를 사용하여 행 클래스 div를 두 개의 열로 나눴습니다. 그리고 첫 번째 컬럼에 아래와 같은 첫 번째 carousel 슬라이더의 HTML 코드를 추가했습니다.

 <div 클래스="행">
 <!------------- 첫 번째 열 시작 -------------->
 <div 클래스="col-md-6">
  <div 클래스="점보트론">
   <center><h3>캐러셀 1</h3></center>
   <!------------- 첫 번째 슬라이드 쇼 시작 -------------->
   <div class="carousel slide" data-ride="carousel">
   <!-- 슬라이드 글머리 기호 -->
   <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
   </ol>

   <!-- 슬라이드 래퍼 -->
   <div class="carousel-inner" role="listbox">
    
    <!-- 슬라이드 1 -->
    <div class="항목 활성">
     <img src="images/girl-1.jpg" alt="하니아">
    </div>
 
    <!-- 슬라이드 2 -->
    <div 클래스="항목">
     <img src="images/girl-2.jpg" alt="하니아">
    </div>
 
    <!-- 슬라이드 3 -->
    <div 클래스="항목">
     <img src="images/girl-3.jpg" alt="꽃">
    </div>

   </div>

   <!-- 좌우 슬라이드 컨트롤 화살표 -->
   <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">이전</span>
   </a>
   <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">다음</span>
   </a>
  </div>
  <!------------- 첫 번째 슬라이드 쇼 종료 -------------->
  </div>
 </div>
 <!------------- 첫 번째 열 끝 -------------->
</행>

위의 HTML 코드에 캐러셀 슬라이더의 세 부분이 있습니다.

• 슬라이더 총알
• 이미지 슬라이드
• 슬라이더 탐색

Slider Bullets 섹션은 HTML의 order list 태그를 사용하여 빌드합니다. <ol> 은 부트스트랩 CSS 파일에 정의된 carousel-indicators 라는 클래스를 사용합니다. 그리고 각 <li> 태그에는 data-target=”#carousel-1″ 속성이 있습니다. 여기서 #carousel-1 은 예제 코드의 첫 번째 carousel js 코드에서 사용하는 것과 동일한 ID입니다.

슬라이더 이미지 슬라이드 섹션에는 클래스 항목 이 있는 div가 있습니다. 이 div의 각각에서 슬라이드 이미지를 로드하는 이미지 태그를 추가했습니다.

슬라이더 탐색 은 이미지 슬라이드를 왼쪽 또는 오른쪽 방향으로 탐색하는 데 사용됩니다. 탐색 화살표는 Glyphicon 이라는 부트스트랩 그래픽 아이콘으로 생성됩니다. 탐색 버튼은 부트스트랩 캐러셀 데이터 속성 기능과 캐러셀 제어 클래스가 있는 앵커 <a> 태그로 래핑됩니다. href 속성의 <a> 태그에 슬라이더 글머리 기호 부분에 이전에 추가한 것과 동일한 ID( #carousel-1 )를 추가했습니다. 이 ID는 첫 번째 슬라이더 기능을 첫 번째 슬라이더 HTML 코드로 활성화하기 위해 첫 번째 캐러셀 슬라이드쇼 js 코드에 사용됩니다.

두 번째 슬라이더 코드에는 두 번째 슬라이더 js 코드, 두 번째 슬라이더 글머리 기호 및 탐색 HTML 코드와 같은 슬라이더 코드의 세 부분 모두에 대해 다른 ID #carousel-2 를 할당했습니다.

희망! 튜토리얼 및 예제 코드가 설명적이고 잘 작동한다는 것을 알게 되었습니다. 예제에 코드의 모든 섹션에 주석을 추가하여 각 코드를 쉽게 이해할 수 있습니다.

튜토리얼 언어 및 다운로드 가능한 예제 코드에 대한 제안이 있으면 메일로 보내주십시오. 이메일 주소는 awordpresslife{at}gmail{dot}com 입니다.

이 튜토리얼을 읽고 사용하고 지원해주셔서 감사합니다.

아래에서 이 튜토리얼을 작성하기 위해 찾은 유용한 참조 링크를 찾으십시오.