1

デフォルトのスタイルを持つメインのスライダーとしてフレックススライダーを使用し、別のページに別のフレックススライダーカルーセルを使用しています。ただし、カルーセルには別の方向ナビゲーション スタイルが必要です。デフォルトでは、方向ナビゲーションのクラスは、flexslider.css の「.flex-direction-nav a」です。そして、それを編集できます。しかし、別のクラスを他の方向ナビゲーションに割り当てるにはどうすればよいでしょうか? コントロールナビも同様です。@max-width 450px でカルーセルのコントロール ナビゲーションを非表示にしたいが、メイン スライダーでは非表示にしたい....では、CSS で特定のスライダーだけのコントロール ナビゲーションに対処するにはどうすればよいですか?

.flex-direction-nav a {
      width: 30px; height: 30px; margin: -20px 4px; 
      display: block; background: url(../img/bg_direction_nav.png) no-repeat 0 0;
      position: absolute; top: 50%; z-index: 10; cursor: pointer; 
      text-indent:-9999px; opacity: 0; -webkit-transition: all .3s ease;}

.flex-direction-nav .flex-next {
      background-position: 100% 0; right: -36px; }

.flex-direction-nav .flex-prev {
      left: -36px;}

上記は、.flex-direction-nav クラスに対応するデフォルトの Flexslider CSS の例であり、このクラスは JS から生成されます。しかし、どうすれば別のクラスを追加できますか。「.flex-direction-nav-1」でスタイルと位置を CSS で変更できますか?

4

1 に答える 1

0

スライダー/カルーセルにはデフォルトのCSSを使用します

/* Direction Nav */
.flex-direction-nav {height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url('/images/system/bg_direction_nav.png') no-repeat 0 0; position: absolute; top: 50%; z-index: 3; cursor: pointer; text-indent: -9999px; opacity: 1; -webkit-transition: all .3s ease;}

次に、動作を変えたいカルーセルに独自のIDを指定し、次のようにそのIDにCSSを適用します。

#carousel .flex-direction-nav {height: 0;}
#carousel .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url('/images/system/bg_direction_nav_sml.png') no-repeat 0 0; position: absolute; top: 40px; z-index: 3; cursor: pointer; border: solid 1px #c8c8c8; text-indent: -9999px; opacity: 1; -webkit-transition: all .3s ease;}
于 2013-03-05T09:46:01.197 に答える