#div1 {
  margin: 0px auto;
  border: 0px;
  position: relative;
}

.button {
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: rgba(0, 0, 0, .3);
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  color: white;
}

span:hover {
  background: rgba(255, 255, 255, .5);
  color: black;
  transform: scale(1.3);
}

span#L {
  left: 10px;
  top: 120px;
}

span#R {
  right: 10px;
  top: 120px;
}

#div1 #ul {
  position: absolute;
  bottom: 0px;
  left: 280px;
  width: 125px;
  height: 5px;
}

#div1 #ul li {
  list-style: none;
  float: left;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .5);
  margin-right: 5px;
  cursor: pointer;
}

#div1 #ul .active {
  background: rgba(0, 0, 0, .5);
}

#div1 img {
  transition: opacity .5s ease-in-out;
}

#div1 img.fade-out {
  opacity: 0;
}

#div1 img.fade-in {
  opacity: 1;
}