CSSでVertical Sliderのスタイリングをしよう!

$ tree
.
├── index.html
├── script.js
└── style.css

1

2

3

4

5

6

$ tree

.

├── index.html

├── script.js

└── style.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
    <link rel="stylesheet" href="style.css" />
    <title>Vertical Slider</title>
  </head>
  <body>
    <div class="slider-container">
      <div class="left-slide">
        <div style="background-color: #FD3555">
          <h1>Nature flower</h1>
          <p>all in pink</p>
        </div>
        <div style="background-color: #2A86BA">
          <h1>Bluuue Sky</h1>
          <p>with it's mountains</p>
        </div>
        <div style="background-color: #252E33">
          <h1>Lonely castle</h1>
          <p>in the wilderness</p>
        </div>
        <div style="background-color: #FFB866">
          <h1>Flying eagle</h1>
          <p>in the sunset</p>
        </div>
      </div>
      <div class="right-slide">
        <div style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')"></div>
        <div style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')"></div>
      </div>
      <div class="action-buttons">
        <button class="down-button">
          <i class="fas fa-arrow-down"></i>
        </button>
        <button class="up-button">
          <i class="fas fa-arrow-up"></i>
        </button>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<!DOCTYPE html>

<head>

<title>Vertical Slider</title>

</head>

<body>

<h1>Nature flower</h1>

</div>

<h1>Bluuue Sky</h1>

<p>with it's mountains</p>

</div>

<h1>Lonely castle</h1>

<p>in the wilderness</p>

</div>

<h1>Flying eagle</h1>

<p>in the sunset</p>

</div>

</div>

</button>

</button>

</div>

</body>

</html>

// 要素の取得
const sliderContainer = document.querySelector('.slider-container')
const slideRight = document.querySelector('.right-slide')
const slideLeft = document.querySelector('.left-slide')
const upButton = document.querySelector('.up-button')
const downButton = document.querySelector('.down-button')
const slidesLength = slideRight.querySelectorAll('div').length

// 現在アクティブになっているスライダーのインデックス
let activeSlideIndex = 0

// 左スライダーのtop位置を変更
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`

// クリックイベントの登録
upButton.addEventListener('click', () => changeSlide('up'))
downButton.addEventListener('click', () => changeSlide('down'))

const changeSlide = (direction) => {
    // スライドの高さを取得
    const sliderHeight = sliderContainer.clientHeight
    if(direction === 'up') {
        // 次のスライドに飛ばす
        activeSlideIndex++
        if(activeSlideIndex > slidesLength - 1) {
            activeSlideIndex = 0
        }
    } else if(direction === 'down') {
        // 前のスライドに戻す
        activeSlideIndex--
        if(activeSlideIndex < 0) {
            activeSlideIndex = slidesLength - 1
        }
    }

    // translateYでY軸方向に移動させる
    slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`
    slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`
}

// 2秒ごとに実行
setInterval(() => {changeSlide("up")}, 2000)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

// 要素の取得

const sliderContainer = document.querySelector('.slider-container')

const slideRight = document.querySelector('.right-slide')

const slideLeft = document.querySelector('.left-slide')

const upButton = document.querySelector('.up-button')

const downButton = document.querySelector('.down-button')

const slidesLength = slideRight.querySelectorAll('div').length

// 現在アクティブになっているスライダーのインデックス

let activeSlideIndex = 0

// 左スライダーのtop位置を変更

slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`

// クリックイベントの登録

upButton.addEventListener('click', () => changeSlide('up'))

downButton.addEventListener('click', () => changeSlide('down'))

const changeSlide = (direction) => {

// スライドの高さを取得

const sliderHeight = sliderContainer.clientHeight

if(direction === 'up') {

// 次のスライドに飛ばす

activeSlideIndex++

if(activeSlideIndex > slidesLength - 1) {

activeSlideIndex = 0

}

} else if(direction === 'down') {

// 前のスライドに戻す

activeSlideIndex--

if(activeSlideIndex < 0) {

activeSlideIndex = slidesLength - 1

}

// translateYでY軸方向に移動させる

slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`

slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`

}

// 2秒ごとに実行

setInterval(() => {changeSlide("up")}, 2000)

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

1

2

3

4

5

6

7

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {
  font-family: 'Open Sans', sans-serif;
  height: 100vh;
}

1

2

3

4

body {

font-family: 'Open Sans', sans-serif;

height: 100vh;

}

.slider-container {
  /* 要素の位置の起点 */
  position: relative;
  /* はみ出た要素を非表示 */
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

1

2

3

4

5

6

7

8

.slider-container {

/* 要素の位置の起点 */

position: relative;

/* はみ出た要素を非表示 */

overflow: hidden;

width: 100vw;

height: 100vh;

}

.left-slide {
  height: 100%;
  width: 35%;
  position: absolute;
  top: 0;
  left: 0;
  /* transformに対してアニメーション */
  transition: transform 0.5s ease-in-out;
}

1

2

3

4

5

6

7

8

9

.left-slide {

height: 100%;

width: 35%;

position: absolute;

top: 0;

left: 0;

/* transformに対してアニメーション */

transition: transform 0.5s ease-in-out;

}

.left-slide > div {
  height: 100%;
  width: 100%;
  /* flexアイテムにする */
  display: flex;
  /* flexアイテムを積み重ねるように配置 */
  flex-direction: column;
  /* flex横軸中央にアイテムを配置 */
  justify-content: center;
  /* flex重点にアイテムを配置 */
  align-items: center;
  color: #fff;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

.left-slide > div {

height: 100%;

width: 100%;

/* flexアイテムにする */

display: flex;

/* flexアイテムを積み重ねるように配置 */

flex-direction: column;

/* flex横軸中央にアイテムを配置 */

justify-content: center;

/* flex重点にアイテムを配置 */

align-items: center;

color: #fff;

}

.left-slide h1 {
  font-size: 40px;
  margin-bottom: 10px;
  margin-top: -30px;
}

1

2

3

4

5

.left-slide h1 {

font-size: 40px;

margin-bottom: 10px;

margin-top: -30px;

}

.right-slide {
  height: 100%;
  position: absolute;
  top: 0;
  left: 35%;
  width: 65%;
  transition: transform 0.5s ease-in-out;
}

1

2

3

4

5

6

7

8

.right-slide {

height: 100%;

position: absolute;

top: 0;

left: 35%;

width: 65%;

transition: transform 0.5s ease-in-out;

}

.right-slide > div {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  /* 画像を要素内にいい感じで納める */
  background-size: cover;
  background-position: center center;
}

1

2

3

4

5

6

7

8

.right-slide > div {

height: 100%;

width: 100%;

background-repeat: no-repeat;

/* 画像を要素内にいい感じで納める */

background-size: cover;

background-position: center center;

}

button {
  background-color: #fff;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  padding: 15px;
}

/* カーソルを乗せた時 */
button:hover {
  color: #222;
}

/* ボタンを押下した時 */
button:focus {
  /* 青線を消す */
  outline: none;
}

.slider-container .action-buttons button {
  position: absolute;
  left: 35%;
  top: 50%;
  z-index: 100;
}

.slider-container .action-buttons .down-button {
  transform: translateX(-100%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.slider-container .action-buttons .up-button {
  transform: translateY(-100%);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

button {

background-color: #fff;

border: none;

color: #aaa;

cursor: pointer;

font-size: 16px;

padding: 15px;

}

/* カーソルを乗せた時 */

button:hover {

color: #222;

}

/* ボタンを押下した時 */

button:focus {

/* 青線を消す */

outline: none;

}

.slider-container .action-buttons button {

position: absolute;

left: 35%;

top: 50%;

z-index: 100;

}

.slider-container .action-buttons .down-button {

transform: translateX(-100%);

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

}

.slider-container .action-buttons .up-button {

transform: translateY(-100%);

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

}

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", sans-serif;
  height: 100vh;
}

.slider-container {
  /* 要素の位置の起点 */
  position: relative;
  /* はみ出た要素を非表示 */
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.left-slide {
  height: 100%;
  width: 35%;
  position: absolute;
  top: 0;
  left: 0;
  /* transformに対してアニメーション */
  transition: transform 0.5s ease-in-out;
}

.left-slide > div {
  height: 100%;
  width: 100%;
  /* flexアイテムにする */
  display: flex;
  /* flexアイテムを積み重ねるように配置 */
  flex-direction: column;
  /* flex横軸中央にアイテムを配置 */
  justify-content: center;
  /* flex重点にアイテムを配置 */
  align-items: center;
  color: #fff;
}

.left-slide h1 {
  font-size: 40px;
  margin-bottom: 10px;
  margin-top: -30px;
}

.right-slide {
  height: 100%;
  position: absolute;
  top: 0;
  left: 35%;
  width: 65%;
  transition: transform 0.5s ease-in-out;
}

.right-slide > div {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  /* 画像を要素内にいい感じで納める */
  background-size: cover;
  background-position: center center;
}

button {
  background-color: #fff;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  padding: 15px;
}

/* カーソルを乗せた時 */
button:hover {
  color: #222;
}

/* ボタンを押下した時 */
button:focus {
  /* 青線を消す */
  outline: none;
}

.slider-container .action-buttons button {
  position: absolute;
  left: 35%;
  top: 50%;
  z-index: 100;
}

.slider-container .action-buttons .down-button {
  transform: translateX(-100%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.slider-container .action-buttons .up-button {
  transform: translateY(-100%);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

font-family: "Open Sans", sans-serif;

height: 100vh;

}

.slider-container {

/* 要素の位置の起点 */

position: relative;

/* はみ出た要素を非表示 */

overflow: hidden;

width: 100vw;

height: 100vh;

}

.left-slide {

height: 100%;

width: 35%;

position: absolute;

top: 0;

left: 0;

/* transformに対してアニメーション */

transition: transform 0.5s ease-in-out;

}

.left-slide > div {

height: 100%;

width: 100%;

/* flexアイテムにする */

display: flex;

/* flexアイテムを積み重ねるように配置 */

flex-direction: column;

/* flex横軸中央にアイテムを配置 */

justify-content: center;

/* flex重点にアイテムを配置 */

align-items: center;

color: #fff;

}

.left-slide h1 {

font-size: 40px;

margin-bottom: 10px;

margin-top: -30px;

}

.right-slide {

height: 100%;

position: absolute;

top: 0;

left: 35%;

width: 65%;

transition: transform 0.5s ease-in-out;

}

.right-slide > div {

height: 100%;

width: 100%;

background-repeat: no-repeat;

/* 画像を要素内にいい感じで納める */

background-size: cover;

background-position: center center;

}

button {

background-color: #fff;

border: none;

color: #aaa;

cursor: pointer;

font-size: 16px;

padding: 15px;

}

/* カーソルを乗せた時 */

button:hover {

color: #222;

}

/* ボタンを押下した時 */

button:focus {

/* 青線を消す */

outline: none;

}

.slider-container .action-buttons button {

position: absolute;

left: 35%;

top: 50%;

z-index: 100;

}

.slider-container .action-buttons .down-button {

transform: translateX(-100%);

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

}

.slider-container .action-buttons .up-button {

transform: translateY(-100%);

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

}

CSSでVertical Sliderのスタイリングをしよう!

実装するもの

ワークスペース

JavaScript版

HTML&CSS

スタイリング

全体の設定

bodyの設定

slider-container の設定

left-slideの設定

left-slide > divの設定

left-slide h1の設定

right-slideの設定

right-slide > divの設定

buttonの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年4月
月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

実装するもの

ワークスペース

JavaScript版

HTML&CSS

スタイリング

全体の設定

bodyの設定

slider-container の設定

left-slideの設定

left-slide > divの設定

left-slide h1の設定

right-slideの設定

right-slide > divの設定

buttonの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

突然「bash: __git_ps1: command not found」…

[Go言語]text/templateの使い方メモ

JavaScriptでカウントダウンアプリを作ろう!

Djangoでテスト駆動開発を学ぼう！~環境準備編~

Go言語/Selenium - Invalid session idが発生す…

[golang]fiber API3~Admin:ユーザー認証・ログアウト~

JavaScriptとGo言語でToDoリストアプリを作ろう!~Docker…

React~基礎編~Props

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル