[React] Navigation Bar (1) - 큰 그룹 Slider

😂 react-slick 이용하여 다중 carousel 구현 중, 각 item들이 붙어있는 현상 발생!!

.slick-slider와 .slick-slide에 margin을 주어서 해결하려고 했더니,

아이템들이 정돈되지 않은 상태로 나타남..

 

💡 slide 아이템 안에 자식 div를 만들어서 가운데로 정렬을 해보는 생각을 함!

 

- 코드

// Contents.js

class Contents extends React.Component {
    state = {
        "Group": [],
        ...
    }
        
    render() {
        const { Group } = this.state
        
        const settings = {
          infinite: false,
          arrows: true,
          speed: 500,
          slidesToShow: 4,
          slidesToScroll : 1,
          draggable: false,
        }
        
      	// 그룹 이름
      	const groupName = Group.map((name) => 
          <div className="c-group">
            <div className="group-title" onClick={this.onClickGroup}>{ name }</div>
          </div>
        );
                                    
        return (
          <div className="c-nav">
              <Slider className="c-slider" {...settings}>
                { groupName }
              </Slider>
          </div>
        )
    }
}

 

 

💻 결과화면