PROGRAMMING

CSSでスライドショーを無限ループさせる【Gatsbyjs】

今回は 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;

これでスライドのアニメーションが完成しました。

思ったよりも簡単だったと思います。

最後まで読んでいただきありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.