HTML swiper Fade In 효과 스와이프 페이드인 및 시간차 효과 주는 법 CSS /* 기본 css */ .swiper-slide .contents .text h4 { font-size: 40px; font-weight: 700; } .swiper-slide .contents .text > p { font-size: 20px; line-height: 27px; margin: 50px 0; } /* .swiper-slide-active 에 애니메이션 설정 적용 */ .swiper-slide.swiper-slide-active .contents .text h4 { animation: text 1s 0.2s both; /* name duration delay fill-mode */ } .swiper-..

Myongji Hospital Seoul Healthcare Hub 슬라이드 영역의 텍스트(컨텐츠)를 p tag 등으로 감싼 후 .swiper-slide p { width: 70%; background-color: var(--whoz-color); text-align: center; color: #fff; padding: 14px 0; border-radius: 15px; cursor: pointer; margin: 0 auto; } 컨텐츠의 원하는 너비값을 준 후 margin: 0 auto; 를 주면 화살표버튼과 겹치지 않고 내용만 중앙정렬 할 수 있다

HTML Slide 1 Slide 2 Slide 3 JS var swiper = new Swiper(".mySwiper", { slidesPerView: 2, // 보여질 슬라이드 개수 spaceBetween: 17, // 슬라이드 사이의 거리 centeredSlides: false, // 중앙부터 시작할지 여부 slidesOffsetBefore : number, // 슬라이드 시작 부분 여백 navigation: { // 스와이프 화살표 추가 nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { // 페이지네이션 추가 el: ".swiper-pagination", type: "fraction", // 타입 숫자 ex..

명지병원 서울헬스케어허브 바른몸의원 심포니셀의원 part0의 내용 .mySwiper { margin-bottom: 25px; } .swiper-slide { background-color: pink; text-align: center; color: #fff; padding: 14px 0; border-radius: 15px; } .swiper-pagination { display: none; } // Section 08_partners(PC) let tab = $('#partners .p_left ul').find('li'); function tab_menu(num){ for(let i=0;i