Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

初心者も!Swiper jQuery不要のスライドショー

最近jQueryを使わない流れになってきていますね。Bootstrap 5も脱jQueryになる様です。
そんなこんなで、jQueryを使わないスライダー Swiperをご紹介します。便利なのですが、初心者に分かり易い説明書きが見つからない・・・出来る限り分かり易く説明したいと思います。

公式サイト、Swiper の、デモページ には、様々なカスタマイズ例が紹介されています。

あんまり凝っても嫌煙されてしまうので、利用頻度が高いであろう
「ふんわり表示され、自動で次の写真が表示するタイプ。」
「ふんわり表示された写真がズームして、自動で次の写真が表示するタイプ。」
2種類をご紹介します。

INDEX

導入の準備

CSSとJSのリンク

<head>にCSSを。</body>の前にjsをリンクします。WordPressの方は、テーマにもよりますが、概ねheader.phpとfooter.phpではないでしょうか? functionからリンクする方法もあります。参考 CSSを読み込ませる

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

基本のhtml

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">写真へのパス</div>
    <div class="swiper-slide">写真へのパス</div>
    </div>

写真へのパスはWPなら、こんな感じになるはず。
<img src=”http://サイトURL/wp-content/uploads/2020/12/img-01.jpeg” alt=”あかさたな”/>

ふんわり自動再生

jsを追加する

jsファイルを作成するか、既存のファイルに追記します。私の場合は、wow.jsなど他にも書き込む機会があるので、あらかじめ追記用のjsファイルを1つ作っています。

original.jsなど任意のファイル名を付けて、<head>内にリンクします。

//swiper
var mySwiper = new Swiper ('.swiper-container', {
  loop: true,
  autoplay: {
  delay: 4000,
  },
  speed: 2000,
  effect: 'fade',
  fadeEffect: {
  crossFade: true
  },
})

オート(自動)で再生され、ふんわり表示を繰り返すと記載しています。

ふんわり自動再生してゆっくりZoom

swiper

Zoomに関するCSSを追加する

@keyframes zoom {
  from {transform: scale(1); }
  to {transform: scale(1.8);}
}
.swiper-container .swiper-wrapper .swiper-slide {
  overflow: hidden;
}
.swiper-container .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: auto;
}
.swiper-container .swiper-wrapper .swiper-slide-prev img,
.swiper-container .swiper-wrapper .swiper-slide-active img {
  animation-name: zoom;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

気にせずコピペで良いのですが、@keyframesはアニメーションに関するおまじないです。Zoom 等倍から1.8倍にする。4秒かけてゆっくり。数値は好みで書き換えて下さい。

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる