티스토리 뷰

카테고리 없음

Swiper

James Wetzel 2016. 8. 2. 15:27
728x90
반응형

<!DOCTYPE>

<html >

<head>

<title>이벤트 목록 </title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">

  <!-- Demo styles -->

    <style>

   html, body {

       position: relative;

       height: 100%;

   }

   body {

       background: #eee;

       font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

       font-size: 14px;

       color:#000;

       margin: 0;

       padding: 0;

   }

   .swiper-container {

       width: 100%;

       height: 300px;

   }

   .swiper-slide {

       text-align: center;        

       background: #fff;

       

       /* Center slide text vertically */

       display: -webkit-box;

       display: -ms-flexbox;

       display: -webkit-flex;

       display: flex;

       -webkit-box-pack: center;

       -ms-flex-pack: center;

       -webkit-justify-content: center;

       justify-content: center;

       -webkit-box-align: center;

       -ms-flex-align: center;

       -webkit-align-items: center;

       align-items: center;

   }

    </style>

    

</head>

<body>

<div>이벤트 배너</div>

  <!-- Swiper -->

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide" data-hash="slide1"><img src="" width="100%" height="100%"></div>

            <div class="swiper-slide" data-hash="slide2"><img src="" width="100%" height="100%"></div>         

            <div class="swiper-slide" data-hash="slide3"><img src="" width="100%" height="100%"></div>

            <div class="swiper-slide" data-hash="slide4"><img src="" width="100%" height="100%"></div>

            <div class="swiper-slide" data-hash="slide5"><img src="" width="100%" height="100%"></div>

            <div class="swiper-slide" data-hash="slide6"><img src="" width="100%" height="100%"></div>

            <div class="swiper-slide" data-hash="slide7"><img src="" width="100%" height="100%"></div>

            <div class="swiper-slide" data-hash="slide8"><img src="" width="100%" height="100%"></div>

            <div class="swiper-slide" data-hash="slide9"><img src="" width="100%" height="100%"></div>

            <div class="swiper-slide" data-hash="slide10"><img src="" width="100%" height="100%"></div>

        </div>       

        <!-- Add Arrows -->

        <div class="swiper-button-next"></div>

        <div class="swiper-button-prev"></div>

    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->

    <script>    

   window.onload = function () {

       //initialize swiper when document ready  

    var swiper = new Swiper('.swiper-container', {         

         slidesPerView: 3,

         paginationClickable: true,

      nextButton: '.swiper-button-next',

        prevButton: '.swiper-button-prev',

         spaceBetween: 30

     });

       

     };   

    </script>

</body>

</html>

728x90
반응형
저작자표시 비영리 동일조건