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
Update your jquery code to the following
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).
scrollLeft
. JavaScript has thebehavior
option for thescrollTo()
method.overflow
on the body, use it instead on the wrapperUsing CSS transition
Instead of using
scrollLeft
, my suggestion would be to use CSS transition:--i
-100% * i
clearInterval()