恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

CSSだけでスライダーを実装する方法

投稿日:2018-03-29 更新日:




css_sldier

 

今回は、jQueryを使わずCSSだけでスライダーを作る方法を紹介します。

 

jQueryで作ったほうがコードは短くなりますが、動作はCSSの方が軽いのでケースバイケースで使い分けましょう。

それでは早速作り方を見ていきましょう。今回は10枚の画像をスライダーに表示させていきたいと思います。

まずは、HTMLのコードです。

<div class="sliderBox">
  <ul>
    <li><a href="#"><img src="img/animal_01.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_02.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_03.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_04.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_05.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_06.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_07.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_08.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_09.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_10.jpg" width="250px" height="165px"></a></li>

<!--ループ時にかくつくのを防ぐため-->
    <li><a href="#"><img src="img/animal_01.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_02.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_03.jpg" width="250px" height="165px"></a></li>
    <li><a href="#"><img src="img/animal_04.jpg" width="250px" height="165px"></a></li>
  </ul>
</div>

 

次にCSSのコードです。


*{margin:0;padding: 0;}

/*sliderのアニメーションを指定*/
/*アニメーションの開始位置を指定*/
@keyframes slider{
  0%{
    top:0px;
    left:0px;
  }
/*アニメーションの終了位置を指定*/
/*画像10枚分のwidthをスライドさせ、開始の画像が4枚表示された時にリピート開始*/
  100%{
    top:0px;
    left:-2500px;
  }
}
.sliderBox{
/*スライダーの枠を設定する*/
/*幅を画像4枚分のwidthに指定することでループする際にコマ切れをなくす(変なところでループする)*/
  width:1000px;
/*表示したい画像の高さ*/
  height:165px;
  border:1px solid #000;

/*ボックスからはみ出た画像は表示されない*/
  overflow:hidden;
  position:fixed;
  margin-top: 20px;

/*中央寄せ*/
  left: 50%;
  margin-left: -500px;
}

.sliderBox ul{
/*画像13枚分の長さ*/
  width: 3500px;
  height: 165px;
  list-style-type: none;
/*ボックスを親に設定した位置にするため(要素の位置を動かすためにpositionを設定=スライドさせるため)*/
  position: absolute;
  animation-name: slider;
/*再生秒数を指定(スライドする速さに影響)*/
  animation-duration: 25s;
/*無限ループ再生*/
  animation-iteration-count: infinite;
/*速度を均一にする*/
  animation-timing-function: linear;
}

/*float:leftで並んだ13枚の画像幅は250px*13=3500px*/
.sliderBox ul li{
  float: left;
}

 

CSSは意外にも多くのアニメーションを実装することができます。

jQueryに頼らず、CSSの手段も選択できるとデザインの幅が広がってより良いサイト作りに繋がりそうですね。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。