Question

我使用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的示例，该CSS正在寻址.flex-direction-nav类，此类是从JS生成的。但是我们如何才能添加另一个类，例如。 “。flex-direction-nav-1”所以我们可以通过CSS改变它的样式和位置？

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

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

1 个答案: