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?
<code>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
});</code>
<code>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
});</code>
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
});<code>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;
}</code>
<code>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;
}</code>
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;
}<code><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></code>
<code><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></code>
<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>3
Update your jquery code to the following
<code>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);
});
</code>
<code>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);
});
</code>
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);
});
1
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 thebehavioroption for thescrollTo()method. - Don’t use
overflowon 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
<code>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);</code>
<code>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);</code>
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);<code>* { box-sizing: border-box; margin: 0; }
.services-wrapper {
display: flex;
overflow-x: hidden;
}
.services-section {
flex: 1 0 100%;
background: var(--bg);
padding: 2em;
}</code>
<code>* { box-sizing: border-box; margin: 0; }
.services-wrapper {
display: flex;
overflow-x: hidden;
}
.services-section {
flex: 1 0 100%;
background: var(--bg);
padding: 2em;
}</code>
* { box-sizing: border-box; margin: 0; }
.services-wrapper {
display: flex;
overflow-x: hidden;
}
.services-section {
flex: 1 0 100%;
background: var(--bg);
padding: 2em;
}<code><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></code>
<code><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></code>
<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()
<code>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);</code>
<code>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);</code>
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);<code>* { 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;
}</code>
<code>* { 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;
}</code>
* { 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;
}<code>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></code>
<code>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></code>
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>