CSS, HTML and jQuery auto scrolling section

user979331
September 27, 2024
137 views
0 votes
2 Answers

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>

Answers

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);
});

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>

Please signup or login to give your own answer.

Click here to cancel reply.