가로슬라이드 grid 적용

inline-block으로 적용할 때 안에 있는 리스트 퍼블 수정시 제대로 적용이 안돼고

https://blogpack.tistory.com/553

inline-block 태그의 공백 버그를 회피하기

grid로 가로슬라이드를 만들어봤습니다. 먼저 ul과 li로 기본 폼을 만들어놓습니다. 

 

1. ul width 영역을 100%으로 하고 li를 3-4개정도 반복한 후 ul에서 li .을 제거해주시면 됩니다. 

참고) li에서 .을 제거하는 방법은 line-style: none  입니다. 이부분은 기초 부분이라 따로 설명하지는 않겠습니다. 

 

2. ul 부분에 grid 설정을 하고 가로 방향으로 지정할 수 있게 overflow-x: scroll을 지정합니다.

ul{
    background-color: red;
    width: 100%;
    height: 100px;
    list-style: none;
    display: grid;
    overflow-x: scroll;
}

참고) 이렇게하면 하단에 슬라이드가 생성된 것을 볼 수 있습니다. 하지만 list는 따로 row를 주지 않았기 때문에 기본값인 column 영향으로 y축으로 보내진 것을 볼 수 있는데 지금 상황에서는 정상입니다. 

 

3. li에 display:block 및 grid-row: 1 로 설정합니다.

li{
    width: 100px;
    height: 50px;
    background-color: yellow;
    display: block;
    display: grid;
    grid-row: 1;
}

참고) grid-row를 해야 현재 list들이 row 방향으로 ul에 설정되는 것을 볼 수 있습니다. 

 

4. grid-template-columns로 repeat를 설정합니다. css ul에 추가적으로 grid-template-columns: repeat(x, 1fr)); 을 넣으시면 됩니다. 

ul{
    background-color: red;
    width: 100%;
    height: 100px;
    list-style: none;
    display: grid;
    overflow-x: scroll;
    grid-gap: 8px;
    grid-template-columns: repeat(5, 1fr);
}

참고) grid-template-columns를 추가하고 grid-gap, width 같이 조절하면 원하는 가로슬라이드를 만들 수 있을 것입니다. 

 

5. overflow-x 슬라이드를 보이지 않게 overflow-style:none으로 진행합니다.

ul {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
ul::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

참고) scrollbar 숨기게 되면 마웃스로는 움직일 수 없고 방향키로만 움직이는 것이 가능합니다. 만약에 마우스로도 움직이게 하고 싶으면 mouse event를 진행하시면 됩니다. 

 

6. 가로슬라이드 영역을 selector 지정하고 script에서 mouse event를 적용합니다.

        const slider = document.querySelector('ul');
        let isMouseDown = false;
        let startX,
            scrollLeft;

        slider.addEventListener('mousedown', (e) => {
            isMouseDown = true;
            slider.classList.add('active');

            startX = e.pageX - slider.offsetLeft;
            scrollLeft = slider.scrollLeft;
        });

        slider.addEventListener('mouseleave', () => {
            isMouseDown = false;
            slider.classList.remove('active');
        });

        slider.addEventListener('mouseup', () => {
            isMouseDown = false;
            slider.classList.remove('active');
        });

        slider.addEventListener('mousemove', (e) => {
            if (!isMouseDown) return;
            e.preventDefault();
            const x = e.pageX - slider.offsetLeft;
            const walk = (x - startX) * 1;
            slider.scrollLeft = scrollLeft - walk;
        });