swiper slide center (스와이퍼 컨텐츠 중앙정렬)
2022. 4. 15. 15:38ㆍSwiper
<body>
<div class="swiper-slide active" onclick="tab_menu(0)"><p>Myongji Hospital</p></div>
<div class="swiper-slide" onclick="tab_menu(1)"><p>Seoul Healthcare Hub</p></div>
</body>슬라이드 영역의 텍스트(컨텐츠)를 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; 를 주면 화살표버튼과 겹치지 않고 내용만 중앙정렬 할 수 있다
'Swiper' 카테고리의 다른 글
| swiper)pagination 2개 적용하기 (0) | 2022.05.18 |
|---|---|
| swiper bullet에 이미지 넣기 (0) | 2022.05.13 |
| swiper fade In 및 시간 차 효과 (0) | 2022.04.28 |
| swiper) 화살표(next, prev), pagination(type:fraction) 커스텀 (0) | 2022.04.15 |
| 텍스트 스와이프 (text swipe) (0) | 2022.04.14 |