BxCarousel은 다양한 구성을 갖춘 사용하기 쉬운 Jquery 이미지 스크롤 플러그인입니다. 주요 기능은 다음과 같습니다.
◆ 표시할 총 요소 수를 지정할 수 있습니다
◆ 표시할 요소 수를 지정할 수 있습니다. 매번 스크롤
◆ 자동 재생 모드
◆ 이전/다음 버튼은 그림의 흐름을 제어합니다
매개변수 의미:
display_num: 요소 수, 여러 그림 표시
move: 좌우 컨트롤 키를 클릭하면 이동할 요소의 개수, 2개의 이미지가 이동됩니다.
prev_image: 이전 요소 버튼 이미지
next_image: 다음 요소 버튼 이미지
margin: 이미지 사이의 간격, 일반적으로 10px로 설정
auto: 자동 스크롤 효과
controls: 왼쪽 및 오른쪽 컨트롤 버튼 표시 여부, 여기서 false는 왼쪽 및 오른쪽 컨트롤 버튼을 표시하지 않음을 의미합니다
auto_hover: 캐러셀 영역 위로 마우스를 가져갈 때 이미지 캐러셀을 중지할지 여부
BxCarousel 사용 및 구성
먼저 HTML 코드는 다음 형식을 따라야 합니다
- 첫 번째 콘텐츠
>- 두 번째 콘텐츠
- 세 번째 콘텐츠
- 네 번째 콘텐츠
bxCarousel은 요소를 무제한으로 수용할 수 있습니다
jQuery 코드는 다음 형식을 준수해야 합니다
:
$('ul').bxCarousel({
display_num: 4, // 표시할 요소 수
move: 4, // 슬라이드를 이동할 요소 수
speed: 500, / / 슬라이드 애니메이션을 완료하는 데 걸리는 시간(밀리초)
margin:0, // 각
요소에 적용할 오른쪽 여백(픽셀 단위, "px"는 포함하지 않음)
auto: false, // 사용자 클릭 없이 자동으로 슬라이드 재생
auto_interval: 2000, // 각 자동 애니메이션 사이의 시간(밀리초)
auto_dir : 'next', // 자동 슬라이드쇼 방향(옵션: 'next', 'prev')
auto_hover: false, // 사용자가 슬라이드쇼 위로 마우스를 가져갈 때 슬라이드쇼를 중지할지 결정합니다.
next_text: 'next', // 'next' 컨트롤에 사용할 텍스트
next_image: '', // 'next' 컨트롤에 사용할 이미지
prev_text: 'prev', // 'prev' 컨트롤에 사용할 텍스트
prev_image: '', // 사용할 이미지 '이전' 컨트롤
controls: true // 컨트롤 표시 여부 결정
})
})
div.bx_container 및 div와 같은 HTML 요소 .bx_wrap은 js에 의해 생성되고 추가됩니다. bxCarousel 플러그인을 사용할 때 시각적 아름다움을 얻으려면 div.bx_container, div.bx_wrap 및 내부 하위 요소에 필요한 CSS 스타일을 설정해야 합니다.
bxCarousel은 무한 루프 메커니즘이라는 점에 유의하세요. HTML에 어떤 일이 일어나는지 보려면 다음 버튼을 계속 클릭하세요! !
bxCarousel은 이미지뿐만 아니라 다른 HTML 요소에서도 작동합니다.
자동 속성을 활성화하는 경우 속도 속성 값이 지속 시간보다 작은지 확인하세요.
예제 코드
:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
