現在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>

No.2
- 回答日時:
こんにちは
ご提示のSlickはスマホにも対応していると思いますが、そのサイトの「single item」のサンプルはスワイプでもスライドを移動できるはずと思います。
質問者様の環境では動作しませんか?
>画像を横にタップスライドさせるやり方~~
それとも、タップ(あるいはマウスクリック)した時に、スライドするようにしたいという意味のご質問なのでしょうか?
あるいは、見た目はSlickを参考にしてはいるけれど、スクリプトそのものは全体を自作しようとなさっているという意味なのでしょうか?

No.1ベストアンサー
- 回答日時:
何かしらのライブラリを使用しているのでしょうか?
いずれにしてもどのようなスクリプトを記述しているのか分からないので、何とも言えません。
補足コメントを付けた方が良いかと思います。
お望みの答えとは異なるかも知れませんが、
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を勉強している身の上なので、力になれたら嬉しい次第です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryのプラグインslickの画像...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
1枚の画像をクリックすると複数...
-
自働生成される<div>タグに連番...
-
javascriptでフォーカスを当て...
-
指定したパスが現URLに含まれて...
-
jQuery bxSlider 画像に変更
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
-
YouTubeをブログに貼る時、1つ...
-
リンク色を動的に変更したい。i...
-
離れた場所にマウスオーバーで...
-
ネストされたハッシュの値から...
-
jQuery 複数のfind()
-
【jQuery】hoverしたn秒後にイ...
-
IplImageをPictureBoxへ表示が...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
[jQuery]bxSlider 一番最後と...
-
【jQuery】2分割レイアウトで、...
-
CSSでマウスオーバーした画像を...
-
数ある中からランダムで抽出し...
-
複数のランダム表示について
-
上下の余白について
-
同じjqueryを2つ並べて動かし...
-
ロールオーバーを含む複数の動...
-
bxSliderのランダム表示について
-
jcarouselliteについてです。
-
SimplyScrollについて
-
楽天APIのデータをjqueryのgetJ...
-
横並びの画像を3枚時間差でフェ...
-
ローカルでは問題なく動くがサ...
-
html内でのマウスオーバー時に...
-
画像をフェードアウト&フェー...
-
Javascriptを使用したスライド...
-
javascript cssの値を取得、変更
-
jQueryスライドショーについて
おすすめ情報


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