스와이퍼 스라이드 옆에 살짝 보이게 할려는데 도움이 필요합니다
관련링크
https://bkl.co.kr/
369회 연결
본문
제가 질문은 처음이라 두서없어 죄송합니다..
스와이프 슬라이더에 처음에 3개가 보이고 옆에 살짝 삐져나오게 할려하는데 끝까지 넘기면 여백이 너무 많습니다... 이거 없애버릴수있을까요??
법무법인 태평양 I N S I G H T S 슬라이더부분처럼 구현하고싶습니다..
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
(function($){
$(document).ready(function(){
var swiper= new Swiper('.swiper', {
//effect: 'coverflow',
//grabCursor: true,
draggable : false,
slidesPerView: 1,
loop: false ,
slidesPerGroup : 2,
slidesPerView: 1,
loopFillGroupWithBlank : false ,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
spaceBetween: 10,
})
});
})(jQuery);
</script>
<style>
.container {
width: 100%;
height: 500px;
padding: 20px 10px;
background-color: lightgrey;
overflow: hidden;
margin: 0 auto;
box-sizing: border-box;
}
.swiper {
width:400px;
height: 100%;
}
.swiper-slide {
background: white;
width:500px;
}
</style>
<div class="container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
<div class="swiper-slide">4</div>
<div class="swiper-slide">5</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
답변을 작성하시기 전에 로그인 해주세요.
