swiper 질문 입니다.
본문
텍스트가 들어가더라도 이런 형태로 나와야 하는데
제목 텍스트가 들어가니 이렇게 나오는데 음.. 어떤 팁이 있을까요?
각 슬라이드별 썸네일 사이즈가 달라서 슬라이드 width auto 로 해야 각 썸네일 넓이 만큼 영역을 차지하니까 이렇게 해야 하는데 텍스트가 들어가면 밀어버려서 난감하네요. 해결책이 있을까요?
<style>
.swiper-slide { width:auto !important; }
</style>
var swiper = new Swiper(".snsSwiper", {
slidesPerView: 'auto',
//freeMode: true,
spaceBetween: 22,
navigation: {
nextEl: ".section_sns .btn-next",
prevEl: ".section_sns .btn-prev",
},
autoplay: {
delay: 4000,
desableOnInteraction: false,
},
loop: true,
speed : 500,
});
답변 3
텍스트를 ...처리하면 되지 않을까요?
아래는 텍스트가 들어가있어서 밀리는데
리스트가 width 로 고정되있으시면 CSS 로 처리하시는게 나을 것 같습니다.
간단하게는 overflow:hidden 처리하시면 되나 아래링크처럼 작업하시는게 더욱 좋습니다.
<div class="swiper-slide" style="width:19.7rem"> 이런식으로 ...
각 슬라이드별로 width 값 지정하니 되긴 하네요.. 답변 감사합니다!
답변을 작성하시기 전에 로그인 해주세요.