Skip to content
Advertisement

Smooth scrolling slider with play/pause button

I’m doing a project where I need a scrollable slider with play pause button like www.gap.com. I got this below code from W3C but not sure why multiple images are not showing fully. If I change the width value in CSS code, only first image portion scrolls but it totally ignores the 2nd image. Please anyone help me.

JavaScript
JavaScript
JavaScript

Advertisement

Answer

I got a bit lost in the given JS, and wonder if it is necessary for this relatively simple task.

Here is a method using HTML and CSS for the continuous scrolling and with JS just for the pause/play part.

Because you want continuous scrolling with no gap or jump when the sequence of images goes back to the beginning you need two copies. The tag element is scrolled to the left by half of its width which means that the set of images overwrite themselves so giving a smooth effect.

The JS for the button uses the running value and toggles that.

JavaScript
JavaScript

Observation: the site linked to in the question (gap) has a slightly unpleasant ‘jump’ half way through the images so I think they must be using a different method to achieve continuous scrolling.

User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement