Question

我有这个垂直滑块使用flex，这里是它的demo。

我尝试在线查看更改prev和next的位置，但我无法做到这一点，并且还希望使用图片顶部和底部的箭头但找不到适当的css。

如果箭头不起作用，有人告诉我如何设置滑块下方的点的样式以进行导航，那么它也足够了。

请指导我正确的方向。谢谢

Answer 1

使用浏览器的Web检查器查看Flexslider插件生成的HTML标记。您可以通过CSS定位大量类来设置上一个和下一个链接的样式，即flex-nav-prev，flex-prev，flex-nav-next和flex-next：

<div class="flexslider">
  <div class="flex-viewport">
    <ul class="slides">
      <li class="well clone"></li>
      <li class="well"></li>
      <li class="well"></li>
      <li class="well flex-active-slide"></li>
      <li class="well clone"></li>
    </ul>
  </div>
  <ol class="flex-control-nav flex-control-paging">
    <li>
      <a class="">1</a>
    </li>
    <li>
      <a class="">2</a>
    </li>
    <li>
      <a class="flex-active">3</a>
    </li>
  </ol>
  <ul class="flex-direction-nav">
    <li class="flex-nav-prev">
      <a class="flex-prev" href="#">Previous</a>
    </li>
    <li class="flex-nav-next">
      <a class="flex-next" href="#">Next</a>
    </li>
  </ul>
</div>

更改flexslider中的箭头背景和位置

1 个答案: