Question

我正在试图弄清楚当前幻灯片显示或活动时如何修改插件以添加类。我正在使用woothemes flexslider。这样做的原因是，当当前滑块处于活动状态时，我可以在文本上添加一些动画（http://daneden.github.io/animate.css/）。

-HTML MARKUP -

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

    <li>
        <div class="slide_content slide_copy1">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices lectus a arcu semper convallis. </p>
        </div>
        <img src="<?php bloginfo('template_url'); ?>/images/standard_slide2.jpg" />
    </li>


    <li>
        <div class="slide_content slide_copy2">
            <iframe src="//www.youtube.com/embed/XjWOqinu_q0" frameborder="0" allowfullscreen></iframe>
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices lectus a arcu semper convallis. </p>
        </div>
    <img src="<?php bloginfo('template_url'); ?>/images/standard_slide3.jpg" />
    </li>

    </ul>
</div>

-CSS -

.slides li{position:relative}

.slide_content{position:absolute; }

.slide_copy1{top:50%; left:200px; width:500px;  }

.slide_copy1 h2, .slide_copy1 h3{
text-transform:uppercase; 
background-color:#0062ad; 
display:inline-block; 
padding:5px; 
margin-bottom:3px; 
color:white; 
font-family: 'caviar_dreamsregular', sans-serif;
font-size:35px
}

.slide_copy1 p{font-family:'Calibri', sans-serif; color:#0062ad; background-color:white; padding:10px; line-height:20px;}

.slide_copy2{top:25%; right:75px; width:500px}

.slide_copy2 h2{
text-transform:uppercase; 
color:#0062ad; 
font-family:'caviar_dreamsregular', sans-serif;
font-size:35px;
margin-bottom:20px
}

.slide_copy2 p{
color:#0062ad; 
font-family:'Calibri', sans-serif; 
line-height:20px;
font-weight:bold
}

-JAVASCRIPT -

<script>
$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    slideshow: true,
    direction: "vertical",
    slideshowSpeed: 4500, 
    animationSpeed: 2000,
    mousewheel: false,
  });
});
</script>

Answer 1

这是我修复我的方式：

after: function(slider){
    var thumnails = $('.gallery-thumbnails').children();
    thumnails.removeClass('active');
    thumnails.eq(slider.currentSlide).addClass('active');
}

当flexslider幻灯片处于活动状态时添加类（flex-active-slide）

1 个答案: