[ 플러그인 ] 02. swiper, slick, skitter

플러그인 외

[ 플러그인 ] 02. swiper, slick, skitter

변쌤(이젠강남) 2023. 11. 1. 17:53

# swiper

https://swiperjs.com/demos

Swiper Demos

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

- CDN

https://swiperjs.com/get-started#use-swiper-from-cdn

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

<link  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

- HTML 레이아웃

https://swiperjs.com/get-started#add-swiper-html-layout

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

- js

https://swiperjs.com/get-started#initialize-swiper

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

- 기본 css

 .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

옵션

https://swiperjs.com/swiper-api#parameters

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

옵션	설명
slidesPerView	한 슬라이드에 보여줄 갯수
effect	페이드 효과 사용
spaceBetween	슬라이드 사이 여백
loop	슬라이드 반복 여부
loopAdditionalSlides	슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
pagination	pager 여부
centeredSlides	true시에 슬라이드가 가운데로 배치
allowTouchMove	false시에 스와이핑이 되지 않으며 버튼으로만 슬라이드 조작이 가능
slidesOffsetBefore	슬라이드 시작 부분 여백

# slick

https://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

- CDN

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

- html

<section id="visual">
        <div class="main-banner banner">
            <div><img src="images/visual0.png" alt=""></div>
            <div><img src="images/visual1.png" alt=""></div>
            <div><img src="images/visual2.png" alt=""></div>
            <div><img src="images/visual3.png" alt=""></div>
        </div>
</section>

- jQuery

 <script>
        $(function(){
            $('.banner').slick();
        })
</script>

$('.banner').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

샘플 - 만들어보세요

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
    <style>
    
     /* 버튼 스타일 수정하기   */
     
       #visual .slick-arrow { position: absolute; top: 50%;
            z-index: 10; width: 70px; height: 70px; 
            border-radius: 50%; background: rgba(255,255,255,0.6); color:transparent; outline: none;
            border:none;
        }        
       
        #visual .slick-arrow::after {
            font-family: xeicon!important;
            position: absolute;
            font-size: 30px; 
            color:#333;
            top: 50%; left:50%; 
            transform: translate(-50%,-50%);
        }
        #visual .slick-prev { left: 50px; }
        #visual .slick-prev::after {content: "\e93d"; }
        #visual .slick-next { right: 50px;}
        #visual .slick-next::after {content: "\e940";}
    </style>
</head>
<body>
    <h2> jQuery 형식</h2>
    <pre>
        $('선택자')
        $('아이디, 클래스, 요소').메서드();
    </pre>

    <section id="visual">
        <div class="main-banner banner">
            <div><img src="images/visual0.png" alt=""></div>
            <div><img src="images/visual1.png" alt=""></div>
            <div><img src="images/visual2.png" alt=""></div>
            <div><img src="images/visual3.png" alt=""></div>
        </div>
    </section>

    <script>
        $(function(){
            $('.banner').slick();
        })
    </script>
</body>
</html>

옵션	설명
rows: 1	이미지를 몇 줄로 표시할지 개수
dots: false	슬라이더 아래에 도트 네비게이션 버튼 표시 여부(rue or false) ▶기본값 false
infinite: true	무한반복(true or false) 기본값 true
slidesToShow: 3	한번에 보여줄 슬라이드 아이템 개수
slidesToScroll: 3	한번에 넘길 슬라이드 아이템 개수
slidesPerRow: 1	보여질 행의 수 (한 줄, 두 줄 ... )
autoplay: true	슬라이드 자동 시작(true or false) ▶기본값 false
draggable: false	슬라이드 드래그 가능여부 (true or false) ▶기본값 true
autoplaySpeed: 4000	슬라이드 자동 넘기기 시간(1000ms = 1초) 곧, 슬라이드 하나당 머무는 시간
speed: 2000	모션 시간 (1000ms = 1초) 곧, 슬라이드 사이에 넘어가는 속도
arrows: true	이전 다음 버튼 표시 여부(true or false) ▶기본값 true
centerMode: true	중앙에 슬라이드가 보여지는 모드 ▶기본값 false
centerPadding: '70px'	중앙에 슬라이드가 보여지는 모드에서 패딩 값
fade: true	페이드 모션 사용 여부 ▶기본값 false
initialSlide: 1	처음 보여질 슬라이드 번호 ▶기본값 0

샘플

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <style>
        #visual { width: 100%; position: relative; }      
        #visual .main-banner img { width: 100%; }

        #visual .slick-arrow { position: absolute; top: 50%;
            z-index: 10; width: 70px; height: 70px; 
            transform: translateY(-50%);
            border-radius: 50%; background: rgba(255,255,255,0.6); color:transparent; outline: none;
            border:none;
        }
        #visual .slick-arrow::after {
            font-family: xeicon!important;
            position: absolute;
            font-size: 30px; 
            color:#333;
            top: 50%; left:50%; 
            transform: translate(-50%,-50%);
        }
        #visual .slick-prev { left: 50px; }
        #visual .slick-prev::after {content: "\e93d"; }
        #visual .slick-next { right: 50px;}
        #visual .slick-next::after {content: "\e940";}

        #visual .slick-dots { display: flex; position: absolute; left: 50%; transform: translateX(-50%); bottom: -50px;  }
        #visual .slick-dots li { margin-right: 10px; }
        #visual .slick-dots li button { border: none;border-radius: 50%; width: 15px; height: 15px; color:transparent; cursor: pointer; background-color: #999; }
        #visual .slick-dots .slick-active button { background-color: pink;}

    </style>
</head>
<body>
    <section id="visual" >
        <div class="main-banner banner">
            <div><img src="images/big_img0.jpg" alt=""></div>
            <div><img src="images/big_img1.jpg" alt=""></div>
            <div><img src="images/big_img2.jpg" alt=""></div>
            <div><img src="images/big_img3.jpg" alt=""></div>
            <div><img src="images/big_img4.jpg" alt=""></div>
            <div><img src="images/big_img5.jpg" alt=""></div>
            <div><img src="images/big_img6.jpg" alt=""></div>
            <div><img src="images/big_img7.jpg" alt=""></div>
            <div><img src="images/big_img8.jpg" alt=""></div>             
        </div>    
    </section>   

    <script>
        $('.banner').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3,
            dots: true,           
          });
              
    </script>
</body>
</html>

샘플

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <style>
        #visual { width: 100%; position: relative; }
        #visual .main-banner {}
        #visual .main-banner .slick-slide { margin-right: 20px;}        
        #visual .main-banner div img { width: 100%; }

        #visual .slick-arrow { position: absolute; top: 50%;
            z-index: 10; width: 70px; height: 70px; transform: translateY(-50%);
            border-radius: 50%; background: rgba(199, 98, 98, 0.6); color:transparent; outline: none;
            border:none;
        }
        #visual .slick-arrow::after {
            font-family: xeicon!important;
            position: absolute;
            font-size: 30px; 
            color:#333;
            top: 50%; left:50%; 
            transform: translate(-50%,-50%);
        }
        #visual .slick-prev { left:0px; }
        #visual .slick-prev::after {content: "\e93d"; }
        #visual .slick-next { right: 0px;}
        #visual .slick-next::after {content: "\e940";}

        #visual .main-banner  .slick-slide  {    transform: scale(0.8); transition: .5s;   } 
        #visual .main-banner  .slick-current {  transform: scale(1.2);   } 

        #visual .slick-dots { display: flex; position: absolute; left: 50%; transform: translateX(-50%); bottom: -50px;  }
        #visual .slick-dots li { margin-right: 10px; }
        #visual .slick-dots li button { border: none;border-radius: 50%; width: 15px; height: 15px; color:transparent; cursor: pointer; background-color: #999; }
        #visual .slick-dots .slick-active button { background-color: pink;}

    </style>
</head>
<body>
    <section id="visual" >
        <div class="main-banner banner">
            <div><img src="images/big_img0.jpg" alt=""></div>
            <div><img src="images/big_img1.jpg" alt=""></div>
            <div><img src="images/big_img2.jpg" alt=""></div>
            <div><img src="images/big_img3.jpg" alt=""></div>
            <div><img src="images/big_img4.jpg" alt=""></div>
            <div><img src="images/big_img5.jpg" alt=""></div>
            <div><img src="images/big_img6.jpg" alt=""></div>
            <div><img src="images/big_img7.jpg" alt=""></div>
            <div><img src="images/big_img8.jpg" alt=""></div>             
        </div>    
    </section>   

    <script>
        $('.banner').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3,
            dots: true,
            autoplay:true,
            autoplaySpeed:5000,
            centerMode:true,
            centerPadding:70,
             
          });
              
    </script>
</body>
</html>

결과

# skitter

https://skitter-slider.net/

Skitter • Slideshow for anytime

Skitter is a free jQuery slider responsive with a multiple animations and options.

skitter-slider.net

- CDN

<script src="
https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/jquery.skitter.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/skitter.min.css
" rel="stylesheet">

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link href="https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/skitter.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/jquery.skitter.min.js"></script>

https://jqueryui.com/easing/

Easing | jQuery UI

Easing Apply an easing equation to an animation. All easings provided by jQuery UI are drawn above, using an HTML canvas element. Click a diagram to see the easing in action. view source 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

jqueryui.com

https://www.jsdelivr.com/package/npm/skitter-slider

jsDelivr - A free, fast, and reliable CDN for JS and Open Source

Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month.

www.jsdelivr.com

<script>
        $(document).ready(function() {
            $(".skitter-large").skitter();
          });
</script>

https://skitter-slider.net/options.html

Options • Skitter

Skitter is a free jQuery slider responsive with a multiple animations and options.

skitter-slider.net

샘플

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">   

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link href="https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/skitter.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/jquery.skitter.min.js"></script>


    <style>
        .banner { width: 100%; }
    </style>
</head>
<body>
    <div class="skitter skitter-large banner">
        <ul>
          <li>
            <a href="#cut"><img src="images/big_img0.jpg" class="cut" /></a>
            <div class="label_text"><p>cut</p></div>
          </li>
          <li>
            <a href="#swapBlocks"><img src="images/big_img1.jpg" class="swapBlocks" /></a>
            <div class="label_text"><p>swapBlocks</p></div>
          </li>
          <li>
            <a href="#swapBarsBack"><img src="images/big_img2.jpg" class="swapBarsBack" /></a>
            <div class="label_text"><p>swapBarsBack</p></div>
          </li>
        </ul>
      </div>


    <script>
        $(document).ready(function() {
            $(".skitter-large").skitter({
                navigation:true ,
                thumbs:true 
            });
             
          });
    </script>
</body>
</html>

# react

https://swiperjs.com/react

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

'플러그인 외' 카테고리의 다른 글

[ Markdown ] Markdown 작성법 (0)	2023.12.14
[ 플러그인 ] 04. Masonry, isotope (0)	2023.11.02
[ 플러그인 ] 03. AOS (1)	2023.11.02
[ 플러그인 ] 01. fancybox (1)	2023.11.01
[ Sass( SCSS ) ] 문법 (0)	2023.10.27

현재글[ 플러그인 ] 02. swiper, slick, skitter

fullstack-study

fullstack 수업진행에 필요한 참고 자료 입니다. ( 보조교재 ) ** 백문이 불여일타! **

Today :
Yesterday :

fullstack-study