トップ  >  2020年  >  2020.11 [JavaScript] Swiper
features [JavaScript] Swiper
2020.11
スライドショーの「Swiper」を試してみました

Get Started

https://swiperjs.com/get-started/
上部メニューの「Get Started」のリンク先で、おおまかな使い方がわかります

CDNの場合


<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

ダウンロードの場合

https://unpkg.com/swiper/
リンク先で
「swiper-bundle.js」または「swiper-bundle.min.js」
「swiper-bundle.css」または「swiper-bundle.min.css」
ファイルのリンクをたどり、「View Raw」で表示させたものを別名で保存してください
2020.11.28現在の最新バージョンは「6.3.5」でした

デモ

Slide 1
Slide 2
Slide 3
「Get Started」にあるものを参考にここに設置してみました

HTML


<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide bg-1">Slide 1</div>
    <div class="swiper-slide bg-2">Slide 2</div>
    <div class="swiper-slide bg-3">Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-scrollbar"></div>
</div>

<style>
.swiper-container {
  width: 520px;
  height: 300px;
}
.bg-1 { background: #f99; }
.bg-2 { background: #9f9; }
.bg-3 { background: #99f; }
</style>

<script>
var mySwiper = new Swiper('.swiper-container', {
  loop: true,
  autoplay: { delay: 5000 },
  pagination: { el: '.swiper-pagination'},
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: { el: '.swiper-scrollbar' },
})
</script>
オプションがいろいろあるようなので、JavaScriptやCSSでいろいろできそうです
前
2020.12 [JavaScript] Slick
カテゴリートップ
2020年
次
2020.10 ホームページ作成サービス

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2021 keibunsya all right reserved.