質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1079閲覧

Owlcarouselでid毎に複数設定

kenkbou

総合スコア151

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/03/12 10:00

お世話になります。

タイトルの通りでOwl Carouselというプラグインでスライダー画像を設定しております。
https://owlcarousel2.github.io/OwlCarousel2/

1ページ内に複数のOwl Carouselを設置する場合、スタイルを変更したい場合があるかと思います。
1つはメインスライダーとして1枚だけ表示
1つはバナー用として4枚表示
この際に以下のようなコードで設定を変更出来ないかと思って模索したのですが出来ませんでした。

https://singapore.intercontinental.com/stay/rooms-suites/guestrooms

このサイトは1つのowl carouselで複数タイプのスライダーを実装しています。
ただ、ソースを見てもよくわからなくて、、、

お力貸していただけるとありがたいです。

Html

1<div class="owl-carousel" id="main-slider"> 2 <div><img src="images/sample.png" alt=""></div> 3 <div><img src="images/sample.png" alt=""></div> 4 <div><img src="images/sample.png" alt=""></div> 5</div> 6 7<div class="owl-carousel" id="banner-slider"> 8 <div><img src="images/sample.png" alt=""></div> 9 <div><img src="images/sample.png" alt=""></div> 10 <div><img src="images/sample.png" alt=""></div> 11</div> 12 <script type="text/javascript"> 13 $(document).ready(function(){ 14 $(".owl-carousel").owlCarousel({ 15 autoplay: true, 16 center: true, 17 stagePadding: 115, 18 items:1, 19 nav: true, 20 loop:true 21 }); 22 }); 23</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こういう風に実装したら動きませんか?(未検証)

js

1 $(document).ready(function(){ 2 $("#main-slider").owlCarousel({ 3 autoplay: true, 4 center: true, 5 stagePadding: 115, 6 items:1, 7 nav: true, 8 loop:true 9 }); 10 $("#banner-slider").owlCarousel({ 11 autoplay: true, 12 center: true, 13 stagePadding: 115, 14 items:1000, 15 nav: true, 16 loop:true 17 }); 18 });

投稿2018/03/12 16:09

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kenkbou

2018/03/13 01:12

ありがとうございます、2回呼び出す方法で実装できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問