반응형

owl carousel 한 화면에 여러개의 이미지를 나타내며 돌아가는 기능을 합니다.

 

1. 다운로드

owlcarousel2.github.io/OwlCarousel2에서 압축 파일을 다운로드 합니다. 필요한 파일은 dist\assets폴더 내부의 css파일과 src\js폴더에 있는 js 파일입니다. 그리고 jquery파일도 필요하니 다운받아놓습니다.

 

 

Home | Owl Carousel | 2.3.4

Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your needs

owlcarousel2.github.io

 

2. 샘플 예제

css, js를 폴더별로 정리하고, index.html을 아래와 같이 작성합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Owl Carousel</title>
    <link rel="stylesheet" href="css/owl.carousel.css" />
    <link rel="stylesheet" href="css/owl.theme.default.css" />
</head>

<body>
    <div id="wrapper">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <img src="images/puppy-1.jpg">
            </div>
            <div class="item">
                <img src="images/puppy-2.jpg">
            </div>
            <div class="item">
                <img src="images/puppy-3.jpg">
            </div>
            <div class="item">
                <img src="images/kitten-1.jpg">
            </div>
            <div class="item">
                <img src="images/kitten-2.jpg">
            </div>
            <div class="item">
                <img src="images/kitten-3.jpg">
            </div>
        </div>
    </div>

    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/owl.autoplay.js"></script>
    <script src="js/owl.navigation.js"></script>
    <script>
        $(function () {
            $('.owl-carousel').owlCarousel({
                items: 3,
                margin: 10,
                loop: true,
                nav: true,
                navText: ['이전', '다음'],
                autoplay: true,
                autoplayTimeout: 3000,
                autoplayHoverPause: true
            });
        });
    </script>
</body>

</html>

<script>설명

items: 3 -> 한 화면에 3개의 이미지씩 보여줌
margin: 10 ->항목 사이의 간격을 10
loop: true -> 무한 반복
nav: true ->내비게이션 버튼 추가
navText: ['이전', '다음'] ->내비게이션 위에 '이전/다음' 버튼 추가
autoplay: true -> 자동 스크롤 실행
autoplayTimeout: 3000 -> 자동 스크롤 시간 간격
autoplayHoverPause: true -> 마우스 포인터를 올리면 자동 스크롤 일시 정지

 

3. 그림 다운로드

unsplash 사이트에서 적당한 이미지 다운로드합니다. 사이즈 조절도 균일하게 조절할 겸 Figma에서 불러와 jpg로 export하여 이미지를 마련했습니다. 모은 이미지들을 /images 폴더에 저장합니다.

 

4. 결과

반응형
저작자표시 (새창열림)

'Programming > Javascript' 카테고리의 다른 글

Svelte / Snowpack template 프로젝트 만들기  (0) 2021.05.20
Webpack template 프로젝트 만들기  (0) 2021.05.20
캐러셀 만들기 - with bxSlider  (0) 2021.02.24
무료 간트 차트 라이브러리 Gantt chart library  (0) 2020.12.02
mongoDB Atlas Test DB 만들기(React 강좌 중에서..)  (0) 2020.07.12
반응형

 

1. bxSlider 프러그인 다운로드

bxslider.com에서 다운로드에서 다운로드 가능합니다. 링크로 연결하는 방법이 기본으로 나와있는데, The other ways에 직접 다운로드하여 사용할 수 있도록 다운로드 경로도 제공합니다. 그리고 jquery도 필요하니, 다운받아놓습니다.

 

 

jQuery Content Slider | Responsive jQuery Slider | bxSlider

Coded with ♥ by

bxslider.com

 

2. 복사하기

압축을 풀면 dist 폴더 안에 있는 css파일과 js파일을 원하는 폴더로 옮겨서 사용합니다. 주의할 점은 images 폴더를 css 파일들을 옮겨놓은 폴더에 함께 복사해 놓아야 한다는 점입니다. 이 이미지는 스타일시트에서 사용하는 이미지들입니다.

 

 

3. 샘플 코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel using bxSlider.js</title>
    <link rel="stylesheet" href="css/jquery.bxslider.css">
    <style>
        #wrapper {
            width: 600px;
            margin: 0 auto;
        }
    </style>
</head>


<body>
    <div id="wrapper">
        <div class="bxslider">
            <div>
                <img src="images/Things-1.jpg" title="slider 1">
            </div>
            <div>
                <img src="images/Things-2.jpg" title="slider 2">
            </div>
            <div>
                <img src="images/Things-3.jpg" title="slider 3">
            </div>
            <div>
                <img src="images/Things-4.jpg" title="slider 4">
            </div>
        </div>
    </div>

    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/jquery.bxslider.js"></script>
    <script>
        $(function () {
            $('.bxslider').bxSlider({
                slideWidth: 600,
                caption: true,
                auto: true,
                autoControl: true,
                stopAutoOnclick: true,
            });
        });
    </script>
</body>

</html>

<script> 코드 설명:

  slideWidth: 600 -> 슬라이드의 폭은 600,

  caption: true -> 마우스 오버 시 그림 캡션 표시 true,

  auto -> 자동재생,

  autoControl -> 컨트롤 버튼(재생/정지) 표시

  stopautoOnclick: true -> 클릭해서 자동 실행 멈출 수 있도록 지정

 

추가로, 중앙정렬 옵션이 없기 때문에 style 정의에서 margin: 0 auto 옵션이 필요함.

4. 결과

반응형
저작자표시 (새창열림)

'Programming > Javascript' 카테고리의 다른 글

Webpack template 프로젝트 만들기  (0) 2021.05.20
캐러셀 만들기 - with Owl Carousel  (0) 2021.02.24
무료 간트 차트 라이브러리 Gantt chart library  (0) 2020.12.02
mongoDB Atlas Test DB 만들기(React 강좌 중에서..)  (0) 2020.07.12
electron 배포파일 만들기(electron-builder)  (0) 2020.07.05

+ Recent posts

티스토리툴바