無限ループ最後の画像が表示されません。。

Question

大変初歩的なミスかもしれないのですが、ご教示いただけると助かります。
何卒、よろしくお願いいたします。

###前提・実現したいこと
無限ループの横スライドを制作しています。
10枚の画像です。

###発生している問題・エラーメッセージ
最後の画像が表示されません。

###該当のソースコード

<div id="loopslider">
<ul>
<li><img src="img/img_01.png" width="500" height="500" alt="" /></li>
<li><img src="img/img_02.png" width="500" height="500" alt="" /></li>
<li><img src="img/img_03.png" width="500" height="500" alt="" /></li>
<li><img src="img/img_04.png" width="500" height="500" alt="" /></li>
<li><img src="img/img_05.png" width="500" height="500" alt="" /></li>
<li><img src="img/img_06.png" width="500" height="500" alt="" /></li>
<li><img src="img/img_07.png" width="500" height="500" alt="" /></li>
<li><img src="img/img_08.png" width="500" height="500" alt="" /></li>
<li><img src="img/img_09.png" width="500" height="500" alt="" /></li>
<li><img src="img/img_010.png" width="300" height="500" alt="" /></li>
</ul>
</div><!--/#loopslider--> 

/*///////////////////////////////////////
slider
//////////////////////////////////////*/

#loopslider {
    margin: 0 auto;
    width: 1000px;
    height: 500px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
 
#loopslider ul {
    height: 500px;
    float: left;
    display: inline;
    overflow: hidden;
}
 
#loopslider ul li {
    width: 500px;
    height: 500px;
    float: left;
    display: inline;
    overflow: hidden;
}

    #loopslider  ul li img{
        width: 100%;
        height: auto;
    }
 
/* =======================================
    ClearFixElements
======================================= */
#loopslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
#loopslider ul {
    display: inline-block;
    overflow: hidden;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#loopslider').each(function(){
        var loopsliderWidth = $(this).width();
        var loopsliderHeight = $(this).height();
        $(this).children('ul').wrapAll('<div id="loopslider_wrap"></div>');
 
        var listWidth = $('#loopslider_wrap').children('ul').children('li').width();
        var listCount = $('#loopslider_wrap').children('ul').children('li').length;
 
        var 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'},20000,'linear');
            setTimeout(function(){
                loopsliderPosition();
            },20000);
        };
 
        $('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
    });
    
});
</script>

###試したこと
画像の幅を変えてみたりしましたがダメでした。。

Comments

[m.ts10806]

「最後の画像が表示されません。」←現象再現しませんでした。最後の画像は「img/img_010.png」ですよね？再現するブラウザは何でしょうか？私はChromeで確認しました。

[chiharu]

はい。画像の指定は合ってるんです。。

[m.ts10806]

私もコメントに、他の方も回答に書いているように再現しないようです。最後の画像のwidthが他より短いのは気になりますけども(それでも再現しません)。どのような画像を使っているかわかりませんが、背景色だけの画像とか数字を書いた画像とか、もっと分かりやすい画像を作って試してみてはどうでしょうか？

[m.ts10806]

念のため、HTML・CSS・js全てを提示いただくことは可能ですか？他の要素が影響している可能性があります。

[chiharu]

ありがとうございます！わかりやす画像で差し替えてみたりいろいろして、カラム落ちが原因と判明いたしました！お騒がせいたしました。ありがとうございました！

Answer 1

再現できなかったので推測になってしまいますが、「最後だけ」という事はカラム落ちしてませんか？
リセットCSSなどで上手くulやliのmarginやpaddingを消せていない可能性が考えられます。

#loopslider ulに子要素のwidth分を掛けてCSS付与してるみたいですが、.width()で取得できるのは**paddingを含みません。**
paddingやborderを含むwidthを取得したい場合は.outerWidth()を使う必要があります。

var listWidth = $('#loopslider_wrap').children('ul').children('li').outerWidth();

Comments

[chiharu]

回答ありがとうございます！カラム落ちが原因でした！
ありがとうございます！

Answer 2

動くサンプル：https://jsfiddle.net/g411jwba/

---

Windows Firefoxで再現しませんでした。どの環境で10枚目が消えますか？

---

追記：

「消えた」とき何が起こっているかをデベロッパーツールで確認してみてください。aozukiさんのおっしゃるようにカラム落ちしている可能性があります。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

Comments

[chiharu]

回答ありがとうございます！
Mac Firefox、safari、chromeで消えてしまいます。。

[kei344]

提示したものもですが？

[chiharu]

いえ！すみません、ご提示いただいたものは正常に10枚目も表示されております。。

[chiharu]

いろいろ教えていただきありがとうございます！
カラム落ちが原因と判明いたしました！
お騒がせして申し訳ございません。

Answer 3

記載のコードをコピペしただけですが、10枚の場合も11枚の場合も（それ以外の場合も）、期待される動きとなっているように見えます。
https://jsfiddle.net/takmatz/09gcaq4o/

現象が確認できる環境、条件などを詳しく追記していただけないでしょうか？

Comments

[chiharu]

回答ありがとうございます！
現象はMac Firefox、safari、chromeで消えてしまいます。

[退会済みユーザー]

kei344さん同様に現象を確認できません（指定のどのブラウザでも。
一点、上記のページを例とした場合、ループする際「11」と「1」の間に何も画像が表示されない領域が生まれますが、この領域のことを言われているのでしょうか？

[chiharu]

回答ありがとうございます！
いえ！間ではなく画像が消えてしまっていたのですが、カラム落ちと判明いたしました。
お騒がせして申し訳ございません。
ありがとうございました！

Answer 4

どういう想定かはわかりませんが見た感じ動いているようですよ
「img/img_010.png」がじつは「img/img_10.png」とかそういう
レベルの話ではないでしょうか？

Comments

[chiharu]

回答ありがとうございます！
画像の指定は合ってるんです。例えば、上記HTMLに11枚目を足すと、10枚目は表示できて11枚目は表示されないんです。。

[yambejp]

＞ HTMLに11枚目を足すと、10枚目は表示できて11枚目は表示されないんです。

そんなことないですけどね
altをきちんと書いてみて下さい、画像が表示されなければaltが表示されているはずです

[chiharu]

回答ありがとうございます！
altきちんと記載いたしました。
カラムオチが原因と判明いたしました。
お騒がせいたしました。ありがとうございました！