1

我正在使用 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 改变它的样式和位置？

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，然后像这样将 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;}
于 2013-03-05T09:46:01.197 回答