ブログ/お知らせ Knowledge

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

コーディング

2017.03.31

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

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

jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法

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

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');
    });
});