반응형 최신글 갤러리를 만드려고 합니다 채택완료

https://sir.kr/g5_skin/9338?sca=%EC%B5%9C%EC%8B%A0%EA%B8%80&page=19" rel="nofollow">https://sir.kr/g5_skin/9338?sca=%EC%B5%9C%EC%8B%A0%EA%B8%80&page=19

현재 이 스킨을 적용 중이며

https://sir.kr/bbs/view_image.php?fn=%2Fdata%2Feditor%2F1906%2F3421627295_1559655572.208.png" target="_blank">https://sir.kr/data/editor/1906/3421627295_1559655572.208.png" />

이상태에서 반응형으로 페이지 크기가 줄어들때마다 이미지가 높이와 폭을 어느정도는 유지 하면서 줄어 들어야 되는데 너무 확 줄어 들다가 갑자기 하나로 나오네요;;;이런 값들은 어디서 어떻게 조절 해야 하나요? 크기가 어느 정도 유지 하면서 천천히 줄어들다가 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;
}