左右にループするスライドを実装してみた

毎日雨ですね。
私の地元よりも今住んでいるところは、たくさんの虹が見れるので雨でもハッピーになります^^。
でも暑い…暑さには弱いです。私は冬が好きなので（知らん）。

今回は左右にループするスライドを実装してみました。
永遠ループは今まで使う機会多かったのでおなじみだったんですが、
いつも右から左に流すタイプばかりで、いざ調べてみると案外みぎから左ってなくって…。

2つ同時に実装すると動かなかったり、Wordpressに対応してなかったり…結構動かなくて実は苦戦しました。笑

で、見つけたのが今回使用した『simplyScroll.js』。
実はこのJS、開発がもう終了してるんです。でも簡単に実装できるし、オプションも利くのでやってみるとさらっと実現できました。

はじめからこれにしとけばよかった…。

以下、ソースです。

See the Pen XgEmVM by sayuri (@giraffeweb) on CodePen.0

フルスクリーンで表示すると結構インパクトのあるイメージになりますよね！

HTMLは通常通りulで囲みます。

<div id="loopSlide">
    <ul>
        <li><img src="画像URL" alt="" /></li>
        <li><img src="画像URL" alt="" /></li>
        <li><img src="画像URL" alt="" /></li>
　　<ul>

JSはCDNがあるのでさくっと読み込めます。

<script src="https://cdn.jsdelivr.net/simplyscroll/2/jquery.simplyscroll.min.js"></script>

(function($){
    $(function(){
 $('#loopSlide ul').simplyScroll({
            autoMode: 'loop',
            speed: 1,
            frameRate: 24,
            horizontal: true,
            pauseOnHover: false,
            pauseOnTouch: false
        });
         
    });
})(jQuery);

上のJSに

direction: 'backwards'

を追加すると、右から左へスライドしていた画像が逆方向にスライドします。

CSSもこれをコピーして使用してください。

.simply-scroll-container {
    position: relative;
}
.simply-scroll-clip {
    position: relative;
    overflow: hidden;
}
.simply-scroll-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.simply-scroll-list li {
    float: left; /* Horizontal scroll only */
    padding: 0;
    margin: 0;
    width: 600px;
    height: auto;
}
.simply-scroll-list li img {
    display: block;
    width: 100%;
}

うん、簡単！簡単！
さくっと実装できましたね。

みなさんもぜひ試してみてください。

Share: