Slidefoto.css

.container {

   background-color: white;
   width: 300px;
   padding: 50px;

float:right; margin-right:-25px; margin-top:-1px;

}

ul, li {

   padding: 0;
   margin: 0;
   list-style: none;

}

ul.slider {

   position: relative;
   width: 300px;
   height: 300px;

}

ul.slider li {

   position: absolute;
   left: 0px;
   top: 0px;
   opacity: 0;
   width: inherit;
   height: inherit;
   transition: opacity .5s;
   background: #fff;

align-items: center;

}

ul.slider li img {

   width: 100%;
   height: 300px;
   object-fit: cover;

}

ul.slider li:first-child {

   opacity: 1;
   /*Mostramos el primer li*/

}

ul.slider li:target {

   opacity: 1;
   /*Mostramos el li del enlace que pulsemos*/

}

.menu {

   text-align: center;
   margin: 20px;

}

.menu li {

   display: inline-block;
   text-align: center;

}

.menu li a {

 display: inline-block;
  color: white;
  text-decoration: none;
  background-color: #681a27;
  padding: 10px 10px 10px 10px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  border-radius: 100%;
  font-weight: bold;

}