1. <input type="radio" name="slideshow" id="switch1" checked>
  2. <input type="radio" name="slideshow" id="switch2">
  3. <input type="radio" name="slideshow" id="switch3">
  4. <input type="radio" name="slideshow" id="switch4">
  5. <input type="radio" name="slideshow" id="switch5">
  6. <div id="slideshow">
  7. <div class="slideContents">
  8. <section id="slide1">
  9. <img src="../img/slide_01.png">
  10. </section>
  11. <section id="slide2">
  12. <img src="../img/slide_02.png">
  13. </section>
  14. <section id="slide3">
  15. <img src="../img/slide_03.png">
  16. </section>
  17. <section id="slide4">
  18. <img src="../img/slide_04.png">
  19. </section>
  20. <section id="slide5">
  21. <img src="../img/slide_05.png">
  22. </section>
  23. </div>
  24. <p class="arrow prev">
  25. <i class="ico"></i>
  26. <label for="switch1"></label>
  27. <label for="switch2"></label>
  28. <label for="switch3"></label>
  29. <label for="switch4"></label>
  30. <label for="switch5"></label>
  31. </p>
  32. <p class="arrow next">
  33. <i class="ico"></i>
  34. <label for="switch1"></label>
  35. <label for="switch2"></label>
  36. <label for="switch3"></label>
  37. <label for="switch4"></label>
  38. <label for="switch5"></label>
  39. </p>
  40. </div>
  1. #wrapper {
  2. overflow: hidden;
  3. width: 100%;
  4. }
  5. input[type="radio"] {
  6. display: none;
  7. }
  8. /* :::::: slideshow :::::: */
  9. #slideshow {
  10. position: relative;
  11. width: 100%;
  12. }
  13. .slideContents {
  14. position: relative;
  15. background: lightSeaGreen;
  16. text-align: center;
  17. -webkit-user-select: none;
  18. user-select: none;
  19. }
  20. .slideContents {
  21. width: 500%;
  22. -webkit-transition: -webkit-transform .6s;
  23. transition: transform .6s;
  24. }
  25. .slideContents::after {
  26. content: "";
  27. display: block;
  28. clear: both;
  29. }
  30. .slideContents section {
  31. float: left;
  32. width: 20%;
  33. -webkit-transition: opacity .6s;
  34. transition: opacity .6s;
  35. }
  36. .slideContents section img {
  37. box-sizing: border-box;
  38. -moz-box-sizing: border-box;
  39. max-width: 100%;
  40. height: auto;
  41. padding: 0 50px;
  42. vertical-align: middle;
  43. }
  44. /* :::::: slideshow mechanism :::::: */
  45. #switch1:checked ~ #slideshow .slideContents {
  46. -webkit-transform: translateX(0);
  47. transform: translateX(0);
  48. }
  49. #switch2:checked ~ #slideshow .slideContents {
  50. -webkit-transform: translateX(-20%);
  51. transform: translateX(-20%);
  52. }
  53. #switch3:checked ~ #slideshow .slideContents {
  54. -webkit-transform: translateX(-40%);
  55. transform: translateX(-40%);
  56. }
  57. #switch4:checked ~ #slideshow .slideContents {
  58. -webkit-transform: translateX(-60%);
  59. transform: translateX(-60%);
  60. }
  61. #switch5:checked ~ #slideshow .slideContents {
  62. -webkit-transform: translateX(-80%);
  63. transform: translateX(-80%);
  64. }
  65. /* :::::: arrows :::::: */
  66. .arrow,
  67. .arrow label,
  68. .arrow .ico {
  69. position: absolute;
  70. }
  71. .arrow {
  72. top: 0;
  73. margin: 0;
  74. transition: background .3s;
  75. }
  76. .prev { left: 0; }
  77. .next { right: 0; }
  78. .arrow:hover {
  79. background: rgba(255,255,255,.2);
  80. }
  81. .arrow,
  82. .arrow label {
  83. cursor: pointer;
  84. width: 50px;
  85. height: 100%;
  86. }
  87. .arrow label {
  88. top: 0;
  89. left: 0;
  90. z-index: 1;
  91. }
  92. .arrow .ico {
  93. top: 50%;
  94. width: 12px;
  95. height: 12px;
  96. margin-top: -6px;
  97. border-top: 3px solid #fff;
  98. border-right: 3px solid #fff;
  99. opacity: 0;
  100. transition: right .6s, left .6s, opacity .6s;
  101. }
  102. .arrow:hover .ico {
  103. opacity: .6;
  104. transition-duration: .3s;
  105. }
  106. .prev .ico {
  107. left: 60%;
  108. -webkit-transform: rotate(-135deg);
  109. transform: rotate(-135deg);
  110. }
  111. .next .ico {
  112. right: 60%;
  113. -webkit-transform: rotate(45deg);
  114. transform: rotate(45deg);
  115. }
  116. .prev:hover .ico { left: 30%; }
  117. .next:hover .ico { right: 30%; }
  118. /* :::::: arrows mechanism :::::: */
  119. .arrow label {
  120. pointer-events: none;
  121. }
  122. #switch1:checked ~ #slideshow .prev label[for="switch5"],
  123. #switch2:checked ~ #slideshow .prev label[for="switch1"],
  124. #switch3:checked ~ #slideshow .prev label[for="switch2"],
  125. #switch4:checked ~ #slideshow .prev label[for="switch3"],
  126. #switch5:checked ~ #slideshow .prev label[for="switch4"],
  127. #switch1:checked ~ #slideshow .next label[for="switch2"],
  128. #switch2:checked ~ #slideshow .next label[for="switch3"],
  129. #switch3:checked ~ #slideshow .next label[for="switch4"],
  130. #switch4:checked ~ #slideshow .next label[for="switch5"],
  131. #switch5:checked ~ #slideshow .next label[for="switch1"] {
  132. pointer-events: auto;
  133. }