<input type="radio" id="s-1" name="slider-control" checked="checked">
<input type="radio" id="s-2" name="slider-control">
<input type="radio" id="s-3" name="slider-control">
<div class="js-slider">
  <figure class="js-slider_item img-1">
    <div class="js-slider_img">
      <img class="c-img-w-full" src="https://pics.codecolor.cn/images-opacity-slider/img_2_3.jpg" alt="">
    </div>
    <figcaption class="wo-caption">
      <h3 class="wo-h3">
        <div class="c-label">全点初公開</div>
        <br class="view-sm mb-s">津和野藩伝来摺物</h3>
      <ul class="wo-credit">
        <li>摺物118枚 寛政元-12年 (1789-1800)</li>
        <li>島根県立美術館(永田コレクション)</li>
        <li>通期展示
          <span class="c-txt-s">※4期に分けて全点を展示</span></li>
      </ul>
    </figcaption>
  </figure>
  <figure class="js-slider_item img-2">
    <div class="js-slider_img">
      <img class="c-img-h-full" src="https://pics.codecolor.cn/images-opacity-slider/img_2_1.jpg" alt=""></div>
    <figcaption class="wo-caption">
      <h3 class="wo-h3">「風流無くてなゝくせ」遠眼鏡</h3>
      <ul class="wo-credit">
        <li>大判 享和年間 (1801-04)</li>
        <li>リー・ダークス・コレクション</li>
        <li>展示期間：1月30日 (水) ～ 2月18日 (月)</li></ul>
    </figcaption>
  </figure>
  <figure class="js-slider_item img-3">
    <div class="js-slider_img">
      <img class="c-img-h-full" src="https://pics.codecolor.cn/images-opacity-slider/img_2_2.jpg" alt=""></div>
    <figcaption class="wo-caption">
      <h3 class="wo-h3">「風流無くてなゝくせ」ほおずき</h3>
      <ul class="wo-credit">
        <li>大判 享和年間 (1801-04)</li>
        <li>米・個人蔵</li>
        <li>展示期間：1月30日 (水) ～ 2月18日 (月)</li></ul>
    </figcaption>
  </figure>
  <div class="js-slider_nav">
    <label class="js-slider_nav_item s-nav-1 prev" for="s-3"></label>
    <label class="js-slider_nav_item s-nav-1 next" for="s-2"></label>
    <label class="js-slider_nav_item s-nav-2 prev" for="s-1"></label>
    <label class="js-slider_nav_item s-nav-2 next" for="s-3"></label>
    <label class="js-slider_nav_item s-nav-3 prev" for="s-2"></label>
    <label class="js-slider_nav_item s-nav-3 next" for="s-1"></label>
  </div>
  <div class="js-slider_indicator">
    <div class="js-slider-indi indi-1"></div>
    <div class="js-slider-indi indi-2"></div>
    <div class="js-slider-indi indi-3"></div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  color: #fff;
  background: #000;
}
li {
  list-style: none;
}
input[type="radio"] {
  display: none;
}
.js-slider {
  position: relative;
  width: 80%;
  height: 100vh;
  margin: 0 auto;
}
.js-slider_item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1rem 3rem;
  opacity: 0;
  visibility: hidden;
  transform-origin: right center;
  transform: translate3d(0%, 0%, 0) rotateY(30deg) scaleX(0.95);
  transition: all 1s ease,transform 1s cubic-bezier(0.43, 0.28, 0.51, 1);
}
#s-1:checked ~ .js-slider .js-slider_item.img-1,
#s-2:checked ~ .js-slider .js-slider_item.img-2,
#s-3:checked ~ .js-slider .js-slider_item.img-3 {
  opacity: 1;
  visibility: visible;
  transform-origin: left center;
  transform: translate3d(0, 0, 0) rotateY(0deg) scaleX(1);
}
.js-slider_img {
  width: 100%;
  height: 60%;
  position: relative;
  overflow: hidden;
}
.c-img-w-full {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate3d(-50%, -50%, 0);
}
.c-img-h-full {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate3d(-50%, -50%, 0);
}
figcaption {
  display: block;
}
.wo-h3 {
  margin-top: 6rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e60012;
}
.c-label {
  display: inline-block;
  color: #eee;
  background-color: rgba(139,0,10,0.9);
  line-height: 1;
  padding: 0.5em 0.9em;
  margin-right: 0.5em;
  font-size: 1.4rem;
  font-weight: bold;
}
.view-sm {
  display: none;
}
.js-slider_nav {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translate3d(0, -50%, 0);
}
.js-slider_nav_item.prev {
  left: 0;
}
.js-slider_nav_item.next {
  right: 0;
  transform: rotateY(180deg);
}
.js-slider_nav_item {
  position: absolute;
  display: none;
  width: 4rem;
  height: 4rem;
  border: 1px solid #e60012;
  border-radius: 50%;
  cursor: pointer;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.js-slider_nav_item:before {
  content: "";
  display: block;
  position: absolute;
  left: 1rem;
  top: 55%;
  width: 1rem;
  height: 1px;
  background-color: #e60012;
  transform-origin: left bottom;
  transform: translate3d(0, -50%, 0) rotate(-45deg);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.js-slider_nav_item:hover {
   transform: translate3d(-30%, 0, 0);
}
.js-slider_nav_item.next:hover {
   transform: rotateY(180deg) translate3d(-30%, 0, 0);
}
.js-slider_nav_item:hover:before {
  transform: translate3d(0, -50%, 0) rotate(-30deg);
}
.js-slider_nav_item:after {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  width: 2rem;
  height: 1px;
  background-color: #e60012;
  transform: translate3d(-50%, -50%, 0);
}
#s-1:checked ~ .js-slider .js-slider_nav .s-nav-1,
#s-2:checked ~ .js-slider .js-slider_nav .s-nav-2,
#s-3:checked ~ .js-slider .js-slider_nav .s-nav-3 {
  display: block;
}
.js-slider_indicator {
  position: absolute;
  left: 0;
  top: 63%;
  width: 100%;
  text-align: center;
}
.js-slider-indi {
  position: relative;
  display: inline-block;
  padding: 2rem;
  cursor: pointer;
}
.js-slider-indi:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
  background: #e60012;
  transform: translate3d(-50%, -50%, 0);
}
.js-slider-indi:hover:after {
  transform: translate3d(-50%, -50%, 0) scale(1.5);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
#s-1:checked ~ .js-slider .js-slider_indicator .indi-1:after,
#s-2:checked ~ .js-slider .js-slider_indicator .indi-2:after,
#s-3:checked ~ .js-slider .js-slider_indicator .indi-3:after {
  transform: translate3d(-50%, -50%, 0) scale(2.5);
}