現在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.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を勉強している身の上なので、力になれたら嬉しい次第です。
No.2
- 回答日時:
こんにちは
ご提示のSlickはスマホにも対応していると思いますが、そのサイトの「single item」のサンプルはスワイプでもスライドを移動できるはずと思います。
質問者様の環境では動作しませんか?
>画像を横にタップスライドさせるやり方~~
それとも、タップ(あるいはマウスクリック)した時に、スライドするようにしたいという意味のご質問なのでしょうか?
あるいは、見た目はSlickを参考にしてはいるけれど、スクリプトそのものは全体を自作しようとなさっているという意味なのでしょうか?
お探しの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ランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
html内でのマウスオーバー時に...
-
チェックボックスと画像切替の連動
-
jQuery bxSlider でのアニメー...
-
MAX関数を使ってからLEFT JOIN...
-
Vb.net2005での画像の合成方法
-
c++std::string型をTCHARに変換...
-
HTMLからimgのsrcのみを正規表...
-
IplImageのBmp変換。
-
<div ~ </div> で囲まれたテキ...
-
IFRAMEの表示/非表示を切り替え...
-
jqueryのsortableで一部ソート...
-
動的にHTMLコンテンツを吹き出...
-
変数名をどのようにつけるのが...
-
jQueryでシンプルドラッグドロ...
-
プルダウンの位置がwin/macでず...
-
クリックで色変更後に既に変更...
-
JSPでの画像ファイル表示
-
OpenCVの実行エラー
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
high slideをFC2ブログで
-
ご教授ください。
-
jQueryでタブ、スライダーを使...
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
javascriptで文字サイズの変更
-
fontsize.jsでhtmlの大中小の設...
-
【iOS及びAndroid】リンク画像...
-
Firefoxとクロームでフェードイ...
-
javascript src書き換え
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
おすすめ情報
※スマホにて、画像を横にスライドさせたいです。ループじゃなくても問題ありません。よろしくお願いいたします。