Function is only running once JQuery

My function is only running once. It contains only css.

I'm trying to put this on the Materialize Slide. I have the following JQuery code. He are simple.

Editing. Placing the html list that is the slide, and showing the order of the item. I need slide one to be animated whenever the function is called

$(window).on('load resize', function(){ 
    var slideDivider = $('.slider .divider-cap')
    var sliderList = $('.slider ul li:eq(0)')   
    if(sliderList.hasClass('active'))
    {
        slideDivider.addClass('divider')    
    }
    else
    {
        slideDivider.removeClass('divider')
    }
});

CSS

.section-slide .slider .top-setting .divider {
      width: 600px;
      margin: auto;
      animation: dividerAnim 1s 1;
  }
@-webkit-keyframes dividerAnim {
    0%   {width: 0px;}
    100% {top: 600px;}
}
@keyframes dividerAnim {
    0%   {width: 0px}
    100% {width: 600px;}
}

HTML

<ul class="slides">
    <li>
        <img src="img/music10.jpeg" class="responsive-img"> 
        <div class="caption center-align top-setting">
            <h3>Test1</h3>
            <div class="divider-cap"></div>
            <h5 class="light grey-text text-lighten-3">block 1</h5>
        </div>
    </li>
    <li>
        <img src="img/music9.jpeg" class="responsive-img"> 
        <div class="caption left-align">
          <h3>Left</h3>
          <h5 class="light grey-text text-lighten-3">block 2</h5>
        </div>
    </li>
    <li>
        <img src="img/music4.jpg" class="responsive-img"> 
        <div class="caption right-align right-setting">
          <h3>Right</h3>
          <h5 class="light grey-text text-lighten-3">block 3</h5>
        </div>
    </li>
    <li>
        <img src="img/music12.jpeg" class="responsive-img"> 
        <div class="caption center-align">
          <h3>Center</h3>
          <h5 class="light grey-text text-lighten-3">block 4</h5>
        </div>
    </li>
</ul>