Можно ли сделать слайдер в модальном окне на CSS?

.ivanov_01 { 
  background: url(http://side-sunny.ru/projects/15_Ivanov/01.jpg); 
} 
 
.ivanov_02 { 
  background: url(http://side-sunny.ru/projects/15_Ivanov/02.jpg); 
} 
 
.ivanov_03 { 
  background: url(http://side-sunny.ru/projects/15_Ivanov/03.jpg); 
} 
 
.galery_image { 
  float: left; 
  margin: 25px 12px; 
} 
 
.galery_image a { 
  display: block; 
  height: 300px; 
  width: 400px; 
  background-size: cover; 
  background-position: center; 
  margin: 15px auto; 
  cursor: -webkit-zoom-in; 
  cursor: zoom-in; 
} 
 
.galery_image a:focus { 
  position: fixed; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  height: 450px; 
  width: 600px; 
  margin: auto; 
  border: 12px solid rgba(255, 255, 255, 1.0); 
  border-radius: 10px; 
  cursor: default; 
  -webkit-box-shadow: 0 0 20px rgba(30, 30, 30, 1.0), 0 0 0 1000px rgba(120, 120, 120, .5); 
  box-shadow: 0 0 20px rgba(30, 30, 30, 1.0), 0 0 0 1000px rgba(120, 120, 120, .5); 
  z-index: 2; 
} 
 
.close { 
  display: none; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
  background: rgba(255, 200, 60, 1.00); 
  height: 55px; 
  width: 55px; 
  border: 8px solid rgba(255, 255, 255, 1.0); 
  border-radius: 30px; 
  position: absolute; 
  top: -30px; 
  right: -30px; 
} 
 
.close::after { 
  content: ""; 
  background: url(http://side-sunny.ru/x.png); 
  height: 23px; 
  width: 23px; 
  margin: auto; 
} 
 
.galery_image a:focus .close { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
} 
 
.close:hover { 
  background: rgba(240, 160, 60, 1.00); 
  cursor: pointer; 
} 
 
.inner { 
  width: 300%; 
} 
 
.page { 
  float: left; 
  width: 33.333%; 
} 
 
.page [class^=ivanov_] { 
  width: 400px; 
  height: 300px; 
} 
 
#slide1:checked~#slides .inner { 
  margin-left: 0; 
} 
 
#slide2:checked~#slides .inner { 
  margin-left: -100%; 
} 
 
#slide3:checked~#slides .inner { 
  margin-left: -200%; 
} 
 
#slides .inner { 
  -webkit-transition: all 0.5s ease-in-out; 
  transition: all 0.5s ease-in-out; 
}

<div id="slider" class="galery_image"> 
  <input type="radio" name="slider" id="slide1" checked=""> 
  <input type="radio" name="slider" id="slide2"> 
  <input type="radio" name="slider" id="slide3"> 
  <div id="slides"> 
 
    <div class="inner"> 
      <div class="page"> 
        <a href="#" class="ivanov_01"> 
          <div tabindex="0" class="close"></div> 
        </a> 
      </div> 
      <div class="page"> 
        <a href="#" class="ivanov_02"> 
          <div tabindex="0" class="close"></div> 
        </a> 
      </div> 
      <div class="page"> 
        <a href="#" class="ivanov_03"> 
          <div tabindex="0" class="close"></div> 
        </a> 
      </div> 
    </div> 
  </div> 
 
</div>