Javascript 如何设置长方体滑块的高度

我有一个滑块，目前它的高度设置为100%。但是，我希望滑块的高度为550px，这样看起来就不会太大，但由于某些原因，我无法将其设置正确。 以下是完整的代码和正在运行的代码段：

（功能（工厂）{
if（typeof define=='function'&&define.amd）{
定义（['jquery']，工厂）；
}else if（导出类型！==‘未定义’）{
module.exports=工厂（require（'jquery'））；
}否则{
工厂（jQuery）；
}
})（函数（$）{
var Zippy=（函数（元素、设置）{
var instanceUid=0；
功能（元素、设置）{
这是默认值={
幻灯片说明：“3000”，
速度:500,，
arrowRight:“.arrow right”，
箭头左：'.箭头左'
};
this.settings=$.extend（{}，this，this.defaults，settings）；
此参数的首字母={
幻灯片：0，
$currside:null，
totalSlides:错，
CSTransitions:错误
};
$.extend（this，this.initials）；
该.$el=$（元素）；
this.changeSlide=$.proxy（this.changeSlide，this）；
this.init（）；
this.instanceUid=instanceUid++；
}
快速返回；
})();
Zippy.prototype.init=函数（）{
此.cstransitiontest（）；
这是.$el.addClass（'zippy-carousel'）；
this.build（）；
此为.events（）；
这个。激活（）；
this.initTimer（）；
};
Zippy.prototype.cstransitiontest=函数（）{
var elem=document.createElement（'modernizer'）；
var props=[“转换”、“WebkitTransition”、“MozTransition”、“OTransition”、“msTransition”]；
for（道具中的变量i）{
var prop=props[i]；
变量结果=元素样式[prop]！==未定义？prop:false；
如果（结果）{
this.cstranitions=结果；
打破
} 
} 
};
Zippy.prototype.addCSSDuration=函数（）{
var=这个；
这是.el.find（'.slide'）。每个（函数（）{
这个.style[u.cstranitions+'Duration']=u.settings.speed+'ms'；
});
}
Zippy.prototype.removeCSSDuration=函数（）{
var=这个；
这是.el.find（'.slide'）。每个（函数（）{
这个.style[uu.cstranitions+'Duration']=''；
});
}
Zippy.prototype.build=函数（）{
var$indicators=this.$el.append（“
”）.find（“.indicators”）；
this.totalSlides=this.el.find（“.slide”）.length；
对于（var i=0；i”）；
};
Zippy.prototype.activate=函数（）{
this.$currside=this.$el.find（'.slide'）.eq（0）；
这个.el.find（'.indicators li'）.eq（0）.addClass（'active'）；
};
Zippy.prototype.events=函数（）{
$（“正文”）
.on（'click'，this.settings.arrowRight，{direction:'right'}，this.changesiled）
.on（'click'，this.settings.arrowLeft，{direction:'left'}，this.changesiled）
.on（'click'，'s.li'，this.change幻灯片）；
};
Zippy.prototype.clearTimer=函数（）{
if（this.timer）clearInterval（this.timer）；
};
Zippy.prototype.initTimer=函数（）{
this.timer=setInterval（this.changeSlide，this.settings.slideDuration）；
};
Zippy.prototype.startTimer=函数（）{
this.initTimer（）；
this.throttle=false；
};
Zippy.prototype.changeSlide=函数（e）{e
如果（这个节气门）返回；
this.throttle=true；
这个.clearTimer（）；
var方向=此方向（e）；
var animate=这个。\下一步（e，方向）；
如果（！animate）返回；
var$nextSlide=this.$el.find（'.slide'）.eq（this.currside）.addClass（direction+'active'）；
如果（！this.cstranitions）{
这是一个动画（$nextSlide，direction）；
}否则{
这是一个方向（$nextSlide，direction）；
}
};
Zippy.prototype.\u方向=函数（e）{
var方向；
//默认向前移动
如果（类型e！==‘未定义’）{
方向=（e.data的类型=='undefined'？'right'：e.data.direction）；
}否则{
方向='右'；
}
返回方向；
};
Zippy.prototype.\u next=函数（e，方向）{
var index=（typeof e！=“未定义”？$（e.currentTarget）。数据（'index'）：未定义）；
开关（真）{
大小写（索引类型！=“未定义”）：
if（this.currside==索引）{
这个。startTimer（）；
返回false；
} 
这个.currside=索引；
打破
案例（direction=='right'&&this.currside<（this.totalSlides-1））：
这个.currside++；
打破
案例（方向=‘右’）：
此值为0；
打破
案例（方向=='left'&&this.currside===0）：
this.currside=（this.totalSlides-1）；
打破
案例（方向=‘左’）：
这张幻灯片——；
打破
}
返回true；
};
prototype.\u cssAnimation=函数（$nextSlide，direction）{
setTimeout（函数（）{
此.$el.addClass（‘转换’）；
this.addCSSDuration（）；
此.currsiled.addClass（'shift-'+方向）；
}.绑定（本），100）；
setTimeout（函数（）{
这个.el.removeClass（'transition'）；
这个.removeCSSDuration（）；
此.currsiled.removeClass（'active shift left shift right'）；
此.currside=$nextSlide.removeClass（方向）；
这是。_updateIndicators（）；
这个。startTimer（）；
}.bind（this），100+this.settings.speed）；
};
prototype.jsAnimation=function（$nextSlide，direction）{
var=这个；
if（direction=='right'）($currsidel.addClass（'js-reset-left'）；
var动画={}；
动画[方向]=“0%”；
var animationPrev={}；
animationPrev[方向]=“100%”；
这个.currsidel.animate（animationPrev，这个.settings.speed）；
$nextSlide.animate（动画，this.settings.speed，'swing'，function（）{
_.currsiled.removeClass（'activejsreset left'）.attr（'style'，''）；
_.$currsiled=$nextSlide.removeClass（direction.attr（'style'，''）；
_._updateIndicators（）；
_.startTimer（）；
});
};
prototype.\u updateIndicators=function（）{
this.el.find（'.indicators li'）.removeClass（'active'）.eq（this.currsidel）.addClass（'active'）；
}
.slide {
    text-align: center;
    padding-top: 25%;
    background-size: cover;
}

/********For better see the text********/
p{
  color:white;
}

h2{
  color:white;
}    
/**************************************/

.wrapper{
  width:100%;
  position:relative;
  height: 50px;
}
.slide-box {
    max-width: 1300px;
    margin: 0 auto;
    padding: 54px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
/**
 * Padding is set relative to the width
 * of the element, so here padding-top:60% is
 * a percentage of the width. This allows us 
 * to set the height as a ratio of the width
 *
 */
.carousel{
width: 100%;
height: 500px;
position: relative;
/* padding-top: 50%; */
overflow: hidden;
}

.inner{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
}

/**
 * ==========================
 * Animation styles
 * 
 * Notes:
 * 1. We use z-index to position active slides in-front 
 * of non-active slides
 * 2. We set right:0 and left:0 on .slide to provide us with
 * a default positioning on both sides of the slide. This allows 
 * us to trigger JS and CSS3 animations easily
 *
 */
.slide{
    width: 100%;
    height: 500px;
    position: absolute;
    top:0;
    right:0;
    left:0;
    z-index: 1;
    opacity: 0;
}

.slide.active,
.slide.left,
.slide.right{
    z-index: 2;
    opacity: 1;
}

/**
 * ==========================
 * JS animation styles
 * 
 * We use jQuery.animate to control the sliding animations
 * when CSS3 animations are not available. In order for
 * the next slide to slide in from the right, we need
 * to change the left:0 property of the slide to left:auto
 *
 */

.js-reset-left{left:auto}

/**
 * ==========================
 * CSS animation styles
 * 
 * .slide.left and .slide.right set-up
 * the to-be-animated slide so that it can slide
 * into view. For example, a slide that is about 
 * to slide in from the right will:
 * 1. Be positioned to the right of the viewport (right:-100%)
 * 2. Slide in when the style is superseded with a more specific style (right:0%)
 *
 */
.slide.left{
    left:-100%;
    right:0;
}

.slide.right{
    right:-100%;
    left: auto;
}

.transition .slide.left{left:0%}
.transition .slide.right{right:0%}

/**
 * The following classes slide the previously active
 * slide out of view before positioning behind the 
 * currently active slide
 *
 */
.transition .slide.shift-right{right: 100%;left:auto}
.transition .slide.shift-left{left: 100%;right:auto}

/**
 * This sets the CSS properties that will animate. We set the
 * transition-duration property dynamically via JS.
 * We use the browser's default transition-timing-function
 * for simplicity's sake
 * 
 * It is important to note that we are using CodePen's inbuilt
 * CSS3 property prefixer. For your own projects, you will need
 * to prefix the transition and transform properties here to ensure
 * reliable support across browsers
 *
 */
.transition .slide{
    transition-property: right, left, margin;
}

/**
 * ==========================
 * Indicators
 *
 */
.indicators{
  width:100%;
  position: absolute;
  bottom:0;
  z-index: 4;
  padding:0;
  text-align: center;
}

.indicators li{
    width: 13px;
    height: 13px;
    display: inline-block;
    margin: 5px;
    background: #fff;
    list-style-type: none;
    border-radius: 50%;
  cursor:pointer;
  transition:background 0.3s ease-out;
}

.indicators li.active{background:#93278f}

.indicators li:hover{background-color:#2b2b2b}

/**
 * ==========================
 * Arrows 
 *
 */
.arrow{
  width: 20px;
  height: 20px;
  position:absolute;
  top:50%;
  z-index:5;
  border-top:3px solid #fff;
  border-right:3px solid #fff;
  cursor:pointer;
  transition:border-color 0.3s ease-out;
}

.arrow:hover{border-color:#93278f}

.arrow-left{
  left:20px;
  transform:rotate(225deg);
}

.arrow-right{
  right:20px;
  transform:rotate(45deg);
}

/**
 * ==========================
 * For demo purposes only
 * 
 * Please note that the styles below are used
 * for the purposes of this demo only. There is no need
 * to use these in any of your own projects
 *
 */
.slide{
    text-align:left;
  background-size:cover;
  display: table-cell;
  vertical-align: middle;
}

h1{
    width:100px;
  height:100px;
  background-color:rgba(146, 45, 141,0.7);
    margin:auto;
  line-height:100px;
    color:#fff;
    font-size:2.4em;
  border-radius:50%;
  text-align: center;
}

.slide:nth-child(1){
    background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/163697/slide-1.jpg);
 }

.slide:nth-child(2){
    background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/163697/slide-2.jpg);
}

.slide:nth-child(3){
    background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/163697/slide-3.jpg);
 }