jsでのスライダーライブラリ

swiper というライブラリ

githubに上がっているswiperのzipをダウンロードし、解凍する
package内のcssのswiper.cssとjsのswiper.min.jsを読み込ませたいファイルにいれる

<div class="swiper-container">
 <div class="swiper-wrapper">
   <div class="swiper-slide"><img src="img/items01.jpg" alt=""></div>
   <div class="swiper-slide"><img src="img/items02.jpg" alt=""></div>
   <div class="swiper-slide"><img src="img/items03.jpg" alt=""></div>
 </div>
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>
</div>

が基本的な構造で、クラス間違うと実装できないので、このまま使う

var swiper = new Swiper('.swiper-container', {
 navigation: {
   nextEl: '.swiper-button-next',
   prevEl: '.swiper-button-prev',
 }
});

jsコード　　ループさすには最後に
,
loop: true,
という感じでオプションをつけていく

.swiper-button-prev , .swiper-button-next{
	width : 32px;
	height : 32px;
	margin-top : -16px;
}
.swiper-button-prev{
	background : url(ここに指定したい画像パス) no-repeat center center / contain;
}
.swiper-button-next{
	background : url(ここに指定したい画像パス) no-repeat center center / contain;
}

で矢印の変更

,
loop: true,
autoplay: {
 delay: 3000,
 disableOnInteraction: true
},

でスライダーの自動再生

,
speed: 100,

で、スライドの表示速度

<div class="swiper-pagination"></div>

をhtmlのbutton-prevの前に入れると
ドットで表示

,
pagination: {
 el: '.swiper-pagination',
 clickable: true,

それのjsコード

smooth scroll というライブラリについて

githubに上がっているsmooth-scrollのzipをダウンロードし、解凍する
distのファイルの中にsmooth-scroll.polyfills.min.jsというやつをつかたいファイルに入れる
あとは、
リンクしたい箇所に『id=”hoge”』 ※hogeは適当なので、任意の名前に変更
リンクボタンに『#hoge』
optionで

var scroll = new SmoothScroll('a[href*="#"]', {
 speed: 1000,
});

を入れることにより、時間調整

scrolltrigger というライブラリについて

githubに上がっているscrolltriggerをダウンロードし、解凍する
distのファイルの中にScrollTrigger.min.jsというやつをつかたいファイルに入れる
同じように読み込ませて
効かせたいとこのクラスにvisibleを追加し、そのそとに
属性値としてdata-triggerを付与する
で下のscriptに

const trigger = new ScrollTrigger.default()
   trigger.add('[data-trigger]',
   {
     once: true,
     offset: {
         viewport: {
             y: (trigger, frame, direction) => {
                 return trigger.visible ? 0 : .3
             }
         }
     },
   },
)

ちなみにonseはスクロールの回数
.3は時間
cssに

/* アニメーション */
.visible , .invisible{
	transition : opacity 0.5s ease;
	opacity : 0.0;
}
.visible{
	opacity : 1.0;
}

を追加し、あとはオリジナルでcssに書いていく

/* 上にアニメーション */
.visible.animeTop , .invisible.animeTop{
	transition : all 0.5s;
	transform : translateY(100px);
}
.visible.animeTop{
	transform : translateY(0);
}

/* 左からアニメーション */
.visible.animeLeft , .invisible.animeLeft{
	transition : all 0.3s;
	transform : translateX(-40px);
}
.visible.animeLeft{
	transform : translateX(0);
}

といった感じ