app/template/default/Block/top_modan_coin.twig line 1

Open in your IDE?
  1. <h2 class="toptitleh2_jp">モダンコイン新シリーズ<br><span>- New Series -</span></h2>
  3. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  4. <link rel="stylesheet" href="/common3/css/slide_mdn.css">
  5. <div class="swiper-container">
  6. <div class="swiper mySwiper">
  7. <div class="swiper-wrapper">
  8.     <div class="swiper-slide">
  9.         <a href="/sp/tudor_beasts/"><img src="https://www.coinpalace.jp/common3/img/sp_tudor-beasts.webp" style="width: 100%; height: auto;"></a>
  10.     </div>
  11.     <div class="swiper-slide">
  12.         <a href="/sp/harry_potter/"><img src="https://www.coinpalace.jp/common3/img/sp_harry-potter.webp" style="width: 100%; height: auto;"></a>
  13.     </div>
  14.     <div class="swiper-slide">
  15.         <a href="/sp/music_legends/music_legends_lennon.html"><img src="https://www.coinpalace.jp/common3/img/sp_music.webp" style="width: 100%; height: auto;"></a>
  16.     </div>
  17.     <div class="swiper-slide">
  18.         <a href="/sp/trump/"><img src="https://www.coinpalace.jp/common3/img/sp_trump.webp" style="width: 100%; height: auto;"></a>
  19.     </div>
  20.     <div class="swiper-slide">
  21.         <a href="/sp/2025_sovereign/"><img src="https://www.coinpalace.jp/common3/img/sp_2025-sovereign.webp" style="width: 100%; height: auto;"></a>
  22.     </div>
  23.     <div class="swiper-slide">
  24.         <a href="/sp/eto/"><img src="https://www.coinpalace.jp/common3/img/sp_eto.webp" style="width: 100%; height: auto;"></a>
  25.     </div>
  26.     <div class="swiper-slide">
  27.         <a href="/sp/great_seals/"><img src="https://www.coinpalace.jp/common3/img/sp_great-seals.webp" style="width: 100%; height: auto;"></a>
  28.     </div>
  29.     <div class="swiper-slide">
  30.         <a href="/sp/star_wars/"><img src="https://www.coinpalace.jp/common3/img/sp_star-wars.webp" style="width: 100%; height: auto;"></a>
  31.     </div>
  32.     <div class="swiper-slide">
  33.         <a href="/sp/great_engravers/"><img src="https://www.coinpalace.jp/common3/img/sp_great-engravers.webp" style="width: 100%; height: auto;"></a>
  34.     </div>
  36.     
  37. </div>
  38. </div>
  39. <div class="swiper-button-next"></div>
  40. <div class="swiper-button-prev"></div>
  41. <div class="swiper-pagination"></div>
  42. </div>
  45. <style>
  46. .swiper-container {
  47. width: 100%;
  48. position: relative;
  49. }
  50. .swiper {
  51. width: 100%;
  52. height: auto;
  53. margin: 0 auto;
  54. }
  55. .swiper-button-prev:after, .swiper-button-next:after {
  56. font-size: 26px;
  57. font-weight: bolder;
  58. }
  60. .swiper-button-prev {
  61. position: absolute;
  62. top: calc(100% + 70px);
  63. left: calc(50% - 90px);
  64. transform: translatey(-100%);
  65. z-index: 100;
  66. }
  67. .swiper-button-next {
  68. position: absolute;
  69. top: calc(100% + 70px);
  70. right: calc(50% - 100px);
  71. transform: translatey(-100%);
  72. z-index: 100;
  73. }
  74. .swiper-pagination {
  75. position: absolute;
  76. top: calc(100% + 12px) !important;
  77. left: 0 !important;
  78. transform: translatey(-100%);
  79. z-index: 100;
  80. }
  82. </style>
  84. <!-- Swiper JS -->
  85. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  86. <!-- Initialize Swiper -->
  87. <script>
  88. var swiper = new Swiper(".mySwiper", {
  89. loop: true,
  90. centeredSlides: true,
  91. pagination: {
  92. el: ".swiper-pagination"
  93. },
  94. navigation: {
  95. nextEl: ".swiper-button-next",
  96. prevEl: ".swiper-button-prev",
  97. },
  98. slidesPerView: 2,
  99. spaceBetween: 10,
  100. breakpoints: {
  101.     // スライドの表示枚数：500px以上の場合
  102.     500: {
  103.       slidesPerView: 4,
  104.         spaceBetween: 30,
  105.     }
  106.   }
  107. });
  108. </script>