Bootstrap을 사용하여 슬라이더 만들기. 몇 가지 간단한 단계로 나만의 부트스트랩 슬라이더를 만드는 방법 부트스트랩 3용 반응형 캐러셀

).

$("#myCarousel" ). on ("slide.bs.carousel" , function () ( // 무언가를 하세요... ))

Bootstrap 프레임워크의 요소에서 새로운 것을 배우고자 하는 모든 사람에게 좋은 하루입니다. 오늘의 주제는 Bootstrap Carousel 슬라이더입니다. 이것은 거의 모든 웹사이트에 있는 인기 있는 요소입니다.

따라서 Carousel 슬라이더를 만드는 방법, 이를 위해 필요한 내장 도구, 매개변수를 구성하는 방법을 설명하고 기사 끝에서 특정 예제의 구현을 보여 드리겠습니다. 그리고 이제 사업을 시작하십시오!

부트스트랩 캐러셀 플러그인 도구에 관한 모든 것

캐러셀 사진 갤러리는 새로운 제안, 제품, 현재 프로모션 목록, 편리한 포트폴리오 보기 등을 제공하는 데 사용됩니다. 따라서 오늘은 아래에서 이 플러그인으로 작업할 수 있는 것이 중요합니다. 정식 명칭부트스트랩 캐러셀 플러그인.

설명된 요소는 Internet Explorer 9 및 이전 버전에서 제대로 지원되지 않습니다. 그러나 (WordPress, Joomla! 및 기타 엔진의 경우 프레임워크 연결이 매우 간단함) 잘 작동합니다.

모든 매개변수로 쉽게 작동하고 슬라이더를 빠르게 사용자 정의하려면 Bootstrap 3의 기본 내장 클래스를 배워야 합니다.

수업	목적
회전 목마	회전 목마 슬라이더 자체를 만듭니다.
미끄러지 다	슬라이드 간에 전환하는 동안 CSS로 애니메이션 및 전환 효과를 추가합니다. 수업은 선택 사항입니다.
회전 목마 표시기	말하자면 각 이미지 하단에 작은 점 형태의 제어판을 추가하여 어떤 이미지로든 빠르게 전환할 수 있습니다. 수업은 선택 사항입니다.
회전 목마 내부	슬라이드 자체를 갤러리에 추가합니다.
캐러셀 캡션	그래픽 파일 서명을 담당합니다. 원하는 대로 포함될 수 있습니다.
안건	각 슬라이드에 대한 콘텐츠 집합을 정의합니다.
오른쪽/왼쪽 캐러셀 컨트롤	프레임 간 전환을 위해 이름에 따라 오른쪽 및 왼쪽 버튼을 추가합니다.

또한 이러한 갤러리 레이아웃의 다른 기능을 아는 것이 좋습니다.

우선 Carousel 블록 자체를 생성하려면 선언이 필요합니다. id="myCarousel"후자의 올바른 기능을 위해.

동일한 div에서 속성을 등록해야 합니다. data-ride="회전 목마", 페이지가 로드되는 즉시 애니메이션이 로드되어야 함을 지정합니다.

이제 지표로 넘어 갑시다. 각 li 태그에는 몇 가지 속성이 있어야 합니다. 데이터 대상, 특정 캐러셀의 ID를 가리키는 데이터 슬라이드, 이동할 프레임 번호를 결정합니다.

이미지를 앞뒤로 전환하는 버튼은 구현하기 위해 속성을 등록할 가치가 있습니다. 데이터 슬라이드"prev" 또는 "next" 키워드로

이제 특정 방식으로 슬라이더 표시를 편집할 수 있는 프레임워크의 기본 요소에 대해 알게 되었습니다. 당연히 자동 프레임 스크롤, 이미지 캡션 또는 측면 버튼을 비활성화할 수 있습니다.

대체 제어 메커니즘

Bootstrap의 내장 클래스를 사용하는 것 외에도 . 따라서 JS에는 $.carousel() 도구를 통해서만 모든 동일한 작업을 구현하는 많은 메서드와 옵션이 있습니다. 그 중에는 다음과 같이 나열할 수 있습니다.

지식 테스트

자, 이제 자료를 어떻게 배웠는지 확인하고 얻은 지식을 통합할 때입니다. 이를 위해 "Carousel"을 만드는 과정에서 수행해야 하는 각 작업에 대해 설명합니다.

먼저 필요한 스크립트와 스타일을 포함해야 합니다. 나는 선호하지만 공식 웹사이트에서 프레임워크를 다운로드할 수 있습니다( http://getbootstrap.com/) 다운로드한 파일을 프로젝트 디렉토리의 루트에 배치합니다.

나와 동의하면 문서 머리글에 다음과 같이 씁니다.

1 2 3

두 번째 방법을 지지하는 경우 링크의 첫 번째 부분 대신 파일 경로를 삽입해야 합니다.

이제 슬라이더에서 구현해야 합니다. 이렇게 하려면 습득한 지식을 사용하고 필요한 코드를 순서대로 작성하십시오.

1. 설명 된 도구를 담당하는 공통 블록을 여는 것;
2. 제어 지시자를 지정하기 위한 블록;
3. 슬라이드 자체를 차단합니다.
4. 측면 버튼 구현.

두 번째 및 마지막 div만 이 목록에서 제외할 수 있습니다.

이제 확실히 코드를 작성할 준비가 되었습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

/*메인 블록 생성*/ /*슬라이드 채우기*/ 로맨틱 축제 집 혼례 이전의 다음

이미지 요소 또는 회전식 텍스트 슬라이드를 반복하기 위한 슬라이드쇼 구성 요소입니다. Page Visibility API를 지원하는 브라우저에서 캐러셀은 웹 페이지가 사용자에게 표시되지 않을 때 슬라이드 전환을 방지합니다(예: 브라우저가 비활성 상태일 때 브라우저 창이 최소화되는 등). 중첩 캐러셀은 지원되지 않습니다.

예시

Internet Explorer 9에서는 애니메이션이 지원되지 않습니다.

Bootstrap은 애니메이션에 CSS3을 독점적으로 사용하지만 Internet Explorer 9는 필수 CSS 속성을 지원하지 않습니다. 따라서 이 브라우저를 사용할 때 슬라이드 전환 애니메이션이 없습니다. 우리는 의도적으로 전환에 대한 jQuery 기반 폴백을 포함하지 않기로 선택했습니다.

초기 활성 요소 필요

.active 클래스는 슬라이드 중 하나에 추가되어야 합니다. 그렇지 않으면 캐러셀이 표시되지 않습니다.

추가 타이틀

모든 .carousel-item의 .carousel-caption 요소를 사용하여 슬라이드에 캡션을 쉽게 추가할 수 있습니다. 거기에 추가 HTML을 넣으면 자동으로 정렬되고 형식이 지정됩니다.

첫 번째 슬라이드 레이블

Nulla vitae elit libero, a pharetra augue mollis interdum.

두 번째 슬라이드 레이블

Lorem ipsum dolor sitmet, consectetur adipiscing elit.

세 번째 슬라이드 레이블

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

접근성 문제

캐러셀 구성요소가 접근성 표준을 전혀 충족하지 않습니다. 호환성이 필요한 경우 콘텐츠를 표시하는 다른 방법을 고려하십시오.

용법

여러 캐러셀

캐러셀이 제대로 작동하려면 캐러셀을 관리하기 위해 가장 바깥쪽 컨테이너(.carousel에서)에 id를 사용해야 합니다. 캐러셀을 여러 개 추가하거나 캐러셀 ID를 변경할 때 해당 컨트롤을 업데이트해야 합니다.

이러한 속성으로

데이터 속성을 사용하면 캐러셀의 위치를 ​​쉽게 제어할 수 있습니다. data-slide는 현재 위치를 기준으로 슬라이더의 위치를 ​​변경하는 prev 또는 next에 의해 요청할 수 있습니다. 또는 data-slide-to를 사용하여 원시 캐러셀 슬라이드의 인덱스를 data-slide-to="2" 에 전달합니다. 이 인덱스 정의는 0 부터 시작하는 인덱스 정의로 슬라이드의 위치를 ​​오프셋합니다.

data-ride="carousel" 속성은 페이지 로드부터 시작하는 애니메이션으로 캐러셀을 지정하는 데 사용됩니다. 동일한 캐러셀의 (불필요하게) 명시적 JavaScript 초기화와 함께 사용할 수 없습니다.

자바스크립트를 통해

다음을 사용하여 수동으로 캐러셀을 호출합니다.

$(".carousel"). 회전 목마()

옵션

매개변수는 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 매개변수 이름 data- 를 입력하십시오(예: data-interval="" ).

행동 양식

.carousel(옵션)

options 객체를 사용하여 캐러셀을 초기화하고 항목 반복을 시작합니다.

$(".carousel"). 캐러셀 (( 간격 : 2000 ))

.carousel("주기")

캐러셀 항목을 왼쪽에서 오른쪽으로 반복합니다.

.carousel("일시 중지")

캐러셀이 항목을 반복하는 것을 중지합니다.

.carousel(숫자)

특정 프레임에 대한 회전식 순환(0부터 시작, 배열과 유사).

.carousel("이전")

이전 지점으로 순환합니다.

.carousel("다음")

다음 항목으로 순환합니다.

개발

Bootstrap carousel 클래스는 carousel 기능에 연결하는 두 가지 이벤트를 제공합니다. 두 이벤트에는 다음과 같은 추가 속성이 있습니다.

• 방향: 캐러셀이 롤백되는 방향("왼쪽" 또는 "오른쪽")입니다.
• relatedTarget: DOM 요소가 활성 요소로 슬라이드됩니다.

모든 캐러셀 이벤트는 캐러셀 자체에서 시작됩니다(즉,