スライドショーが無限ループしない(javascript)

Question

スライドショーが無限ループしない

初めてjavascriptを個人サイトに追加しました
Webを参考に記述したところ
「動作はするが無限ループをしない」状態で
調べても解決ができません

どうか詳しい方にご助力頂きたいです
宜しくお願い致します

<div class="slide_show">

        <div id="loopslider">
          <ul>
            <li><img src="slide01.png" alt="" /></li>
            <li><img src="slide02.png" alt="" /></li>
            <li><img src="slide03.png" alt="" /></li>
            <li><img src="slide04.png" alt="" /></li>
            <li><img src="slide05.png" alt="" /></li>
            <li><img src="slide06.png" alt="" /></li>
            <li><img src="slide07.png" alt="" /></li>
            <li><img src="slide08.png" alt="" /></li>
          </ul>
        </div>
      </div>

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


      loopsliderPosition();

      function loopsliderPosition() {
        $('#loopslider_wrap').css({
          left: '0'
        });
        $('#loopslider_wrap').stop().animate({
          left: '-' + (loopWidth) + 'px'
        }, 10000, 'linear');
        setTimeout(function() {
          loopsliderPosition();
        }, 10000);
      };

      $('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
    });
  });
</script>

.slide_show {
  background: url("https://~.jpg")no-repeat center top;
  background-size: 100%;
  height: 123vw;
}

.loopslider {
  margin: 0 auto;
  width: 80%;
  height: 60vw;
  text-align: left;
  position: relative;
  top: 65vw;
  overflow: hidden;
}

.loopslider ul {
  height: 100vw;
  float: left;
  display: inline;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.loopslider ul li {
  width: 26vw;
  height: 60vw;
  float: left;
  display: inline;
  overflow: hidden;
  padding: 0.1rem;
}

試したこと

●count = (count + 1) % imgLen;
という記述を足してみる

●他の記述の仕方を試してみる(動作せず)

Comments

[sousuke]

コードはコードブロックで囲んで下さい。
あとこれでコード全部ですか？jqueryは？

[i0k62]

有り難うございます。
コードを囲みました

コードは記したものが全てで
動きますが、無限ループはしません

[Lhankor_Mhy]

ご提示のコードを試してみましたが、ループしているようでした。何度か画像が横切っています。
https://jsfiddle.net/Lhankor_Mhy/53sm0Luc/

[i0k62]

お時間頂き有り難うございます！
URL拝見致しました！
Lankor_Mhyさんから見て、特に記述に間違いもありませんでしょうか

[Lhankor_Mhy]

文法上の間違いはないと思いますよ。
ただ問題は、想定通りに動いていない、ということですよね？

[i0k62]

有り難うございます、
そうなんです、、、、

なので他に記述の仕方やここを変えてみたら？などの知恵を
詳しい方から頂けたらと思っていたのです
恥ずかしながら私自身は書いてある事の半分くらいしか理解出来ていないので・・・

[Lhankor_Mhy]

想定している動作がどのようなものか、がわからないので、このコードが正しいのか間違っているのかがわかりません。
想定している動作をご提示いただけますか？

[i0k62]

何度も申し訳ありません、
http://black-flag.net/jquery/20110707-3305.html
上記URLに表示されている猫画像のスライダーの様なものが理想で、
記述もこちらを引用しております

もしかしたらスライダーと関係ない記述が影響している可能性もあるので、
お見せ出来ないのが不本意なのですが一旦質問を閉じたいと思います
(業務委託の域になってしまうため)

お付き合い頂き記述に間違いなしとご確認頂けましたので、十分な成果です。
全体的に不明瞭な中、何度もお時間割いて頂き有り難うございました
回答者が皆怖いと聞いていたので、Lhankor_Mhyさんにお付き合い頂き見識が変わりました
心より感謝申し上げます

[Lhankor_Mhy]

あー、わかりました。
回答します。

Answer 1

cssだけで行けると思ったら無理ゲーやった。
算数強い人なら「画像のwidthが一定」の条件で
・画像の数
・表示領域のwidth
とか与えてdelayと初期位置計算できそうな気もするけど自分は考えただけで吐き気するわ。
固定すれば調整するだけだし楽ね…https://jsfiddle.net/bpzek1cf/

<div class="main">
    <img style="animation-delay:0s;" src="http://placehold.jp/0000ff/ffffff/100x100.png?text=slide01.png" alt="" />
    <img style="animation-delay:4s;" src="http://placehold.jp/00ff00/ffffff/100x100.png?text=slide02.png" alt="" />
    <img style="animation-delay:8s;" src="http://placehold.jp/ff0000/ffffff/100x100.png?text=slide03.png" alt="" />
    <img style="animation-delay:12s;" src="http://placehold.jp/ffff00/ffffff/100x100.png?text=slide04.png" alt="" />
    <img style="animation-delay:16s;" src="http://placehold.jp/ff00ff/ffffff/100x100.png?text=slide05.png" alt="" />
    <img style="animation-delay:20s;" src="http://placehold.jp/00ffff/ffffff/100x100.png?text=slide06.png" alt="" />
</div>

.main {
  overflow: hidden;
  position: relative;
  width: 200px;
  height: 100px;
  margin: 0 auto;
}
.main > img{
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(200%);
  display: inline-block;
  animation: loop 24s linear infinite;
}
.main:hover img {
  animation-play-state: paused;
}
@keyframes loop {
    0% { transform: translateX(200%) translateY(0%); }
    50% { transform: translateX(-100%) translateY(0%); }
    60% { transform: translateX(-100%) translateY(300%); }
    70% { transform: translateX(200%) translateY(300%); }
    100% { transform: translateX(200%) translateY(0%); }
}

Comments

[i0k62]

凄い！動きました！
見本と違った記述が出来て素晴らしいです・・！
ベストアンサー済んでしまったのですが、こちらも参考にさせて頂きます！
お時間割いて頂き本当に有り難う御座います・・！

Answer 2

サンプル

.slide_show {
  background: url("https://~.jpg")no-repeat center top;
  background-size: 100%;
  height: 123vw;
}

#loopslider { /* ← .と#の間違い */
  margin: 0 auto;
  width: 80%;
  height: 60vw;
  text-align: left;
  position: relative;
  top: 65vw;
  overflow: hidden;
}

#loopslider ul { /* ← .と#の間違い */
  height: 100vw;
  float: left;
  display: inline;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

#loopslider ul li { /* ← .と#の間違い */
  width: 26vw;
  height: 60vw;
  float: left;
  display: inline;
  overflow: hidden;
  /* padding: 0.1rem; ← カラム落ちしてたので削除 */
   
}

// ↓元記事のコードと比べると、これが抜けている
        $('#loopslider_wrap ul').css({
            width: (loopWidth)
        });

Comments

[i0k62]

あなたが神か・・・！
無事ループ致しました！！
最後まで本当に有り難う御座います・・！