WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

Swiper

f:id:mmmmofu:20170505211546p:plain

jQueryを使用せずに使用できるスライダー

公式サイト
Swiper - Most Modern Mobile Touch Slider

デモ
http://efu.sakura.ne.jp/web/swiper/

<!DOCTYPE html>
<html lang="ja">
<head>
  <div>
    <meta charset="UTF-8">
    <title>swiper</title>
    <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/style.css">

  </div>
</head>
<body>
  <!-- cube -->
  <div class="swiper-container slider_content01">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(img/ph01.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(img/ph02.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(img/ph03.jpg)"></div>
    </div>
    <div class="swiper-pagination pager01"></div>
  </div>

  <!-- coverflow -->
  <div class="swiper-container slider_content02">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(img/ph01.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(img/ph02.jpg)"></div>
      <div class="swiper-slide" style="background-image:url(img/ph03.jpg)"></div>
    </div>
    <div class="swiper-pagination pager02"></div>
  </div>
  <script src="js/swiper.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>
body {
    width: 100%;
}

.slider_content01 {
    width: 300px;
    height: 300px;
    margin: 50px auto;
}
.slider_content01 .swiper-slide {
    background-position: center;
    background-size: cover;
}

.slider_content02 {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}
.slider_content02 .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 600px;
    height:400px;
}
var swiper = new Swiper('.slider_content01', {
  pagination: '.pager01',
  effect: 'cube',
  grabCursor: true,
  cube: {
    shadow: true,
    slideShadows: true,
    shadowOffset: 20,
    shadowScale: 0.94
  }
});

var swiper2 = new Swiper('.slider_content02', {
  pagination: '.pager02',
  effect: 'coverflow',
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflow: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows : true
  }
});