css - FlexSlider:如何更改多方向导航的样式？

Question

我将 flexslider 用作具有默认样式的主 slider ，并在另一页上使用另一个 flexslider 轮播。但是轮播需要不同的方向导航样式。 默认情况下，方向导航的类是 flexslider.css 中的“.flex-direction-nav a”。我们可以编辑它。但是我们如何将另一个类分配给其他方向导航呢？ 控制导航也是如此。我想在@max-width 450px 上隐藏旋转木马的控制导航，但不隐藏主 slider ....那么如何在 CSS 中仅针对特定 slider 处理控制导航？

.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 更改其样式和位置？

Answer 1

为 slider /旋转木马使用默认 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;}