サムネイルがアニメーションしてループするスライダー

サムネイルがアニメーションしてループするスライダー
2017年3月31日

よくサイトの横幅いっぱいに画像が流れていくやつをみます。
カルーセルスライダーと同じものなんですが、もっとダイエットしているシンプルなものを作りたかったので、調べていました。
じゃあ見つけました。

いつも参考にさせてもらっている
http://black-flag.net

下記のソースはこちらを参考にさせていただいたんものです。
scssで書いているので必要であればcssに直してくださいね。

html


scss

.carousel {
    width: 100%;
    height: 210px;
    text-align: left;
    position: relative;
    overflow: hidden;
    margin-bottom: 150px;
    &-list {
        height: 210px;
        float: left;
        display: inline;
        overflow: hidden;
    }
    &-list-item {
        width: 210px;
        height: 210px;
        margin-right: 1px;
        float: left;
        display: inline;
        overflow: hidden;
        img {
            width: 210px;
        }
    }
}

Javascript

 
$(function(){
    $('#js-loopslider').each(function(){
        const loopsliderWidth = $(this).width();
        const loopsliderHeight = $(this).height();
        $(this).children('ul').wrapAll('
'); const listWidth = $('#loopslider_wrap').children('ul').children('li').width(); const listCount = $('#loopslider_wrap').children('ul').children('li').length; const loopWidth = (listWidth)*(listCount); $('#loopslider_wrap').css({ top: '0', left: '0', width: ((loopWidth) * 2), height: (loopsliderHeight), overflow: 'hidden', position: 'absolute' }); $('#loopslider_wrap ul').css({ width: (loopWidth) }); loopsliderPosition(); function loopsliderPosition(){ $('#loopslider_wrap').css({left:'0'}); $('#loopslider_wrap').stop().animate({left:'-' + (loopWidth) + 'px'},90000,'linear'); setTimeout(function(){ loopsliderPosition(); },90000); }; $('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap'); }); });

まとめ

極力プラグインを避けないとページが重たくなってしましいますからね。
これからも実戦で使ったコードを書きためていきます。

ほなね