Featured Product Scroller

The brief was to create a product scroller which would be fully editable from inside our editing system so the client would have full freedom on adding and editing new products within the scroller. A challenging project working with conditions and styling from within JavaScript. The scroller works by having a set amount of products, they are then cloned and dismissed once off screen to create the infinite scroll illusion.

Tools

NA

Skills

Front-end Development

Languages

HTML/CSS/JavaScript

View live version

        {if (!W.EDIT_MODE){

            runOnLoad(function(){
            
                //define the total width and guttering the product will be
                const WIDTH = 220;
                const GUTTER = 40;
            
                //define variables
                let controls      = document.querySelector('.scroller-controls');
                let controlLeft   = document.querySelector('.control-left')
                let controlRight  = document.querySelector('.control-right')
                let scroller      = document.querySelector('.s-products-grid');
                let scrollerItems = document.querySelectorAll('.s-products-grid > li');
                let container     = document.querySelector('.featured-scroller');
                let translate     = 0;
                let scrollerWidth = (WIDTH + GUTTER) * scrollerItems.length;
            
            
                let hovered = false;
            
                //function for scrolling right
                function scrollRight(){
                
                    //is it scrolling?
                    scrolling = true;
            
                    //then set the total translation value to the width and gutter value
                    translate += WIDTH + GUTTER;
            
                    //then actually transform the scroller to scroll right
                    scroller.style.transform = "translateX("+(-translate)+"px)";
            
                    
                    window.setTimeout(function(){
                        scrolling = false;
                        if(translate >= scrollerWidth){
            
                        scroller.style.transition = 'none';
                        translate = translate - scrollerWidth;
                        scroller.style.transform = "translateX("+(-translate)+"px)";
                        scroller.offsetWidth;
                        scroller.style.transition = 'transform .5s';
                        }
                    },500)
                    }
            
                function scrollLeft(){
                scrolling = true;
            
                if(translate < WIDTH + GUTTER){
            
                    scroller.style.transition = 'none';
                    translate = translate + scrollerWidth;
                    scroller.style.transform = "translateX("+(-translate)+"px)";
            
                    scroller.offsetWidth;
                    scroller.style.transition = 'transform .5s';
                }
            
                translate -= WIDTH + GUTTER;
                scroller.style.transform = "translateX("+(-translate)+"px)";
            
                window.setTimeout(function(){
                    scrolling = false;
                },500)
                }
            
                let scrolling = false;
            
                window.setInterval(function(){
                if(!hovered){
                    scrollRight();
                }
            
                },2000)
            
            
                controls.addEventListener('click', handleClick)
            
                function handleClick(e){
            
                if(scrolling){
                    return;
                }
            
                if(e.target == controlLeft){
            
                    scrollLeft();
            
                } else if(e.target == controlRight) {
            
                    scrollRight();
            
                }
                }
            
                container.addEventListener('mouseenter', function(){
                hovered = true;
                })
            
                container.addEventListener('mouseleave', function(){
                hovered = false;
                })
            
            
            
                function handleHover(){
                scroller.style.transform = "translateX("+(-translate)+"px)";
                }
            
            
            
                let targetWidth = container.offsetWidth + scroller.offsetWidth;
                let node = scroller.children[0];
            
                while(scroller.offsetWidth < targetWidth){
                scroller.appendChild(node.cloneNode(true))
                node = node.nextElementSibling;
                }
            
            })
            }}
                
HTML/CSS
JavaScript

Featured product scroller

The brief was to create a product scroller which would be fully editable...

View project >
HTML/CSS
JavaScript

Filter by model

The brief was to create a filtering system which took the values...

View project >
HTML/CSS
JavaScript

Mortgage calculator

The brief was simple, to create a mortgage calculator which displayed...

View project >
HTML/CSS
JavaScript

Fix element to container

A personal project of mine to create an element which will only stay...

View project >