Open kubaty007 opened 1 year ago
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
Jak dodać żarówkę przed pierwszą żarówką i po ostatniej?
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)
}
Poprawki:
[ ] - RWD do poprawy![Image](https://user-images.githubusercontent.com/62720503/202111271-0758abb2-2d4c-4e7b-bd16-1f968818950f.png)
[ ] - 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