Jquery Loop though buttons at same time as text

Question

I have been working on a function that loops though a list of text but failing to loop though each button at the same time, I am trying to change the backround color for each button when the corresponding text is visible.

var title_scroll = (function() {
  var titleSlide = 0;

  var titleScroll = function(i) {
    var margin = '-' + (parseInt(i) * 1) + 'em';
    if (titleSlide < $('#titleScroll ul li').length - 1) {
      titleSlide++;
    } else {
      titleSlide = 0;
    }
    $('#titleScroll ul').css('margin-top', margin);
  }
  
  setInterval(function() {
    titleScroll(titleSlide)
  }, 1800);
})();

.inline {
  display: inline-block;
  vertical-align: middle;
}

#titleScroll ul {
  padding-left: 6px;
}

.hero section {
  width: 100%;
  height: 100vh;
  flex: 1;
  display: flex;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero section .title {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: 60%;
  justify-content: center;
  text-align: right;
  z-index: 10;
  color: #fff;
  margin: 0 auto;
  position: relative;
}

.hero .title h2 {
  margin: 0;
}

#titleScroll {
  height: 1em;
  overflow: hidden;
}

#titleScroll ul {
  transition: all 0.35s cubic-bezier(0.75, 0.1, 0.25, 0.9)
}

#titleScroll li {
  list-style: none;
  font-size: 1em;
  line-height: 1em;
}

.service-buttons li {
  display: inline-block;
  width: 25%;
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="inline">Hi hi </h2>
<h2 id="titleScroll" class="inline">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</h2>
<h2>hi there <strong>I love:</strong></h2>
<ul id="sbuttons" class="service-buttons">
  <li id="button-1" class="sbtn">1</li>
  <li id="button-2" class="sbtn">2</li>
  <li id="button-3" class="sbtn">3</li>
  <li id="button-4" class="sbtn">4</li>
</ul>

Can anyone help?

I have been working on a function that loops though a list of text but failing to loop though each button at the same time, I am trying to change the backround color for each button when the corresponding text is visible.

Answer 1

To highlight the button related to the active slide you need to know its index. You can achieve this by using the modulo operator (%) to get the remainder of the division between the iterative counter and the total number of slides.

Then you can use eq() to get the li and apply the class to it. Try this:

var title_scroll = (function() {
  var $scrollUl = $('#titleScroll ul');
  var $buttonLi = $('#sbuttons li');
  var slideCount = $scrollUl.find('li').length;
  var titleSlide = 0;

  var titleScroll = function() {
    var activeIndex = titleSlide % slideCount;
    $scrollUl.css('margin-top', '-' + activeIndex + 'em');
    $buttonLi.removeClass('active').eq(activeIndex).addClass('active');
    titleSlide++;
    setTimeout(titleScroll, 1800);
  }

  titleScroll();
})();

.inline {
  display: inline-block;
  vertical-align: middle;
}

#titleScroll ul {
  padding-left: 6px;
}

.hero section {
  width: 100%;
  height: 100vh;
  flex: 1;
  display: flex;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero section .title {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: 60%;
  justify-content: center;
  text-align: right;
  z-index: 10;
  color: #fff;
  margin: 0 auto;
  position: relative;
}

.hero .title h2 {
  margin: 0;
  background: olive;
}

#titleScroll {
  height: 1em;
  overflow: hidden;
  background: olive;
}

#titleScroll ul {
  transition: all 0.35s cubic-bezier(0.75, 0.1, 0.25, 0.9);
  margin: 0;
}

#titleScroll li {
  list-style: none;
  font-size: 1em;
  line-height: 1em;
}

.service-buttons li {
  display: block;
  width: 25%;
  background-color: grey;
  float: left;
}

.service-buttons li.active {
  background-color: olive;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title parallax" data-type="content" data-offset="90">
  <div data-aos="fade-up" data-aos-duration="2250" data-aos-delay="300">
    <h2 class="inline">We Deliver </h2>
    <h2 id="titleScroll" class="inline">
      <ul>
        <li>Commercial Kitchens</li>
        <li>Air Conditioning & Ventilation</li>
        <li>HVAC</li>
        <li>Refrigeration & Cooling</li>
      </ul>
    </h2>
    <h2>Services That <strong>You Can Rely On</strong></h2>
    <ul id="sbuttons" class="service-buttons">
      <li id="button-1" class="sbtn" data-index="1">1</li>
      <li id="button-2" class="sbtn" data-index="2">2</li>
      <li id="button-3" class="sbtn">3</li>
      <li id="button-4" class="sbtn">4</li>
    </ul>
  </div>
</div>