1. <!-- HTMLは前述の参照 -->
  1. /* 略 */
  2. /* :::::: slideshow :::::: */
  3. #slideshow {
  4. position: relative;
  5. width: 100%;
  6. }
  7. .slideContents {
  8. position: relative;
  9. background: lightSeaGreen;
  10. text-align: center;
  11. -webkit-user-select: none;
  12. user-select: none;
  13. }
  14. .slideContents,
  15. .slideContents section {
  16. width: 100%;
  17. height: auto;
  18. }
  19. .slideContents section {
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. -webkit-transform: translateX(100%);
  24. transform: translateX(100%);
  25. -webkit-transition: opacity .6s, -webkit-transform .6s;
  26. transition: opacity .6s, transform .6s;
  27. }
  28. .slideContents section img {
  29. box-sizing: border-box;
  30. max-width: 100%;
  31. height: auto;
  32. padding: 0 50px;
  33. vertical-align: middle;
  34. }
  35. /* :::::: slideshow mechanism :::::: */
  36. #switch1:checked ~ #slideshow .slideContents #slide1,
  37. #switch2:checked ~ #slideshow .slideContents #slide2,
  38. #switch3:checked ~ #slideshow .slideContents #slide3,
  39. #switch4:checked ~ #slideshow .slideContents #slide4,
  40. #switch5:checked ~ #slideshow .slideContents #slide5 {
  41. z-index: 1;
  42. position: relative;
  43. -webkit-transform: translateX(0);
  44. transform: translateX(0);
  45. }
  46. #switch1:checked ~ #slideshow .slideContents #slide1,
  47. #switch2:checked ~ #slideshow .slideContents #slide2,
  48. #switch3:checked ~ #slideshow .slideContents #slide3,
  49. #switch4:checked ~ #slideshow .slideContents #slide4,
  50. #switch5:checked ~ #slideshow .slideContents #slide5 {
  51. opacity: 1;
  52. }
  53. #switch1:checked ~ #slideshow .slideContents #slide5,
  54. #switch1:checked ~ #slideshow .slideContents #slide4,
  55. #switch2:checked ~ #slideshow .slideContents #slide1,
  56. #switch2:checked ~ #slideshow .slideContents #slide5,
  57. #switch3:checked ~ #slideshow .slideContents #slide2,
  58. #switch3:checked ~ #slideshow .slideContents #slide1,
  59. #switch4:checked ~ #slideshow .slideContents #slide3,
  60. #switch4:checked ~ #slideshow .slideContents #slide2,
  61. #switch5:checked ~ #slideshow .slideContents #slide4,
  62. #switch5:checked ~ #slideshow .slideContents #slide3 {
  63. -webkit-transform: translateX(-100%);
  64. transform: ranslateX(-100%);
  65. }
  66. #switch1:checked ~ #slideshow .slideContents #slide3,
  67. #switch2:checked ~ #slideshow .slideContents #slide4,
  68. #switch3:checked ~ #slideshow .slideContents #slide5,
  69. #switch4:checked ~ #slideshow .slideContents #slide1,
  70. #switch5:checked ~ #slideshow .slideContents #slide2,
  71. #switch1:checked ~ #slideshow .slideContents #slide4,
  72. #switch2:checked ~ #slideshow .slideContents #slide5,
  73. #switch3:checked ~ #slideshow .slideContents #slide1,
  74. #switch4:checked ~ #slideshow .slideContents #slide2,
  75. #switch5:checked ~ #slideshow .slideContents #slide3 {
  76. transition-duration: 0s;
  77. }
  78. /* :::::: arrows :::::: */
  79. /* 略 */