Question

I'm attempting to add a class to a list item that exists outside of a slider and am having trouble either with the selectors or the function itself. I'm using the slider revolution plugin in WP to build the sliders and then an unordered list above it that I'm targeting with the function. The code generated by the slider is this and I'm triggering the addClass function based on the data-slideactive attribute...

<div class="forcefullwidth_wrapper_tp_banner" id="rev_slider_2_2_forcefullwidth">
    <div id="rev_slider_2_2_wrapper" class="rev_slider_wrapper fullwidthbanner-container">
        <div id="rev_slider_2_2" class="rev_slider fullwidthabanner revslider-initialised tp-simpleresponsive" data-version="5.2.6" data-slideactive="rs-5">

Using this function:

$( document ).ready(function() {
    if ($('#rev_slider_2_2').attr('data-slideactive') === 'rs-5') {
        $("ul.sliderTextList li.first").addClass("activeListItem");
    }
});

And this is the list item I'm trying to add the class to

<ul class="sliderTextList">
    <li class="first">Full-service&nbsp;Transmission</li>

The site is at http://development.maclynutility.com/programproductions the slider I'm working on is the top one. Basically the issue is that the class is not being added to the li and I'm stuck on why it's not working. Any help is greatly appreciated.

Answer 1

I think you are trying to check for the element before it actually exists.

To get around with this try to use the Revolution Slide events (Not tested):

revapi5.bind('revolution.slide.onloaded', function() {
   revapi5.bind('revolution.slide.onchange', function(e, data) {
        console.log("slide changes");
        if ($('#rev_slider_2_2').attr('data-slideactive') === 'rs-5') {
          $("ul.sliderTextList li.first").addClass("activeListItem");
        }
    });
});

Please checkout the api provided: Revolution Slide API

addClass to li based on data attribute in slider

1 个答案: