Carousel bxSlider 활용
1) Carousel_bxSLIDER
※ 회전하는 UI 표현 Carousel(캐러셀)
Carousel(캐러셀)은 "회전 목마"라는 의미를 갖고 있으며,
여러 내용을 회전하면서 보여주고 마지막 내용 다음에는
다시 첫 번째 내용으로 내용을 보여줍니다.
한 공간에서 여러 내용을 번갈아 보여주기 때문에 한정된 공간에서
최대한 많은 내용을 보여줄 경우 활용합니다.
1. bxSlider 플러그인 활용 Carousel(캐러셀) 구현
https://bxslider.com/
1) 앞서 웹사이트에서 bxSlider zip 파일을 다운로드 받습니다.
그리고, dist폴더에 있는 css파일과 js 파일을 다음과 같이 연결해 줍니다.
물론, jQuery 파일도 연결해 줍니다.
[다음]
</link rel="stylesheet" href="css>
2) [중요] 예시 코딩 확인 : 1) Carousel_bxSlider.html
3) 주요 bxSlider 옵션 의미 : https://bxslider.com/options/
captions: true - 이미지 위에 텍스트를 올리기 위해 사용합니다.
captions 옵션을 true로 하면 이미지의 title속성값이 이미지 하단에 캡션으로 보여집니다.
auto: true - 이미지 회전이 자동으로 시작합니다.
speed: 500 - 이미지가 다음 이미지로 바뀌는데 걸리는 시간입니다.
단위는 ms(mili seconds) 입니다. 500 ms가 기본값 입니다.
pause: 4000 - 하나의 이미지가 멈춰서 보여지는 시간입니다. 4000ms 가 기본값입니다.
mode 'fade' - 이미지가 교체되는 방식입니다.
'fade', 'horizontal', 'vertical' 을 사용할 수 있습니다.
각각 fade in/fade out, 수평 스크롤, 수직 스크롤 방식으로 이미지가 교체됩니다.
autoControls: true - 시작 중지 버튼을 보여지게 합니다.
pager: true - 페이지 바로가기 버튼을 보여지게 합니다.
4) 참고 사항 : 반응형 웹 구현
반응형 웹에서 bxSlider 를 사용할때 화면 크기에 따라 슬라이더 자체를 감췄다가
보여주는 경우 슬라이더가 다시 표시되지 않는 경우가 있습니다. 이때는 bxSlider의
reloadSlider(); 메소드를 호출해 주면 다시 보여집니다. 다음의 예시 코드는
window.matchMedia(); 를 사용해서 특정 화면 크기에서 다시 보여질 때
reloadSlider(); 를 호출 하도록 한 코드 입니다.
[예시 코드]
$(document).ready(function() {
var slider = $('.bxslider').bxSlider();
var mql = window.matchMedia("screen and (max-width: 768px)");
mql.addListener(function(e) {
if(!e.matches) {
slider.reloadSlider();
}
});
});
한 화면에 이미지가 하나만 나옴
html markup
<script src="carousel_source/js/jquery-2.2.4.min.js"></script>
<script src="carousel_source/js/jquery.bxslider.js"></script>
<script>
$(function(){
$('.bxslider').bxSlider({
//자동 실행 설정(true : 활성화)
auto : true,
//컨트롤 버튼(재생/정지) 표시
autoControls: true,
//클릭해서 자동 실행 멈출 수 있도록 지정
stopAutoOnClick : true,
//슬라이드 전환 지속 시간(다음 슬라이도로 전환되는 과정에서의 사이 시간)
// 2000ms = 2s(2초)
speed: 2000,
// 다음 전환까지 멈춰있는 시간(다음 슬라이드로 전환되기 전에 잠깐 멈춤 시간)
pause: 3000,
// 3000ms = 3s(3초)
// 페이지 표시 보여짐
// pager Default 기본값 (pager:fasle 페이지 표시 안함)
pager: true,
// 스크린에 맞춘 반응형 슬라이드 폭 설정
slideWidth: 600
});
});
</script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel bxSlider 활용</title>
<!-- bxSlider 플러그인 효과를 활용하기 위한 css 파일 연결 -->
<link rel="stylesheet" href="carousel_source/css/jquery.bxslider.css">
<!-- [if it E9]
<script src="js/html5shiv.js"></script>-->
<!--[endif] -->
<style>
#wrapper{
/* 폭 600px */
width: 600px;
/* wrapper 영역 가운데 정렬 */
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- bxslider 클래스 이름으로 구분해줍니다.
이때, bxslider 클래스 이름은 다른이름으로 해도 됩니다. -->
<div class="bxslider">
<div>
<img src="./carousel_source/images/city-1.jpg" alt="도시 이미지 1">
</div>
<div>
<img src="./carousel_source/images/city-2.jpg" alt="도시 이미지 2">
</div>
<div>
<img src="./carousel_source/images/city-3.jpg" alt="도시 이미지 3">
</div>
<div>
<img src="./carousel_source/images/city-4.jpg" alt="도시 이미지 4">
</div>
</div>
</div>
<script src="carousel_source/js/jquery-2.2.4.min.js"></script>
<script src="carousel_source/js/jquery.bxslider.js"></script>
<script>
$(function(){
$('.bxslider').bxSlider({
//자동 실행 설정(true : 활성화)
auto : true,
//컨트롤 버튼(재생/정지) 표시
autoControls: true,
//클릭해서 자동 실행 멈출 수 있도록 지정
stopAutoOnClick : true,
//슬라이드 전환 지속 시간(다음 슬라이도로 전환되는 과정에서의 사이 시간)
// 2000ms = 2s(2초)
speed: 2000,
// 다음 전환까지 멈춰있는 시간(다음 슬라이드로 전환되기 전에 잠깐 멈춤 시간)
pause: 3000,
// 3000ms = 3s(3초)
// 페이지 표시 보여짐
// pager Default 기본값 (pager:fasle 페이지 표시 안함)
pager: true,
// 스크린에 맞춘 반응형 슬라이드 폭 설정
slideWidth: 600
});
});
</script>
</body>
</html>
2. Owl Carousel 플러그인 활용 Carousel(캐러셀) 구현
Owl Carousel 플러그인은 터치 지원, 자동 스크롤, 속도 조절,
오른쪽에서 왼쪽으로 스크롤 등 여러 가지 기능을 갖추고 있습니다.
앞서, bxSlider 플러그인에서는 한 번에 하나의 이미지만 표시 했지만,
Owl Carousel 플러그인을 사용하면 한 화면에 여러 개의 이미지를 표시하고
스크롤하는 방법 구현을 손쉽게 할 수 있습니다.
1) 공식 웹사이트 : Owl Carousel 플러그인 다운로드
https://owlcarousel2.github.io/OwlCarousel2/
2) Owl Carousel 플러그인 사용법 안내서 참고
https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html
3) [중요] 예시 코딩 확인 : 2) Owl_Carousel.html
4) Owl Carousel 플러그인 옵션
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
Options | Owl Carousel | 2.3.4
Options List including all options from built-in plugins video, lazyload, autoheight and animate. items Type: Number Default: 3 The number of items you want to see on the screen. margin Type: Number Default: 0 margin-right(px) on item. loop Type: Boolean D
owlcarousel2.github.io
html markup
script 적용
java script
<script src="./carousel_source/js/jquery-2.2.4.min.js"></script>
<script src="carousel_source/js/owl.carousel.js"></script>
<script src="./carousel_source/js/owl.autoplay.js"></script>
<script src="./carousel_source/js/owl.navigation.js"></script>
<script>
$(function(){
var owl = $('.owl-carousel')
owl.owlCarousel({
// 화면에 표시할 항목 개수지정
// : 한번에 여러개의 이미지를 carousel 로 표현합니다.
item:3,
// 무한 반복 적용 여부를 설정해 줍니다.
loop: true,
// 항목과 항목 사이의 간격(margin 적용)
margin: 10,
//nav 활성화
nav : true,
// navText 표현지정
navText:['이전', '다음'],
// 자동 스크롤 실행
autoplay:true,
// 자동 스크롤할 떄 시간 간격, 밀리초(milliseconds) 단위 설정
// 여기서는 3000ms = 3s(3초)로 설정해 주었습니다.
autoplayHoverPause: true,
// 실행확인 : 코딩 완료 후 웹페이지를 실행하면
// 화면에 이미지가 3개 표시되고,
// 잠시 기다리면(3000ms = 3s = 3초) 스크롤이 자동 실행을 확인합니다.
});
});
</script>
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Owl Carousel 활용</title>
<!-- Carousel 플러그인 기본 스타일 시트 적용 -->
<link rel="stylesheet" href="./carousel_source/css/owl.carousel.css">
<!-- Carousel 플로그인에서 내비게이션을 사용하기 위한 스타일 시트 적용 -->
<link rel="stylesheet" href="./carousel_source/css/owl.theme.default.min.css">
<!-- IE9 이하 버전에서는 video 태그와 같은 HTML5 태그의 호환성
문제를 해결하기 위해 아래와 같이 조건부 주석문 3줄 소스 코딩 적용함 -->
<!-- [if it E9]
<script src="js/html5shiv.js"></script>-->
<!--[endif] -->
<style>
</style>
</head>
<body>
<!-- Carousel 플러그인을 활용하여 현재 웹페이지에서
6개의 이미지를 넣고 스크롤 처리해 보겠습니다
Carousel이 들어갈 부분은 class='owl-carousel'인 div 태그로묶어준 후,
스크롤 할 슬라이드는 class = 'item'으로 지정해줍니다 -->
<div id="whpper">
<!-- Carousel의 슬라이드 영역을 지정해 줍니다. -->
<div class="owl-carousel owl-theme">
<div class="item">
<img src="./carousel_source/images/sea-1.jpg" alt="바다이미지1">
</div>
<div class="item">
<img src="./carousel_source/images/sea-2.jpg" alt="바다이미지2">
</div>
<div class="item">
<img src="./carousel_source/images/sea-3.jpg" alt="바다이미지3">
</div>
<div class="item">
<img src="./carousel_source/images/flower-1.jpg" alt="꽃이미지1">
</div>
<div class="item">
<img src="./carousel_source/images/flower-2.jpg" alt="꽃이미지1">
</div>
<div class="item">
<img src="./carousel_source/images/flower-3.jpg" alt="꽃이미지1">
</div>
</div>
</div>
<script src="./carousel_source/js/jquery-2.2.4.min.js"></script>
<script src="carousel_source/js/owl.carousel.js"></script>
<script src="./carousel_source/js/owl.autoplay.js"></script>
<script src="./carousel_source/js/owl.navigation.js"></script>
<script>
$(function(){
var owl = $('.owl-carousel')
owl.owlCarousel({
// 화면에 표시할 항목 개수지정
// : 한번에 여러개의 이미지를 carousel 로 표현합니다.
item:3,
// 무한 반복 적용 여부를 설정해 줍니다.
loop: true,
// 항목과 항목 사이의 간격(margin 적용)
margin: 10,
//nav 활성화
nav : true,
// navText 표현지정
navText:['이전', '다음'],
// 자동 스크롤 실행
autoplay:true,
// 자동 스크롤할 떄 시간 간격, 밀리초(milliseconds) 단위 설정
// 여기서는 3000ms = 3s(3초)로 설정해 주었습니다.
autoplayTimeout : 3000,
//내용 위로 마우스 포인터를 올리면 자동 스크롤을 일시 멈춤
autoplayHoverPause: true,
// 실행확인 : 코딩 완료 후 웹페이지를 실행하면
// 화면에 이미지가 3개 표시되고,
// 잠시 기다리면(3000ms = 3s = 3초) 스크롤이 자동 실행을 확인합니다.
});
});
</script>
</body>
</html>'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| AOS(Animate on scroll library) (0) | 2023.08.09 |
|---|---|
| PARALLAX_SCROLLING (0) | 2023.08.07 |
| 주소 API 연동 (0) | 2023.08.04 |
| LANDING PAGE 구현 (0) | 2023.08.04 |
| [JAVASCRIPT] AJAX _2 (0) | 2023.08.03 |