jqueryで画像をスライドさせる方法

現在jqueryを勉強している者です。
max-width400px以下の時、画像を横にタップスライドさせるやり方が分かりません。

「http://kenwheeler.github.io/slick/」
上記のサイト内にある「single item」を参考にしたのですが、反応しませんでした。
教えて頂けますと幸いです。

スライドに使うHTMLは以下になります。
<div class="slick-img">
<img src="http://livedoor.blogimg.jp/ps3jp/imgs/a/5/a5f212 …
<img src="http://livedoor.blogimg.jp/ps3jp/imgs/a/5/a5f212 …
<img src="http://livedoor.blogimg.jp/ps3jp/imgs/a/5/a5f212 …
<img src="http://livedoor.blogimg.jp/ps3jp/imgs/a/5/a5f212 …
</div>

質問者からの補足コメント

• 

  ※スマホにて、画像を横にスライドさせたいです。ループじゃなくても問題ありません。よろしくお願いいたします。

    補足日時：2017/05/08 11:14

No.1 ベストアンサー 回答者： taigoito 回答日時： 2017/05/08 13:50

何かしらのライブラリを使用しているのでしょうか？

いずれにしてもどのようなスクリプトを記述しているのか分からないので、何とも言えません。
補足コメントを付けた方が良いかと思います。

お望みの答えとは異なるかも知れませんが、
jQueryを学ばれているのであれば、jQuery以外の外部の道具に頼らず、
独自に実装されると良いと思います。

ただし、レスポンシブにしたり、タップスライドさせるとなると、結構複雑になってきます。
まずはレスポンシブでなく、またボタンでスライドさせるものを作ってみるのはいかがでしょうか。

カルーセル（スライド）を作る基本的な理論としましては、

まずHTMLの概要は、
<div class="carousel">
<ul class="carousel-inner">
<li class="carousel-item"><img ...></li>
<li class="carousel-item"><img ...></li>
<li class="carousel-item"><img ...></li>
<li class="carousel-item"><img ...></li>
</ul>
</div>
というような感じになります。

".carousel"が外枠で、".carousel-inner"が実際に「動く」部分です。

".carousel-inner"は、floatで横並びにさせた".carousel-item"が全て収まるwidthに設定します。

これをラップする".carousel"は、widthを".carousel-item"の1つ分の幅に設定し、
overflow: hiddenにして、".carousel-inner"の画面からはみ出る部分を隠してやります。

後はjQueryのanimateメソッドを使って、margin-leftを動かします。

ざっくりとした説明ですが、イメージ掴めそうですか？？
期待した答えと全然異なっていたなら、すみません。
僕もJavaScriptを勉強している身の上なので、力になれたら嬉しい次第です。

No.2 回答者： fujillin 回答日時： 2017/05/08 14:58

こんにちは

ご提示のSlickはスマホにも対応していると思いますが、そのサイトの「single item」のサンプルはスワイプでもスライドを移動できるはずと思います。
質問者様の環境では動作しませんか？

＞画像を横にタップスライドさせるやり方～～
それとも、タップ（あるいはマウスクリック）した時に、スライドするようにしたいという意味のご質問なのでしょうか？

あるいは、見た目はSlickを参考にしてはいるけれど、スクリプトそのものは全体を自作しようとなさっているという意味なのでしょうか？