쇼핑몰 프로젝트 -Navbar,Carousel(슬라이드 배너),sweetalert

💛Navbar💛

Bootstrap 라이브러리를 사용해서 간편하게 navbar를 만들어줌

 

💛Carousel - slick slider💛

공식사이트 👉🏻 https://react-slick.neostack.com/

<설치하기>

npm

npm install react-slick --save

yarn

yarn add react-slick

이외에도 기본적인 slick-carousel 모듈도 설치를 해주어야합니다.

npm install slick-carousel
 
// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
function Main() {
//라이브러리 이벤트 속성과 디자인 요소 스타일링
  const settings = {
    dots: true,
    arrows: true,
    infinite: true,
    speed: 600,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    pauseOnHover: true,
  };
  return (
    <div>
      <div>//사용할 이미지를 Slider 태그 안에 위치시킴
        <Slider {...settings}>
          <img src="img/backgroundimg.png" height="600px" />
          <img src="img/backgroundimg2.png" height="600px" />
          <img src="img/backgroundimg3.png" height="600px" />
        </Slider>
      </div>
    </div>
  );
}

export default Main;

      dots: true, // 캐러셀이미지가 몇번째인지 알려주는 점을 보여줄지 정한다

      arrow: frue,//처음 슬라이드에서 마지막 슬라이스로

      infinite: true, // loop를 만들지(마지막 이미지-처음 이미지-중간 이미지들-마지막 이미지)
      speed: 600, // 애미메이션의 속도, 단위는 milliseconds
      slidesToShow: 1, // 한번에 몇개의 슬라이드를 보여줄 지
      slidesToScroll: 1 // 한번 스크롤시 몇장의 슬라이드를 넘길지

      autoplaySpeed : 2000 // 자동으로 넘기고 스피드 설정
      pauseOnHover:true//화면에 커서를 올리면 슬라이더가 자동으로 넘어가지지 않음

       

+ 그 외 속성, Custom Arrows,appendDots

화살표와 dots 스타일 지정하는 코드도 있슴
공식사이트 Examples 맨 하단에 나와있습니다
👉🏻 https://react-slick.neostack.com/docs/example/custom-arrows

 

💛이벤트 요소가 담긴 alert - sweetalert💛

sweetalert를 이용하여 이벤트 요소가 포함된 alert를 적용했습니다.

장바구니 버튼을 클릭하면 실행되는 함수에 alert (sweetalert 라이브러리에서는 swal이라 작성하면 됩니다.)를 주어 사용자에게 저장 여부를 알리고 페이지 이동 의사를 물었습니다.

<공식문서>

https://sweetalert.js.org/guides/

SweetAlert

설치및 사용방법 자세히 나와있슴!