multiScroll.jsのsectionsColorオプションについて

multiScroll.jsを使用してサイトの作成演習を行っているのですが、sectionsColorオプションを用いて背景色を変更したいのですが、左右の色を変えて表示することはできないのでしょうか？

三ページ分の要素を作り、三ページとも左右で異なる色を使用したいと思っております。
その場合に以下のようなコーディングを行ったのですが、左右とも同じ色で表示されてしまいます。
すべての左の要素とすべての右の要素で別の二種類の色を使いたい場合にはどのようなコーディング
を行えばいいのでしょうか？

以下は一枚目の左側、右側、二枚目の左側、、というように設定したかったのでこのようにコーディングいたしました。

 sectionsColor: ['#010102', '#06304f', '#010102', '#06304f', '#010102','#06304f'],

またnavigationなどを設定しても表示されず、position,tooltips,colorなども反映されていないのですが、これも解決策はあるのでしょうか？

HTML
    <div id="multiscroll">
      <div class="ms-left">
        <div class="ms-section">セクション1（左）</div>
        <div class="ms-section">セクション2（左）</div>
        <div class="ms-section">セクション3（左）</div>
      </div>
      <div class="ms-right">
        <div class="ms-section">セクション1（右）</div>
        <div class="ms-section">セクション2（右）</div>
        <div class="ms-section">セクション3（右）</div>
      </div>
    </div>

CSS
.ms-section {
  text-align:center;
  color: #7ECCDE;
}

.ms-left{
  background-color: #06304f;
}
.ms-right{
  background-color: #010102;
}

Lhankor_Mhy

2020/11/19 08:06

multiScroll.js とは何ですか？

_mini

2020/11/19 08:08

https://alvarotrigo.com/multiScroll/ こちらのjQueryのプラグインです。スクロールの際に使用するためのものです。

Lhankor_Mhy

2020/11/19 08:10

ありがとうございます。ドキュメントを読んでみましたが、sectionsColor を設定せずにCSSで設定すればいいのかな、と思ったのですが、お試しになられましたか？

_mini

2020/11/19 08:13

確認ありがとうございます。 ms-left,ms-rightにそれぞれcssでbackground-colorを設定してみたのですが、反映されませんでした。

Lhankor_Mhy

2020/11/19 08:20

当方ではそれっぽくなりましたが…… 上手くいかないコードをご提示いただくことはできますか？

_mini

2020/11/19 08:23

該当部分のHTMLとCSSを記載させていただきました。ご確認よろしくお願いいたします。

行動規範の内容に同意します

回答1件

こんなかんじでしょうか？

サンプル

css
1.ms-left .ms-section{
2  background: pink;
3}

投稿2020/11/19 08:43

Lhankor_Mhy

総合スコア36147

_mini

2020/11/19 08:49

無事に変えることができました！ありがとうございます。またJSの部分に navigation: true, // 右のナビゲーションの有効化 navigationPosition: 'right', // ナビゲーションの位置 navigationTooltips: ['A', 'B', 'C'], // ナビゲーションのツールチップ navigationColor: '#7ECCDE', というようにナビゲーション表示をするようにコーディングしたのですが、何も反映されませんでした。