今回は CSSでスライドショーを無限ループさせます。
スライドショーならReactとかでも方法はあるらしいのですが、今回はCSSを使ってやってみました。
大体やりたいことこんな感じです。
この記事でわかること
・CSSのアニメーションの使い方
・画像を無限ループさせる方法
それでは今回もこんな感じでやっていきたいと思います。
スライドショー 無限ループ
画像の設定
まずは画像の設定からしていきます。
Gatsbyに場合は、<img src="イメージ.jpg" alt="">このようにしても表示されないので、インポートしてから{Image1}のようにして表示させなければいけません。
import React from 'react'
import styled from 'styled-components';
import { Button } from './Button';
//他のファイルからButton変数をインポート(今回は無視してください)
import Image1 from '../assets/images/画像ファイルjpg';
import Image2 from '../assets/images/画像ファイルjpg';
import Image3 from '../assets/images/画像ファイルjpg';
import Image4 from '../assets/images/画像ファイルjpg';
const Shopbox = () => {
return (
<ShopboxContainer>
<TopLine>
<h2>SHOP</h2>
<p>店舗情報</p>
</TopLine>
<SliderWrapper>
<SliderBox>
<div><img src={Image1} /></div>
<div><img src={Image2} /></div>
<div><img src={Image3} /></div>
<div><img src={Image4} /></div>
<div><img src={Image1} /></div>
<div><img src={Image2} /></div>
<div><img src={Image3} /></div>
<div><img src={Image4} /></div>
<div><img src={Image1} /></div>
<div><img src={Image2} /></div>
<div><img src={Image3} /></div>
<div><img src={Image4} /></div>
</SliderBox>
</SliderWrapper>
<ShopboxBtn primary="true" border='true' to="/shop"
>
FIND US
</ShopboxBtn>
</ShopboxContainer>
)
}
export default Shopboxこんな感じで画像を表示することができます。
ただこれだけだと変数が定義されていないとエラーが出てしまうので、styled-componentsでデザインしていきます。
styled-components
それではstyled-componentsでデザインしていきましょう。
const ShopboxContainer = styled.div`
background-color: #fff;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
padding: 4rem 0;
flex-direction: column;
display: flex;
`
const TopLine = styled.div`
margin-bottom: 2rem;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
display: flex;
h2{
font-size: 3.2em;
letter-spacing: 11px;
}
P{
color: '#3b3b3b';
font-size: 1.2em;
letter-spacing: 9px;
}
`
const ShopboxBtn = styled(Button)`
border-radius: 30px;
font-family: "EB Garamond", sans-serif;;
font-size: 0.9rem;
padding: 14px 45px;
margin-top: 45px;
`
const SliderWrapper = styled.div`
width: 100%;
height: 325px;
overflow: hidden;
//画像が横幅からはみ出る部分を表示しないようにする
margin: 1rem 0;
`
const SliderBox = styled.div`
position: relative;
img{
width: 500px;
height: 325px;
float: left;
// とりあえず画像を左に寄せておく
position: relative;
margin-right: 10px;
display: block;
object-fit: cover;
}
`特に難しいことはここでは書いていません。
スライダーを作るための準備の段階です。
横一列に並べられるようにします。特に大事な部分は下の部分ですね。
const SliderWrapper = styled.div`
width: 100%;
height: 325px;
overflow: hidden;
//画像が横幅からはみ出る部分を表示しないようにする
margin: 1rem 0;
`
const SliderBox = styled.div`
position: relative;
img{
width: 500px;
height: 325px;
float: left;
// とりあえず画像を左に寄せておく
position: relative;
margin-right: 10px;
display: block;
object-fit: cover;
}
`これで横一列に画像が並んでいるはずです。
それでは、これを左方向にずらしていきます。
アニメーションでループさせる
まずはアニメーションを使うためにkeyframesをstyled-componentsでインポートしていきます。
import { keyframes } from 'styled-components'追加したら下記のように追加していきましょう。
+const slider = keyframes`
0% {
transform: translateX(0);
}
100% {
transform: translateX(-3000px);
}
`
const SliderBox = styled.div`
+ width: 1200%;
/* slideの枚数×100% */
position: relative;
+ animation: ${slider} 40s infinite linear 1s both;
//アニメーション変数 秒数 無限ループ 変化の度合い(一定) 変化遅延秒数 複数アニメーション
img{
width: 500px;
height: 325px;
float: left;
position: relative;
margin-right: 10px;
display: block;
object-fit: cover;
}この部分だけ追加すればスライダーをループさせることができます。
アニメーションに関しては下記のページで詳しく書いてありますので、わからないコードがあったら下記のページから調べるといいかもしれません。
animation
@keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes duration | timing-function | delay | name */ animation: 3s linear 1s slidein; /* @keyframes duration | name */ animation: 3s slidein;
これでスライドのアニメーションが完成しました。
思ったよりも簡単だったと思います。
最後まで読んでいただきありがとうございました。