반응형 최신글 갤러리를 만드려고 합니다
본문
https://sir.kr/g5_skin/9338?sca=%EC%B5%9C%EC%8B%A0%EA%B8%80&page=19
현재 이 스킨을 적용 중이며
이상태에서 반응형으로 페이지 크기가 줄어들때마다 이미지가 높이와 폭을 어느정도는 유지 하면서 줄어 들어야 되는데 너무 확 줄어 들다가 갑자기 하나로 나오네요;;;이런 값들은 어디서 어떻게 조절 해야 하나요? 크기가 어느 정도 유지 하면서 천천히 줄어들다가 2개를 거쳐서 제일 작은 화면일때 1개가 나오게 하고 싶습니다
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
border: 10px solid #fff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
height: auto;
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
}
.jcarousel img {
display: block;
width: auto !important;
max-width: 100%;
height: auto !important;
}
/** Carousel Controls **/
.prev,
.next {
top: 50%;
margin-top: -11%;
width: 60px;
height: 60px;
}
@media all and (max-width:1000px){
.prev,
.next {
top: 50%;
margin-top: -120px;
}
}
.prev {
float : left;
/* margin-left: -576px; */
}
.next {
float: right;
/* margin-left: 517px; */
}
.jcarousel-control-prev {
left: 105px;
}
.prev img {
width: 60px;
height: 60px;
}
.next img {
width: 60px;
height: 60px;
}
.jcarousel-control-next {
right: 15px;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: -40px;
left: 50%;
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
margin: 0;
display: none;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
height: 10px;
width: 10px;
line-height: 10px;
background: black;
color: #4E443C;
border-radius: 10px;
text-indent: -9999px;
margin-right: 7px;
-webkit-box-shadow: 0 0 2px #4E443C;
-moz-box-shadow: 0 0 2px #4E443C;
box-shadow: 0 0 2px #4E443C;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
-webkit-box-shadow: 0 0 2px #F0EFE7;
-moz-box-shadow: 0 0 2px #F0EFE7;
box-shadow: 0 0 2px #F0EFE7;
}
답변 2
OwlCarousel 플러그인 쓰시면 해당 기능 구현되어 있습니다. 확인해보세
현재 사용하시는 슬라이드 플러그인은 원하시는 효과를 구현하실수 없는걸로 알고있습니다. 위 답변남긴분의 플러그인을 참고해보세요