在幻灯片处于活动状态时在 html 元素中设置数据属性

Question

嗨，

我在我的网站上使用 FlexSlider（Slider w/thumbnail controlNav 模式），我对缩略图的样式做了一些修改，我的问题是当滑块处于活跃，在 css 他们只是改变了 img 的不透明度我想改变 src 图像这个 class css

  .flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}

html代码

<div class="flexslider">
              <ul class="slides">

                <li data-thumb="assets/img/nav-slide.png">
                  <img src="assets/img/sld2.jpg" />
                </li>

              </ul>
            </div>

有什么方法可以使用 css3 设置数据缩略图，例如当幻灯片缩略图处于活动模式时我想像这样

 <div class="flexslider">
              <ul class="slides">

                <li data-thumb="assets/img/active-nav-slide.png">
                  <img src="assets/img/sld2.jpg" />
                </li>

              </ul>
            </div>

Answer 1

是这样的吗？

if ($('.flex-control-thumbs').hasClass('active'))
{
    $(this).find('li').attr('data-thumb', 'assets/img/active-nav-slide.png');
}

在幻灯片处于活动状态时在 html 元素中设置数据属性

Set data attribute in html element when slide is active

html

javascript

css

jquery

flexslider