FlexSlider：如何更改多方向导航的样式？答案

【问题标题】：FlexSlider: How to change Style for multiple direction Navs?FlexSlider：如何更改多方向导航的样式？
【发布时间】：2013-03-05 18:08:44
【问题描述】：

我将 flexslider 用作具有默认样式的主 Slider，并在另一个页面上使用另一个 flexslider 轮播。但轮播需要不同的方向导航样式。默认情况下，方向导航的类是 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;}

以上是默认 Flexslider CSS 的示例，它正在寻址 .flex-direction-nav 类，该类是从 JS 生成的。但是我们如何添加另一个类，例如。 ".flex-direction-nav-1" 以便我们可以通过 CSS 更改其样式和位置？

【问题讨论】：

标签： css flexslider

【解决方案1】：

为滑块/轮播使用默认 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，然后像这样将 CSS 应用到那个 id：

#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;}

【讨论】：