내일배움캠프 4기 React 16일차(기초프로젝트)

최영진·2022년 11월 21일
0
post-custom-banner

1. rolling

swiper.js 를 이용하여 구현 하였다.
vertical 슬라이드를 이용하였고, infinity 와 합하여 무한으로 돌게 하였다.

var swiper = new Swiper(".mySwiper", {
    direction: "vertical",
    spaceBetween: 30,
    centeredSlides: true,
    loop: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    
  	});

direction : vertical, loop:true

2. dropdown

display:inline-block 으로 블럭으로 지정해서 시작

overflow : scroll 로 dropdown 옵션을 스크롤 할 수 있게 바꿈
z-index:1; 로 제일 앞에 배치하여 목록이 가려지지 않게 한다.

3. modal

modal 창은 그냥 있는것과 같다.
다른 점은 시작시 display: none; 으로 가려져 있다가
event 발생시 보여지면서 모달창이 보여진다.

profile
안녕하시오.
post-custom-banner

1개의 댓글

comment-user-thumbnail
2022년 11월 22일

이전에 모달때문에 고생했떤 기억이 새록새록...! ㅎㅎ

답글 달기