スライダーについて教えてください

今スライダーをプラグイン無しで自作で作っているのですが上手くいきません。
サイトで参考にして作ってはいるのですが敷居が高すぎたのかダメです。
ソースがなくて申し訳ないのですが、http://apoc.jp/wp/wp-content/data/127/preview12.html
こちらを参考に教えていただけたら嬉しいです。

上記のスライダーだと右→をクリックしていったら、６枚目で１枚目に逆戻りになってしまいます。
希望としては６枚目で右→を押したら１枚目に戻るのですが、ループしている感じにしたいのですができません。
逆に１枚目の時に左←を押したら６枚目をループしている感じにしたいです。
こういったやり方をするにはcloneメソッドを使えばとあったのですがわかりません…
あと画像のところは１枚ではなく複数表示(4〜5枚)させたいです。

わかる範囲で構いませんし、希望通りのものがサイトにある！でも構いません。
(※最悪参考書でも構いません)
どなたかご教授お願いします。

kei344

2016/08/24 15:21

「プラグイン無し」にこだわる理由などありますか？技術を付けたいと言うのであれば、少なくともコードを書かれたほうが良いと思います。

js_donzoko3

2016/08/24 16:27

仰る通りです。技術力を付けたいのでとにかくコードを書いて分からなければ、コードと一緒に質問させていきます。ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

今回は気まぐれにサイトを覗いてしまいましたが、個人のサイトはなにがおこるかわからないのでできるだけコードはここに示すか、有名なコード共有サイトなどを利用してください。

右方向に関してだけ、一例を示します（とはいえ、コードが別サイトですし、説明だけになりますが）

とりあえずなぜそうなるか（巻き戻るようになるのか）は理解できてるでしょうか？
slideCurrentを0にして、アニメーションしているから当然そうなることはわかっていますか？
（今の動きが認識できていないと説明を理解するのも難しいと思うので）

あくまで基本形ということでヒントぐらいに見てほしいですが、
たとえばあらかじめ 1枚目を最後にも表示しておきます。
そうすれば、5回目のクリックでもアニメーションはされます（1枚目にループしたかの様に）。

そのアニメーションが終わったタイミングでアニメーションさせずにleftとcurrentを本当の1枚目に戻します。
するとループしているように見えます。

html
1<div class="slide"><img src="image05.jpg" height="200" width="500" alt=""></div>
2<div class="slide"><img src="image01.jpg" height="200" width="500" alt=""></div>

javascript
1$('.slideSet').stop().animate({
2  left: slideCurrent * -slideWidth
3},{complete: function () {
4  if(slideCurrent == slideNum - 1){
5    slideCurrent = 0;
6    $('.slideSet').css('left', 0);
7  }
8}});