[home] - slider produktowy

[kubaty007]

Poprawki:

• [ ] - RWD do poprawy

• [ ] - zdjęcia są rozciągnięte

• [ ] - brakuje hover'a

• [ ] - brakuje przycisków

• [ ] - ogólnie dostosowanie całości do projektu

• [ ] - widzę, że jest jakiś js ale nie działa przewijanie

[ArmoredSamurai]

• [ ] - Co do js, zaznaczone obszary zastąp jednym querySelectorAll(), eliminuje to też potrzebe osobnych nazw klas dla każdego elementu, mimo że są tym samym. Potem wystarczy operować na całej arrayce metodą foreach()

również nie sądze że twoje rozwiązanie jest najlepsze, radziłbym ci przesuwać cały kontener zamiast pojedyńcze elementy, troche jak suwak tylko na strzałki

[indyk132]

Jak dodać żarówkę przed pierwszą żarówką i po ostatniej?

[kubaty007]

Co do kodu, to myślę, że łatwiej byłoby to ogarnąć na podstawie scrollowania. Mógłbyś wtedy dać overflowX: hidden; i potem po naciśnięciu strzałki przez js 'scrollować w boki`

Tutaj masz przykład jak ja to zrobiłem. Możesz to skonsultować @ArmoredSamurai i @krzysztoftrol - może oni mają łatwiesze rozwiązanie, żeby scrollować po jedym produkcie naraz. Scrollowanie 'po 5 naraz' wydaje się łatwiesze do zrobienia.

function scrollProducts(direction) {

        let maxScrollPosition = (sliderItems.length * tileWidth) + ((sliderItems.length - 1) * gap) - slider.offsetWidth;

        let newScrollPosition;

        //update
        tileWidth = sliderItems[0].offsetWidth;
        sliderStyle = window.getComputedStyle(slider);
        gap = parseInt(sliderStyle.getPropertyValue('gap'), 10);

        if (window.innerWidth > 767) {
            buttonLeft.style.display = 'flex';
            buttonRight.style.display = 'flex';
        }

        updateButtons();

        setTimeout(() => {
            if (direction === 'left') {
                newScrollPosition = currentScrollPosition - tileWidth - gap;

                if (newScrollPosition <= 0) {
                    newScrollPosition = 0;
                    buttonLeft.style.opacity = '0';

                    setTimeout(() => {
                        buttonLeft.style.display = 'none';
                    }, 300);

                }

            } else {
                newScrollPosition = currentScrollPosition + tileWidth + gap;

                if (newScrollPosition >= maxScrollPosition) {
                    newScrollPosition = maxScrollPosition;
                    buttonRight.style.opacity = '0';

                    setTimeout(() => {
                        buttonRight.style.display = 'none';
                    }, 300);
                }
            }

            currentScrollPosition = newScrollPosition;
            slider.scrollTo(newScrollPosition, 0);

        }, 2)
    }