스와이프 슬라이드 css 질문좀드리겠습니다
본문
안녕하세요 css 질문좀드리겠습니다
스와이프 슬라이드를 이용중인데요
저기 동그라미 친부분이 자동적으로 width 를 잡더라구요
저거를 95% 로 고정으로 하고싶은데 어디에서 변경해야할지모르겠습니다.
<div class="swiper-slide" style="width: 95%;">Slide 2</div>
이렇게 해봐도 안됩니다 ㅠ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
</body>
</html>
답변 1
API 쪽 보면 나와 있네요
css
.swiper-slide {width:95%} 주고
js
slidesPerView: auto 로 주세요
Multiple Slides Per View
데모에있는 사용하고있는 소스인데요
작동 안되네요 ㅠㅠ
음.. 일단 플러그인 사용 하시기 전에 어느 정도 내용은 이해 하고 사용 하셔야 합니다. 말씀 하신 내용은 여러개의 뷰를 표시 할 수 있도록 나와있는 데모인데 글쓴이 님께서 사용 하신건 3개라고 적어 두셨네요 그러니 width 값이 지정 되어 3개가 씩 나올 수 있도록 나와 있는 거 이구요 그리고 사용 하고 싶으신 부분은 width 값에 %를 지정 하고 싶다고 하셨으니 데모를 보신 다면 Auto Slides Per View / Carousel Mode 쪽을 보셔야죠... 각각 슬라이드에 width 값을 지정 해야 하니까요... 매번 안되요 안되요만 적으시는데 본인이 이해를 못하시니까 안되는게 맞습니다..
답변을 작성하시기 전에 로그인 해주세요.
