jQuery初心者です。
カルーセルスライダーを設置したいと思い、Slickを使用しているのですが
オプションの設定が上手くいきません。
「画像を3枚表示、1枚ずつ送りでオートプレイ」までは設定しても動作したのですが、
そのオートプレイで流れる方向をデフォルトの右→左から左→右にしたいと思い
rtl:true,を追加すると、画像が表示されなくなります(左右の矢印は表示されます)。
左矢印を押すと一応1枚目の画像が右からスクロールされてきますが、画像が表示しきったところで消えてしまいます。
rtl:true,を削除すれば正常に動作します。
そもそもrtlはオートプレイの動作方向を指定するものではないのでしょうか?
自力で色々調べてみましたが、解決できないので質問させていただきました。
以下、HTMLのスクリプト部分です。
ご回答よろしくお願いします。
<script>
$("document").ready(function(){
$('.carousel1').slick({
infinite: true,
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
rtl: true,
autoplay: true,
autoplaySpeed: 1500
});
});
</script>
No.1ベストアンサー
- 回答日時:
slickのサイトを読みましたか?
rtlの下に、ノートが記述されています。
Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".
rtlを使う場合は親属性に"dir"を設定しろと記述されています。
なので、問題はScriptの部分ではなくHTMLの部分です。
例)
<ul class="sample" dir="rtl"> ←ここに属性「dir="rtl"」が必要。
<li><img src="sample1.jpg"></li>
<li><img src="sample2.jpg"></li>
<li><img src="sample3.jpg"></li>
<li><img src="sample4.jpg"></li>
</ul>
これで、左→右に流れるはずです。
無事に左から右に動きました!
すみません、slickのサイトは見ていたのですがsettingsの部分のみで、demosは見ていませんでした…。
わかりやすいご回答ありがとうございます、
とても助かりました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- その他(ソフトウェア) Figma 1 2023/06/23 14:22
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- Excel(エクセル) 中身がFALSEなのにTRUEになる 2 2022/11/25 09:22
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショーの画像にリンク...
-
神経衰弱 順番に裏返し
-
画像の下に説明文をつけて切り...
-
jQueryを使ってランダムに表示
-
image.onload = .. の後に imag...
-
ランダムで表示させたブロック...
-
iframe内からjQueryで指定したい
-
固定ナビのJqueryのアコーディ...
-
イベントハンドラを完全に外部...
-
【スマホ】画像ボタンを押した...
-
フルスクリーン表示についての応用
-
マウスオーバーにてdivの切り替え
-
プルダウンの位置がwin/macでず...
-
画像とコメントの同時表示をし...
-
JavaScriptで変更した属性の元...
-
ページの背景画像を短冊状に切...
-
マウスを乗せるとメニュー表示
-
【javascript】ロールオーバー...
-
c++std::string型をTCHARに変換...
-
Javascriptで指定した日付と時...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
Javaスクリプトで画像を縦にス...
-
html5に変えるとスライドショー...
-
jQueryでタブ、スライダーを使...
-
javascriptで文字サイズの変更
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
ご教授ください。
-
high slideをFC2ブログで
-
Firefoxとクロームでフェードイ...
-
【iOS及びAndroid】リンク画像...
-
神経衰弱 順番に裏返し
-
fontsize.jsでhtmlの大中小の設...
-
javascript src書き換え
-
アコーディオンメニューが開い...
おすすめ情報