.slider-warp {
  width: 500px;
  height: 370px;
  position: relative;
  overflow: hidden;
}

.slider-warp ul {
  padding: 0px;
  margin: 0px;
  position: absolute;
}

.slider-warp li { list-style: none; }

.slider-warp li img {
  display: block;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.xslider-nav {
  position: absolute;
  z-index: 2;
  bottom: 2px;
  text-align: center;
  width: 100%;
  margin: 5px 0px;
}

.xslider-nav span {
  display: inline-block;
  width: 0px;
  height: 0px;
  margin: 0 4px;
  padding: 3px;
  background: transparent;
  border-radius: 5px;
  border: 2px solid white;
  cursor: pointer;
  opacity: 0.7;
}

.xslider-nav span.active { background: white; }

.xslider-arrow {
  top: 50%;
  position: absolute;
  width: 100%;
}

.xslider-arrow span {
  display: block;
  width: 32px;
  height: 32px;
  right: 15px;
  position: absolute;
  margin-top: -16px;
  overflow: hidden;
  background: rgba(0,0,0,.2) no-repeat 50% 50%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAQAAABuQZ3IAAAAi0lEQVR4AU3OISBEQQBAwS0AACS9NxqQgCZpkiYBVddFvWhAAUABAPQCAGC4g/0vTnrBqCfDIZl70J+kMUBPpEwT4FNXxBxz4F1HxHyr4EVTxBLb4EFNxEon4CJSlVNw9AcV9sC16h8osgke1P1ArgXwouVvdQq86ww/GQefusNf7kBviBlxpT8k+gL/Wox4r1d4MwAAAABJRU5ErkJggg==');
  background-size: 7px 11px;
  border-radius: 32px;
  text-indent: -999em;
  opacity: .6;
  transition: opacity .2s;
  cursor: pointer;
}

.xslider-arrow .prev {
  left: 15px;
  transform: rotate(-180deg);
}

.xslider-nav p {
  display: block;
  border: 1px solid white;
  width: 60px;
  right: 0px;
  position: absolute;
  margin: 5px;
  padding: 2px;
  bottom: 0px;
  color: white;
  font-family: "微软雅黑";
}