CSSだけでできちゃう!overflow:scroll;を使った簡単なスライダー

CSSだけでできちゃう!overflow:scroll;を使った簡単なスライダー

今回はcssのoverflow:scroll;を使って簡単なスライダーを紹介します。Spotlightとかグノシー(アプリ)でも使われていますね。
iPhoneでは全く問題なく動きますし、Androidでも何機種かは確認できましたがちゃんと動きます。(動かない端末もあるかもですが・・・。検証しきれていません。すいません。)

Ads

はじめに

overflow:scroll;を使った実装なので、はみ出した部分をスクロールで表示させるといった具合です。ポイントもいくつかあるので、それもまじえて紹介していきますね。

まずはHTML

<div class="slider">
    <h1 class="slider__heading__title">スライダー</h1>
    <div class="slider__content">
        <ul class="slider__content__lists cf">
            <li class="slider__content__item">
                <a href="#">
                    <p class="slider__content__image"><img src="" width="235" height="135" alt=""></p>
                    <p class="slider__content__detail-title">コンテンツ1</p>
                </a>
            </li>
            <li class="slider__content__item">
                <a href="#">
                    <p class="slider__content__image"><img src="" width="235" height="135" alt=""></p>
                    <p class="slider__content__detail-title">コンテンツ2</p>
                </a>
            </li>
            <li class="slider__content__item">
                <a href="#">
                    <p class="slider__content__image"><img src="" width="235" height="135" alt=""></p>
                    <p class="slider__content__detail-title">コンテンツ3</p>
                </a>
            </li>
        </ul>
    </div>
</div>

cssはこんな感じ

/* Container
-------------------- */
.slider {
    margin: 30px;
    padding: 20px 20px 0;
    width: 320px;//コンテンツの幅を指定、はみ出た分は非表示
    background: #fff;
    -webkit-box-shadow: 0 0 3px #ccc;
       -moz-box-shadow: 0 0 3px #ccc;
            box-shadow: 0 0 3px #ccc;
}
.slider__heading__title {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 15px;
}
.slider__content {
    position: relative;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;//慣性スクロール
    transform: translateZ(0);//GPUアクセラレーションを有効にする
}

.slider__content__lists {
    margin-bottom: 20px;
    width: 825px;//slider__content__itemの幅
}

.slider__content__item {
    position: relative;
    float: left;
    margin-right: 10px;
    padding: 15px;
    width: 235px;
    background: #f7f7f7;
}
.slider__content__image {
    margin: 0 auto 10px;
    width: 235px;
}
.slider__content__detail-title {
    font-size: 12px;
}

/* clearfix
----------------------------------------------------------*/
.cf:after{
	display:block;
	height:0;
	content:"";
	visibility:hidden;
	clear:both;
}
.cf{
	zoom:1;
}

ポイント1 コンテンツの幅を指定する

width: 320px;//コンテンツの幅を指定、はみ出た分は非表示

コンテンツの幅を指定します。今回は320px。これをはみ出た分は見えなくなります。

ポイント2 慣性スクロール

-webkit-overflow-scrolling: touch;//慣性スクロール

これで、タッチ&スワイプでの慣性スクロールが可能になります。これがないとサーッとスクロールしないです。
webkit系のブラウザ拡張ですが、iOS5以上のSafari やChrome、一部のAndroid 4系ブラウザやChrome でも動作するみたいです。

ポイント3 GPUアクセラレーションを有効にする

transform: translateZ(0);//GPUアクセラレーションを有効にする

古い端末(iPhone3GS、iPhone4など)で処理が重くなるのを防ぐため、GPUアクセラレーションを有効にする措置です。

ポイント4 itemの幅の合計

width: 825px;//slider__content__itemの幅

slider__content__itemのコンテンツが今回のサンプルの場合3つありますがそれの合計を指定します。ポイントはwidth + 左右のmargin + 左右のpaddingの和にしてくださいね。

まとめ

たったこれだけでスライダーが実装できます。jQueryなどを使ったスライダーよりも軽量ですし、何より簡単ですよね。メディアクエリーを使って、PCの場合は横並びで全部表示しているのをSPの場合はこのスライダーを使ってなんて言うのもできそうです。

いいなと思ったらシェアお願いします

同じタグで検索

Ads

同じカテゴリーの記事

ページの先頭へ