몇시간을 헤맸는데..좀 도와주세요 ㅎㅎ owl 슬라이더
본문
리뷰를 뽑아와서 메인 페이지에 owl 슬라이더로 뿌리는데..
10개를 뽑아와서 한줄에 5개 총 2줄로 하고 싶습니다.
그런데 도대체 어디를 건드려야 될까요? 영어 문서들 찾아봐서 적용해도 다 잘안되네요..
어떤분이 여기서 질문한적 답변 보니..CSS를 건드려야 되는거같기도 하고....
누가 좀 알려주세요~
미리 감사드립니다!
/* 메인리뷰*/
#idx_review{position:relative;}
#idx_review .review {padding:0 45px}
#idx_review .rv_li {padding-bottom:10px}
#idx_review .li_wr {border: 1px solid #e5e5e5;padding: 0;box-shadow: 0 3px 3px #fafafa;position: relative; object-fit:cover;}
#idx_review .li_wr img{width:100%;height:auto; }
#idx_review .txt_wr{padding:10px;}
#idx_review .rv_tit{display:block;font-size:1.083em;padding:5px 0 5px;}
#idx_review .rv_prd{padding:5px 0 5px;color:#ef7878;display:block;border-top:1px solid #eee;}
#idx_review p{margin-top:10px;line-height:1.5em}
#idx_review .owl-next{position:absolute;top:50%;right:0;margin-top:-18px;background:url(../img/btn_next.png) no-repeat 50% 50%;width:40px;height:40px;text-indent:-999px;overflow:hidden;opacity:0.4}
#idx_review .owl-prev{;position:absolute;top:50%;left:0;margin-top:-18px;background:url(../img/btn_prev.png) no-repeat 50% 50% ;width:40px;height:40px;text-indent:-999px;overflow:hidden;opacity:0.4}
#idx_review .owl-prev:hover,#idx_review .owl-next:hover{opacity:1}
#idx_review .owl-next,#idx_review .owl-prev {background-size:20px}
#idx_review .disabled,#sit_pvi .disabled:hover{opacity:0}
답변 1
$('.owl-carousel').owlCarousel({
items: 5
});
이렇게 하면 한 슬라이드에 5개 아이템이 나올텐데요..
정확히 보려면 URL 이나 html js css 코드가 다 있어야 할 것 같아요
https://codepen.io/ 여기에 비슷한 샘플 코딩해서 공유해주시면 다른 분들도 봐드리기가 더 편할것같네요
답변을 작성하시기 전에 로그인 해주세요.