https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">         " target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

    

    

   

        

        

        

        

        

        

        

        

        

   

       

Real Model Before&After

       

           

           

           

           

           

       

                                     

       

        

        

        

 

Css

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

/* CSS RESET */ body, h1, h2, h3, h4, h5, h6, p, ul {     margin: 0;     padding: 0;     font-family: 'Noto Sans Kr', sans-serif;  }

li {     list-style-type: none; }

a {     text-decoration: none;     color: #fff; } img{     display:block; }

/* CUSTOM */ html, body{     height: 100%; } .wrapper{     margin: 0 auto;     overflow: hidden;/*부모태그에주게되면 플로트레프트줬을경우옆으로오는거 방지*/ } .header{      height: 100px;      background: #333;      color:#FFF;      text-align:center; } .header h1{     color:#FFF;     text-align:center;     padding-top: 30px;

} .contents{     margin: 0 auto;     width: 1078px;           }

/*********************************/

/*********************************/ .slider slider_circle_10 img{     max-width:100%;     max-hight: 100%;     margin:auto;     display:block; }

.slider_circle_10 {          position: relative;     width: 1078px;     height: 53.2vw;     margin: 0 auto;     user-select: none; }

.slider_circle_10 > * {     transition: ease all 1s;     background: #fff; }

.slider_circle_10 > div, .slider_circle_10 .hidden {     opacity: 0;     position: absolute;     top: 20%;     left: 50%;     width: 1px;     height: 1px;     z-index: 0;     overflow: hidden; }

.slider_circle_10 .active {     opacity: 1;     position: absolute;     top: 30%;     left: 50%;     margin-left: -25%;     width: 60%;     height: 50%;     z-index: 10; }

.slider_circle_10 .prev1, .slider_circle_10 .next1 {     opacity: 0.9;     position: absolute;     top: 60%;     left: 50%;     margin-left: -40%;     width: 25%;     height: 25%;     z-index: 9; }

.slider_circle_10 .next1 {     margin-left: 20%; }

.slider_circle_10 .prev2, .slider_circle_10 .next2 {     opacity: 0.7;     position: absolute;     top: 50%;     left: 50%;     margin-left: -50%;     width: 15%;     height: 15%;     z-index: 8; }

.slider_circle_10 .next2 {     margin-left: 35%; }

.slider_circle_10 .prev3, .slider_circle_10 .next3 {     opacity: 0.5;     position: absolute;     top: 35%;     left: 50%;     margin-left: -50%;     width: 7%;     height: 7%;     z-index: 7; }

.slider_circle_10 .next3 {     margin-left: 43%; }

.slider_circle_10 .prev4, .slider_circle_10 .next4 {     opacity: 0.3;     position: absolute;     top: 25%;     left: 50%;     margin-left: -40%;     width: 3%;     height: 3%;     z-index: 6; }

.slider_circle_10 .next4 {     margin-left: 37%; }

.slider_circle_10 .prev5, .slider_circle_10 .next5 {     opacity: 0.1;     position: absolute;     top: 20%;     left: 50%;     margin-left: -15%;     width: 2%;     height: 2%;     z-index: 5; }

.slider_circle_10 .next5 {     margin-left: 13%; }

/*********************************/

.slider_four_in_line {     width: 100vw;     height: 14.06vw;     position: relative;     margin: 0 auto;     user-select: none; }

.slider_four_in_line > * {     transition: ease all 1s;     overflow: hidden; }

.slider_four_in_line .hidden {     opacity: 0;     z-index: 0;     top: 0px;     left: 50%; }

.slider_four_in_line .active, .slider_four_in_line .next1, .slider_four_in_line .next2, .slider_four_in_line .next3, .slider_four_in_line .next4, .slider_four_in_line .prev1 {     position: absolute;     width: 25%;     height: 100%;     top: 0px;     left: 25%;     z-index: 10;     margin: 0; }

.slider_four_in_line .next1 {     left: 50%; }

.slider_four_in_line .next2 {     left: 75%; }

.slider_four_in_line .next3 {     width: 0%;     left: 100%;     z-index: 0;     opacity: 0; }

.slider_four_in_line .next4 {     left: 100%;     width: 0%;     z-index: 0;     opacity: 0; }

.slider_four_in_line .prev1 {     position: absolute;     width: 24%;     height: 100%;     top: 0px;     left: 0%;     z-index: 10;     opacity: 1; }

.slider_four_in_line .prev2, .slider_four_in_line .prev3, .slider_four_in_line .prev4 {     position: absolute;     width: 0%;     height: 100%;     top: 0px;     left: -25%;     z-index: 0;     opacity: 0; }

/*********************************/

.slider_clock {     width: 70vw;     height: 70vw;     position: relative;     margin: 0 auto;     user-select: none; }

.slider_clock > * {     transition: ease all 1s; }

.slider_clock .active {     position: absolute;     left: 50%;     top: 50%;     margin-left: -200px;     margin-top: -125px;     width: 400px;     height: 250px;     transform: rotate(0deg);     opacity: 1;     z-index: 10;     background: #fff;     overflow: hidden; }

.slider_clock .next1, .slider_clock .next2, .slider_clock .next3, .slider_clock .next4, .slider_clock .next5, .slider_clock .next6, .slider_clock .next7, .slider_clock .prev1, .slider_clock .prev2, .slider_clock .prev3, .slider_clock .prev4, .slider_clock .prev5, .slider_clock .prev6, .slider_clock .prev7, .slider_clock .hidden {     position: absolute;     left: 50%;     top: 50%;     width: 96px;     height: 60px;     margin-top: 200px;     margin-left: -48px;     transform-origin: 48px -200px;     transform: rotate(0deg);     opacity: 1;     overflow: hidden; }

.slider_clock .next2 {     transform: rotate(-30deg); }

.slider_clock .next3 {     transform: rotate(-60deg); }

.slider_clock .next4 {     transform: rotate(-90deg); }

.slider_clock .next5 {     transform: rotate(-120deg); }

.slider_clock .next6 {     transform: rotate(-150deg); }

.slider_clock .next7 {     opacity: 0;     transform: rotate(-180deg); }

.slider_clock .prev1 {     transform: rotate(30deg); }

.slider_clock .prev2 {     transform: rotate(60deg); }

.slider_clock .prev3 {     transform: rotate(90deg); }

.slider_clock .prev4 {     transform: rotate(120deg); }

.slider_clock .prev5 {     transform: rotate(150deg); }

.slider_clock .prev6 {     transform: rotate(180deg); }

.slider_clock .prev7 {     opacity: 0;     transform: rotate(210deg); }

.slider_clock .hidden {     opacity: 0;     transform: rotate(180deg); }

/*********************************/

.nav_indicators {     position: absolute;     bottom: 0px;     left: 0px;     width: 100%;     text-align: center;     z-index: 50000; }

.nav_indicators ul {     position: static;     display: inline-block;     margin: 0 auto;     padding: 0; }

.nav_indicators ul li {     position: static;     display: inline-block;     width: 10px;     height: 10px;     margin: 5px;     padding: 0;     overflow: hidden;     background: #fff;     color: #fff;     border: 2px solid #000;     border-radius: 50%;     cursor: pointer; }

.nav_indicators ul li.active {     position: static;     display: inline-block;     width: 10px;     height: 10px;     margin: 5px;     padding: 0;     background: #555;     color: #555;     border: 2px solid #aaa;     border-radius: 50%;     cursor: pointer; }

/**********************************/

.next_button, .prev_button {     position: absolute;     left: 100% !important;     top: 50% !important;     margin: -15px 0 0 -25px !important;     width: 50px !important;     height: 50px !important;     border: 1px solid #000 !important;     background: #fff !important;     opacity: 0.5 !important;     z-index: 5000 !important;     cursor: pointer;     text-align: center;     line-height: 30px;     border-radius: 50%;

}

.prev_button {     position: absolute;     left: 0% !important; }

.next_button:hover, .prev_button:hover {     opacity: 1 !important; } .next_button:after, .prev_button:after {     content: "";     position: absolute;     top: 50%;     left: 50%;     width: 1px;     height: 1px;     margin-top: -10px; }

.next_button:after {     border-left: 15px solid #000;     border-right: 15px solid transparent;     border-bottom: 10px solid transparent;     border-top: 10px solid transparent;     margin-left: -5px; }

.prev_button:after {     border-right: 15px solid #000;     border-left: 15px solid transparent;     border-bottom: 10px solid transparent;     border-top: 10px solid transparent;     margin-left: -25px; }

div.slider > div:not(.nav_indicators):not(.next_button):not(.prev_button) {     border: 1px solid #000;     text-align: center;     box-sizing: border-box;     font-size: 150px; }  

-----------------------------------------------------------------------------------------------------

제이쿼리 슬라이드 배너 사용중인데 이미지를 넣으면 롤링배너 크기만큼 자동으로 줄이는방법좀

알려주세요 ㅠ 창이작아지면 이미지크기가 같이줄어드는게아니라 이미지가 짤리네요

부탁드립니다..