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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .slider-wrapper {
  4.   position: relative;
  5.   width: 100%;
  6.   height: 200px;
  7.   overflow: hidden;
  8.   background: #dcdcdc;
  9. }
  11. /* 横スライド */
  12. .slider-track {
  13.   display: flex;
  14.   width: 500%;
  15.   height: 100%;
  16.   transition: transform 0.8s ease;
  17. }
  19. /* 各スライド */
  20. .slide {
  21.   width: 20%;
  22.   height: 100%;
  23.   position: relative;
  24.   overflow: hidden;
  25.   cursor: pointer;
  26. }
  28. /* 縦スライダー */
  29. .vertical-slider {
  30.   position: relative;
  31.   width: 100%;
  32.   height: 100%;
  33.   overflow: hidden;
  34. }
  35. .vertical-track {
  36.   position: absolute;
  37.   width: 100%;
  38.   height: 1000%;
  39.   top: 0;
  40.   left: 0;
  41.   animation: scrollY 6s linear infinite;
  42.   animation-play-state: paused;
  43. }
  44. .slide:hover .vertical-track {
  45.   animation-play-state: running;
  46. }
  48. /* 商品カード */
  49. .item {
  50.   width: 100%;
  51.   height: 10%;
  52.   position: relative;
  53. }
  54. .item a {
  55.   display: block;
  56.   width: 100%;
  57.   height: 100%;
  58.   text-decoration: none;
  59.   color: #fff;
  60.   position: relative;
  61. }
  62. .item img {
  63.   width: 100%;
  64.   height: 100%;
  65.   object-fit: cover;
  66.   display: block;
  67. }
  69. /* 型式名 */
  70. .item p {
  71.   position: absolute;
  72.   bottom: 5px;
  73.   left: 50%;
  74.   transform: translateX(-50%);
  75.   margin: 0;
  76.   padding: 2px 10px;
  77.   background: #222;
  78.   color: #fff;
  79.   font-size: 13px;
  80.   font-weight: bold;
  81.   border-radius: 10px;
  82. }
  84. /* ナビゲーションボタン */
  85. .nav-btn {
  86.   position: absolute;
  87.   top: 50%;
  88.   transform: translateY(-50%);
  89.   background: rgba(34, 34, 34, 0.8);
  90.   color: #fff;
  91.   border: none;
  92.   font-size: 20px;
  93.   width: 35px;
  94.   height: 35px;
  95.   cursor: pointer;
  96.   z-index: 10;
  97.   border-radius: 50%;
  98.   transition: background 0.3s;
  99. }
  100. .nav-btn:hover {
  101.   background: #000;
  102. }
  103. .prev { left: 10px; }
  104. .next { right: 10px; }
  106. /* ドットナビゲーション */
  107. /* ドットナビゲーション（右下に移動） */
  108. .dots {
  109.   position: absolute;
  110.   bottom: 8px;
  111.   right: 12px; /* ← ここを追加！ */
  112.   display: flex;
  113.   gap: 6px;
  114.   transform: none; /* ← 中央寄せを解除 */
  115. }
  117. .dot {
  118.   width: 10px;
  119.   height: 10px;
  120.   border-radius: 50%;
  121.   background: #777;
  122.   cursor: pointer;
  123.   transition: background 0.3s;
  124. }
  125. .dot.active {
  126.   background: #222;
  127. }
  129. /* 縦ループ */
  130. @keyframes scrollY {
  131.   0% { transform: translateY(0); }
  132.   100% { transform: translateY(-50%); }
  133. }
  134. </style>
  136. <div class="slider-wrapper" id="sliderWrapper">
  137.   <div class="slider-track" id="sliderTrack">
  139.     <!-- === スライド1 === -->
  140.     <div class="slide">
  141.       <div class="vertical-slider">
  142.         <div class="vertical-track">
  143.           <div class="item"><a href="#"><img src="https://placehold.jp/300x200.png?text=Cat1-1"><p>HMC-25</p></a></div>
  144.           <div class="item"><a href="#"><img src="https://placehold.jp/300x200.png?text=Cat1-2"><p>HMC-50</p></a></div>
  145.           <div class="item"><a href="#"><img src="https://placehold.jp/300x200.png?text=Cat1-3"><p>HMC-75</p></a></div>
  146.           <div class="item"><a href="#"><img src="https://placehold.jp/300x200.png?text=Cat1-4"><p>HMC-100</p></a></div>
  147.           <div class="item"><a href="#"><img src="https://placehold.jp/300x200.png?text=Cat1-5"><p>HMC-150</p></a></div>
  148.           <div class="item"><a href="#"><img src="https://placehold.jp/300x200.png?text=Cat1-1"><p>HMC-25</p></a></div>
  149.         </div>
  150.       </div>
  151.     </div>
  153.     <!-- === スライド2〜5 === -->
  154.     <div class="slide"><div class="vertical-slider"><div class="vertical-track"><div class="item"><a href="#"><img src="https://placehold.jp/300x200.png?text=Cat2-1"><p>HTC-10</p></a></div></div></div></div>
  155.     <div class="slide"><div class="vertical-slider"><div class="vertical-track"><div class="item"><a href="#"><img src="https://placehold.jp/300x200.png?text=Cat3-1"><p>HMC-200</p></a></div></div></div></div>
  156.     <div class="slide"><div class="vertical-slider"><div class="vertical-track"><div class="item"><a href="#"><img src="https://placehold.jp/300x200.png?text=Cat4-1"><p>HMC-300</p></a></div></div></div></div>
  157.     <div class="slide"><div class="vertical-slider"><div class="vertical-track"><div class="item"><a href="#"><img src="https://placehold.jp/300x200.png?text=Cat5-1"><p>HMC-400</p></a></div></div></div></div>
  159.   </div>
  161.   <button class="nav-btn prev" id="prevBtn">&#10094;</button>
  162.   <button class="nav-btn next" id="nextBtn">&#10095;</button>
  163.   <div class="dots" id="dots"></div>
  164. </div>
  166. <script>
  167. const track = document.getElementById('sliderTrack');
  168. const slides = document.querySelectorAll('.slide');
  169. const dotsContainer = document.getElementById('dots');
  170. const wrapper = document.getElementById('sliderWrapper');
  171. let current = 0;
  172. let autoSlide;
  173. let resumeTimeout;
  175. // ドット生成
  176. slides.forEach((_, i) => {
  177.   const dot = document.createElement('div');
  178.   dot.classList.add('dot');
  179.   if (i === 0) dot.classList.add('active');
  180.   dot.addEventListener('click', () => {
  181.     moveTo(i);
  182.     pauseAndResume();
  183.   });
  184.   dotsContainer.appendChild(dot);
  185. });
  186. const dots = document.querySelectorAll('.dot');
  188. // スライド移動
  189. function moveTo(index) {
  190.   current = index;
  191.   track.style.transform = `translateX(-${index * 20}%)`;
  192.   dots.forEach(d => d.classList.remove('active'));
  193.   dots[index].classList.add('active');
  194. }
  196. // ボタン
  197. document.getElementById('nextBtn').onclick = () => {
  198.   current = (current + 1) % slides.length;
  199.   moveTo(current);
  200.   pauseAndResume();
  201. };
  202. document.getElementById('prevBtn').onclick = () => {
  203.   current = (current - 1 + slides.length) % slides.length;
  204.   moveTo(current);
  205.   pauseAndResume();
  206. };
  208. // 自動スライド
  209. function startAutoSlide() {
  210.   stopAutoSlide();
  211.   autoSlide = setInterval(() => {
  212.     current = (current + 1) % slides.length;
  213.     moveTo(current);
  214.   }, 6000);
  215. }
  216. function stopAutoSlide() {
  217.   clearInterval(autoSlide);
  218. }
  219. function pauseAndResume() {
  220.   stopAutoSlide();
  221.   clearTimeout(resumeTimeout);
  222.   resumeTimeout = setTimeout(startAutoSlide, 3000);
  223. }
  225. // ホバー停止
  226. wrapper.addEventListener('mouseenter', stopAutoSlide);
  227. wrapper.addEventListener('mouseleave', startAutoSlide);
  229. // === スワイプ対応 ===
  230. let startX = 0;
  231. let isSwiping = false;
  233. wrapper.addEventListener('touchstart', (e) => {
  234.   startX = e.touches[0].clientX;
  235.   isSwiping = true;
  236.   stopAutoSlide();
  237. });
  239. wrapper.addEventListener('touchmove', (e) => {
  240.   if (!isSwiping) return;
  241.   const diffX = e.touches[0].clientX - startX;
  242.   if (Math.abs(diffX) > 50) {
  243.     if (diffX > 0) {
  244.       current = (current - 1 + slides.length) % slides.length;
  245.     } else {
  246.       current = (current + 1) % slides.length;
  247.     }
  248.     moveTo(current);
  249.     isSwiping = false;
  250.     pauseAndResume();
  251.   }
  252. });
  254. wrapper.addEventListener('touchend', () => {
  255.   isSwiping = false;
  256. });
  258. // 初期起動
  259. startAutoSlide();
  260. </script>
  262. {% endblock %}