ＴＯＰのスライダーは基本的にrevolution sliderを使用するが、横幅前回になってしまったり、指定した要素の幅内に挿入、ということができないため、そういうときにはＣＳＳでスライダーを作成する。
スライダーのＣＳＳ
|
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 |
/*—— CSSスライダー ——*/ .slider{ height: 80vh; width: auto; margin: 0 auto; overflow: hidden; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .slider__content{ min-width: 100%; animation: sliderAnime 6s ease-in-out infinite; } @keyframes sliderAnime{ 0%{ } 16.6%{ transform: translateX(0); } 33.3%{ transform: translateX(-100%); } 50%{ transform: translateX(-100%); } 66.6%{ transform: translateX(-200%); } 83.2%{ transform: translateX(-200%); } 100%{ transform: translateX(0); } } .slider__img{ max-width: 100%; min-width: 100%; height: 80vh; object-fit: cover; } |
ＨＴＭＬ
|
1 2 3 4 5 |
<div class="slider"> <div class="slider__content"><img src="画像ＵＲＬ" alt="slider_image1" class="slider__img"></div> <div class="slider__content"><img src="画像ＵＲＬ" alt="slider_image2" class="slider__img"></div> <div class="slider__content"><img src="画像ＵＲＬ" alt="slider_image3" class="slider__img"></div> </div> |
コメントを残す