TeamProjectHappy/front
Swipe, Carousel
karatejin
2023. 1. 18. 22:36
Carousel 을 이용한 하나의 이미지가 출력되는배너는 그럭저럭 하면 되었지만,
Card List 를 통해서 여러개의 목록을 Swipe 하게 하는 것에 애를 많이 먹었다.
우선 리엑트와 자바스크립트 타입스크립트에 대한 지식이 전무한 상태에서 하려고 하다보니 원하는 결과가 나오지 못했다.
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import NextArrow from "react-slick";
import Course1 from '../../asset/images/exwebfront.png'
import Course2 from '../../asset/images/htmlbasic.png'
function Carousel() {
const settings = {
dots: true, // 밑에 점 화면의 개수 표시
infinite: false, // 무한으로 회전 못하게 하기
speed: 500,
slidesToShow: 4, // 4개의 카드를 보여준다.
slidesToScroll: 4, //4개의 카드가 회전한다.
nextArrow: <NextArrow />, //이것 때문에 움직이지 않음
dotsClass: "custom-dots", //필요 없는것
initialSlide: 0, //없어도 됨.
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: false,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
}
return(
<div className="course_dashboard">
<div className="course_dashboard_list">
<div className="course_dashboard_title">
<div>
<h3>프론트엔드</h3>
<p style={{fontSize: "13px"}}>해삐와 함께하는 프론트엔드</p>
</div>
</div>
<div className="course_dashboard_card">
<Slider {...settings}>
<div className="course_card">
<img src={Course1} alt="" className="course_face"/>
<div className="course_title">
React 완벽가이드
</div>
<div className="course_instructor">
해피코딩
</div>
<div className="course_rating">
4.7
</div>
<div className="course_price">
17000원
</div>
<div className="course_tag">
베스트셀러
</div>
</div>
<div className="course_card">
<img src={Course2} alt="" className="course_face"/>
<div className="course_title">
React 완벽가이드
</div>
<div className="course_instructor">
해피코딩
</div>
<div className="course_rating">
4.7
</div>
<div className="course_price">
17000원
</div>
<div className="course_tag">
베스트셀러
</div>
</div>
<div className="course_card">
<img src={Course1} alt="" className="course_face"/>
<div className="course_title">
React 완벽가이드
</div>
<div className="course_instructor">
해피코딩
</div>
<div className="course_rating">
4.7
</div>
<div className="course_price">
17000원
</div>
<div className="course_tag">
베스트셀러
</div>
</div>
<div className="course_card">
<img src={Course1} alt="" className="course_face"/>
<div className="course_title">
React 완벽가이드
</div>
<div className="course_instructor">
해피코딩
</div>
<div className="course_rating">
4.7
</div>
<div className="course_price">
17000원
</div>
<div className="course_tag">
베스트셀러
</div>
</div>
<div className="course_card">
<img src={Course1} alt="" className="course_face"/>
<div className="course_title">
React 완벽가이드
</div>
<div className="course_instructor">
해피코딩
</div>
<div className="course_rating">
4.7
</div>
<div className="course_price">
17000원
</div>
<div className="course_tag">
베스트셀러
</div>
</div>
</Slider>
</div>
</div>
</div>
);
}
export default Carousel;리엑트 부트스트랩이 아닌 슬릭을 통해서 구현하려고 하였으나 원하는 그림이 아니었다.
위와 같이 카드가 4개 정도
그러나 리엑트 슬릭은 자바스크립트 기반이기 때문에 타입스크립트 형식으로 설치가 필요했다.
인스톨을 3개나 했다. 아마 더 간단한 방법이 있을 수 도 있다.
- npm install --save @types/react-slick
- npm install --save react-slick
- npm install --save slick-carousel
필요한 것은 화면에 카드 4개가 나오고 하단의 점을 없애고 양 끝의 화살표를 눌렀을 때 슬라이드가 되게 하기
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Course1 from '../Asset/images/exwebfront.png'
import Course2 from '../Asset/images/htmlbasic.png'
function Carousel() {
const settings = {
infinite: false,
//true 이면 방향에 상관없이 회전, false이면 카드가 맨 왼쪽이면 더이상 못감
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
// swipeToSlide: true,
initialSlide: 0
}
return(
<div className="course_dashboard">
<div className="course_dashboard_list">
<div className="course_dashboard_title">
<div>
<h3>프론트엔드</h3>
<p style={{fontSize: "13px"}}>해삐와 함께하는 프론트엔드</p>
</div>
</div>
<div className="course_dashboard_card">
<Slider {...settings}>
<div className="course_card">
<img src={Course1} alt="" className="course_face"/>
<div className="course_title">
React 완벽가이드
</div>
<div className="course_instructor">
해피코딩
</div>
<div className="course_rating">
4.7
</div>
<div className="course_price">
17000원
</div>
<div className="course_tag">
베스트셀러
</div>
</div>
<div className="course_card">
<img src={Course2} alt="" className="course_face"/>
<div className="course_title">
React 완벽가이드
</div>
<div className="course_instructor">
해피코딩
</div>
<div className="course_rating">
4.7
</div>
<div className="course_price">
17000원
</div>
<div className="course_tag">
베스트셀러
</div>
</div>
<div className="course_card">
<img src={Course1} alt="" className="course_face"/>
<div className="course_title">
React 완벽가이드
</div>
<div className="course_instructor">
해피코딩
</div>
<div className="course_rating">
4.7
</div>
<div className="course_price">
17000원
</div>
<div className="course_tag">
베스트셀러
</div>
</div>
</Slider>
</div>
</div>
</div>
);
}
export default Carousel;
겨우 됐다.