.slider {
  position: relative;
  width: 100%;
}

.controls {
  position: absolute;
  width: 35px;
  height: 35px;
  padding: 5px 0;
  font-size: 17px;
  text-align: center;
  bottom: 10px;
  display: block;
  background: rgba(50, 50, 50, .4);
  color: rgba(200, 200, 200, .8);
  border: 1px solid rgba(250, 250, 250, .4);
  z-index: 12;
  cursor: pointer;
  transition: all .2s;
}

.controls:hover {
  color: rgba(250, 250, 250, .7);
  background: rgba(50, 50, 50, .7);
}

#previous {
  left: 20px;
}

#pause {
  left: 65px;
}

#next {
  left: 110px;
}

#slides {
  position: relative;
  width: 100%;
  height: 335px;
  list-style-type: none;
}

.slide {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;

  -webkit-transition: opacity 1.5s;
  -moz-transition: opacity 1.5s;
  -o-transition: opacity 1.5s;
  transition: opacity 1.5s;
}

.showing {
  opacity: 1;
  z-index: 11;
}

/* пользовательские настройки */
.slide {
  box-sizing: border-box;
}

.slide:nth-of-type(1) {
  background: url(../slideimages/01.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(2) {
  background: url(../slideimages/02.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(3) {
  background: url(../slideimages/03.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(4) {
  background: url(../slideimages/04.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(5) {
  background: url(../slideimages/05.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(6) {
  background: url(../slideimages/06.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(7) {
  background: url(../slideimages/07.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(8) {
  background: url(../slideimages/08.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(9) {
  background: url(../slideimages/09.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(10) {
  background: url(../slideimages/10.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(11) {
  background: url(../slideimages/11.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(12) {
  background: url(../slideimages/12.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(13) {
  background: url(../slideimages/13.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(14) {
  background: url(../slideimages/14.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(15) {
  background: url(../slideimages/15.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(16) {
  background: url(../slideimages/16.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(17) {
  background: url(../slideimages/17.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(18) {
  background: url(../slideimages/18.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(19) {
  background: url(../slideimages/19.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(20) {
  background: url(../slideimages/20.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(21) {
  background: url(../slideimages/21.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(22) {
  background: url(../slideimages/22.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(23) {
  background: url(../slideimages/23.png);
  background-position: center;
  background-size: cover;
}

.slide:nth-of-type(24) {
  background: url(../slideimages/24.png);
  background-position: center;
  background-size: cover;
}