skip to Main Content

I have 3 sections inside a wrapper. What I am trying to do is display the sections side by side and auto scroll to the right. I noticed that window.innerWidth never changes, but the autoScroll function does get called. What am I doing wrong?

jQuery(document).ready(function($) {
  let currentIndex = 0;
  const totalSections = $('.services-section').length;
  const scrollInterval = 5000; // Set the time interval (in milliseconds)

  function autoScroll() {

    console.log('Current Index:', currentIndex); // Log current index
    console.log('Window Width:', window.innerWidth); // Log window width

    $('.services-wrapper').animate({
      scrollLeft: currentIndex * window.innerWidth // Scroll to the next section
    }, 800); // Animation duration

    currentIndex++;
    if (currentIndex >= totalSections) {
      currentIndex = 0; // Reset to first section
    }
  }

  setInterval(autoScroll, scrollInterval); // Auto-scroll every few seconds
});
body,
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.services-wrapper {
  display: flex;
  width: 300vw;
  height: 100vh;
}

.services-section {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="services-wrapper">
  <section id="home-inventory" class="services-section">
    <div class="container-fluid">
      <div class="row equal">
        <div class="col-md-6" style="background: url(<?php echo wp_kses_post(get_field('used_equipment_inventory_image')); ?>); background-size:cover; background-position:center;"></div>
        <div class="col-md-6 padding-50">
          <h2>
            <?php echo wp_kses_post(get_field('used_equipment_inventory_title')); ?>
          </h2>
          <?php echo wp_kses_post(get_field('used_equipment_inventory_content')); ?>
          <a href="<?php echo wp_kses_post(get_field('used_equipment_inventory_button_link')); ?>" class="button">
            <?php echo wp_kses_post(get_field('used_equipment_inventory_button_text')); ?>
          </a>
        </div>
      </div>
    </div>
  </section>
  <section id="home-rentals" class="services-section">
    <div class="container-fluid">
      <div class="row equal">
        <div class="col-md-6 padding-50">
          <h2>
            <?php echo wp_kses_post(get_field('rentals_title')); ?>
          </h2>
          <?php echo wp_kses_post(get_field('rentals_content')); ?>
          <a href="<?php echo wp_kses_post(get_field('rentals_button_link')); ?>" class="button">
            <?php echo wp_kses_post(get_field('rentals_button_text')); ?>
          </a>
        </div>
        <div class="col-md-6" style="background: url(<?php echo wp_kses_post(get_field('rentals_image')); ?>); background-size:cover; background-position:center;"></div>
      </div>
    </div>
  </section>
  <section id="home-service" class="services-section">
    <div class="container-fluid">
      <div class="row equal">
        <div class="col-md-6" style="background: url(<?php echo wp_kses_post(get_field('service_image')); ?>); background-size:cover; background-position:center;"></div>
        <div class="col-md-6 padding-50">
          <h2>
            <?php echo wp_kses_post(get_field('service_title')); ?>
          </h2>
          <?php echo wp_kses_post(get_field('service_content')); ?>
          <a href="<?php echo wp_kses_post(get_field('service_button_link')); ?>" class="button">
            <?php echo wp_kses_post(get_field('service_button_text')); ?>
          </a>
        </div>
      </div>
    </div>
  </section>
</div>

2

Answers


  1. Update your jquery code to the following

    jQuery(document).ready(function($) {
        let currentIndex = 0;
        const $wrapper = $('.services-wrapper');
        const totalSections = $('.services-section').length;
        const scrollInterval = 5000; // Set the time interval (in milliseconds)
    
        function autoScroll() {
            currentIndex = (currentIndex + 1) % totalSections;
            const scrollAmount = currentIndex * $wrapper.width();
            
            console.log('Current Index:', currentIndex);
            console.log('Scroll Amount:', scrollAmount);
            
            $wrapper.animate({
                scrollLeft: scrollAmount
            }, 800, function() {
                console.log('Actual scroll position:', $wrapper.scrollLeft());
            });
        }
    
        setInterval(autoScroll, scrollInterval);
    });
    
    Login or Signup to reply.
  2. Two examples ahead on how to create a scroll slideshow, one that uses scrollLeft, and the other uses CSS transition and translate (that also incorporates pause on hover).

    • jQuery is not needed to animate scrollLeft. JavaScript has the behavior option for the scrollTo() method.
    • Don’t use overflow on the body, use it instead on the wrapper
    • Don’t hardcode widths on the wrapper element just use flex
    • Don’t limit yourself on only one animated element. ForEach instead all your elements that need such an animation
    const autoScroll = (elScroll) => {
      const tot = elScroll.children.length;
      let i = 0;
      let itv;
      
      const play = () => itv = setInterval(anim, 3000);
      const anim = () => {
        i = ++i % tot;
        elScroll.scrollTo({left: elScroll.scrollWidth / tot * i, behavior: "smooth"});
      };
    
      play(); // Start!
    };
    
    document.querySelectorAll(".services-wrapper").forEach(autoScroll);
    * { box-sizing: border-box; margin: 0; }
    
    .services-wrapper {
      display: flex;
      overflow-x: hidden;
    }
    
    .services-section {
      flex: 1 0 100%;
      background: var(--bg);
      padding: 2em;
    }
    <div class="services-wrapper">
      <section class="services-section" style="--bg:#0bf;">Section A1/3</section>
      <section class="services-section" style="--bg:#fb0;">Section A2/3</section>
      <section class="services-section" style="--bg:#b0f;">Section A3/3</section>
    </div>
    
    You can have as many more sliders as needed
    
    <div class="services-wrapper">
      <section class="services-section" style="--bg:#bf0;">Section B1/4</section>
      <section class="services-section" style="--bg:#fb0;">Section B2/4</section>
      <section class="services-section" style="--bg:#0bf;">Section B3/4</section>
      <section class="services-section" style="--bg:#f0b;">Section B4/4</section>
    </div>

    Using CSS transition

    Instead of using scrollLeft, my suggestion would be to use CSS transition:

    • Create an additional overflow element to contain the animated wrapper with its slides
    • loop-increment a variable and use CSS Custom Properties like --i
    • transition translate X the wrapper element by -100% * i
    • If you need to pause on hover (good for UX) – use also clearInterval()
    const autoScroll = (elScroll) => {
      let i = 0;
      let itv = null;
      const tot = elScroll.children.length;
      
      const stop = () => clearInterval(itv);
      const play = () => itv = setInterval(anim, 3000);
      const anim = () => {
        i = ++i % tot;
        elScroll.style.setProperty("--i", i);
      };
    
      elScroll.addEventListener("pointerenter", stop);
      elScroll.addEventListener("pointerleave", play);
      
      play(); // Start!
    };
    
    document.querySelectorAll(".services-wrapper").forEach(autoScroll);
    * { box-sizing: border-box; margin: 0; }
    
    .services {
      overflow: hidden;
    }
    
    .services-wrapper {
      display: flex;
      transition: translate 0.7s;
      translate: calc(-100% * var(--i, 0)) 0px;
    }
    
    .services-section {
      flex: 1 0 100%;
      background: var(--bg);
      padding: 2em;
    }
    Pauses on hover!
    
    <div class="services">
      <div class="services-wrapper">
        <section class="services-section" style="--bg:#0bf;">Section A1/3</section>
        <section class="services-section" style="--bg:#fb0;">Section A2/3</section>
        <section class="services-section" style="--bg:#b0f;">Section A3/3</section>
      </div>
    </div>
    
    You can have as many more sliders as needed
    
    <div class="services">
      <div class="services-wrapper">
        <section class="services-section" style="--bg:#bf0;">Section B1/4</section>
        <section class="services-section" style="--bg:#fb0;">Section B2/4</section>
        <section class="services-section" style="--bg:#0bf;">Section B3/4</section>
        <section class="services-section" style="--bg:#0bf;">Section B4/4</section>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search