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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .box_pdcommon {
  4.   display: flex;
  5.   flex-wrap: wrap;
  6.   justify-content: space-around;
  7.   width: 100%;
  8.   height: 180px;
  9.   z-index: 1;
  10.   background-image: url("https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/wi2025_top_h250.png"); 
  11.   background-size: cover;
  12. }
  13. .fit-picture_pdcommon3 {
  14.   width: 100%;
  16. }
  17. .carousel-container {
  18.   display: flex;
  19.   gap: 20px;
  20.   flex-wrap: wrap;
  21.   justify-content: center;
  22.   margin-top: 10px;
  23.   margin-bottom: 10px;
  24. }
  25. .carousel_common {
  26.   position: relative;
  27.   width: 320px;
  28.   height: 150px;
  29.   overflow: hidden;
  30.   border: 1px solid #aaa;
  31.   border-radius: 5px;
  32.   background: #fff;
  33. }
  35. .carousel-track {
  36.   display: flex;
  37.   transition: transform 0.5s ease-in-out;
  38. }
  40. .carousel-item {
  41.   flex: 0 0 100%;
  42.   text-align: center;
  43.   background: #ddd;
  44.   padding: px 0;
  45.   font-size: 24px;
  46. }
  48. .prev, .next {
  49.   position: absolute;
  50.   top: 50%;
  51.   transform: translateY(-50%);
  52.   background: rgba(0,0,0,0.5);
  53.   color: #fff;
  54.   border: none;
  55.   font-size: 24px;
  56.   cursor: pointer;
  57.   padding: 5px 10px;
  58. }
  60. .prev { left: 5px; }
  61. .next { right: 5px; }
  63. /* ドットマーカー */
  64. .dots {
  65.   position: absolute;
  66.   bottom: 10px;
  67.   width: 100%;
  68.   display: flex;
  69.   justify-content: center;
  70.   gap: 8px;
  71. }
  73. .dot {
  74.   width: 10px;
  75.   height: 10px;
  76.   border-radius: 50%;
  77.   background: rgba(0,0,0,0.3);
  78.   cursor: pointer;
  79.   transition: background 0.3s;
  80. }
  82. .dot.active {
  83.   background: rgba(0,0,0,0.8);
  84. }
  86. /* レスポンシブ */
  87. @media (max-width: 1000px) {
  88.   .carousel { width: 45%; }
  89. }
  91. @media (max-width: 600px) {
  92.   .carousel { width: 100%; }
  93. }
  94. </style>
  95. <div class="box_pdcommon">
  96.   <div class="carousel-container">
  97.     <div class="carousel_common" id="carousel1">
  98.       <div class="carousel-track">
  99.         <div class="carousel-item">
  100.           <a href="https://www.nakatomishop.com/products/detail/1404">
  101.           <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_150.png"></a>
  102.         </div>
  103.         <div class="carousel-item">
  104.           <a href="https://www.nakatomishop.com/products/detail/1404">
  105.           <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_150.png"></a>
  106.         </div>
  107.         <div class="carousel-item">
  108.           <a href="https://www.nakatomishop.com/products/detail/1404">
  109.           <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_150.png"></a>
  110.         </div>
  111.         <div class="carousel-item">
  112.           <a href="https://www.nakatomishop.com/products/detail/1404">
  113.           <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_150.png"></a>            
  114.         </div>
  115.       </div>
  116.        <button class="prev">‹</button>
  117.        <button class="next">›</button>
  118.       <div class="dots"></div>
  119.     </div>
  120.     <div class="carousel_common" id="carousel2">
  121.       <div class="carousel-track">
  122.         <div class="carousel-item">2-1</div>
  123.         <div class="carousel-item">2-2</div>
  124.         <div class="carousel-item">2-3</div>
  125.         <div class="carousel-item">2-4</div>
  126.       </div>
  127.        <button class="prev">‹</button>
  128.        <button class="next">›</button>
  129.       <div class="dots"></div>
  130.     </div>
  131.     <div class="carousel_common" id="carousel3">
  132.       <div class="carousel-track">
  133.         <div class="carousel-item">3-1</div>
  134.         <div class="carousel-item">3-2</div>
  135.         <div class="carousel-item">3-3</div>
  136.         <div class="carousel-item">3-4</div>
  137.       </div>
  138.         <button class="prev">‹</button>
  139.         <button class="next">›</button>
  140.       <div class="dots"></div>
  141.     </div>
  142.   </div>
  143. </div>
  144. <script>
  145. document.querySelectorAll('.carousel_common').forEach(carousel => {
  146.   const track = carousel.querySelector('.carousel-track');
  147.   const items = Array.from(track.children);
  148.   const prevButton = carousel.querySelector('.prev');
  149.   const nextButton = carousel.querySelector('.next');
  150.   const dotsContainer = carousel.querySelector('.dots');
  152.   let index = 0;
  153.   let slideWidth = carousel.offsetWidth;
  155.   // 🧹ドット重複防止
  156.   dotsContainer.innerHTML = "";
  158.   // ドット生成
  159.   items.forEach((_, i) => {
  160.     const dot = document.createElement('div');
  161.     dot.classList.add('dot');
  162.     if (i === 0) dot.classList.add('active');
  163.     dot.addEventListener('click', () => {
  164.       index = i;
  165.       moveToSlide();
  166.       updateDots();
  167.       resetAuto();
  168.     });
  169.     dotsContainer.appendChild(dot);
  170.   });
  172.   const dots = dotsContainer.querySelectorAll('.dot');
  174.   const updateSlideWidth = () => {
  175.     slideWidth = carousel.offsetWidth;
  176.     track.style.transition = 'none';
  177.     track.style.transform = `translateX(-${slideWidth * index}px)`;
  178.   };
  180.   window.addEventListener('resize', updateSlideWidth);
  181.   updateSlideWidth();
  183.   const moveToSlide = () => {
  184.     track.style.transition = 'transform 0.5s ease-in-out';
  185.     track.style.transform = `translateX(-${slideWidth * index}px)`;
  186.     updateDots();
  187.   };
  189.   const updateDots = () => {
  190.     dots.forEach(dot => dot.classList.remove('active'));
  191.     dots[index].classList.add('active');
  192.   };
  194.   nextButton.addEventListener('click', () => {
  195.     index = (index + 1) % items.length;
  196.     moveToSlide();
  197.     resetAuto();
  198.   });
  200.   prevButton.addEventListener('click', () => {
  201.     index = (index - 1 + items.length) % items.length;
  202.     moveToSlide();
  203.     resetAuto();
  204.   });
  206.   // 自動スライド
  207.   let interval = setInterval(() => {
  208.     index = (index + 1) % items.length;
  209.     moveToSlide();
  210.   }, 3000);
  212.   const resetAuto = () => {
  213.     clearInterval(interval);
  214.     interval = setInterval(() => {
  215.       index = (index + 1) % items.length;
  216.       moveToSlide();
  217.     }, 3000);
  218.   };
  220.   carousel.addEventListener('mouseenter', () => clearInterval(interval));
  221.   carousel.addEventListener('mouseleave', resetAuto);
  223.   // スワイプ操作
  224.   let startX = 0;
  225.   let isDragging = false;
  227.   carousel.addEventListener('touchstart', e => {
  228.     startX = e.touches[0].clientX;
  229.     isDragging = true;
  230.     track.style.transition = 'none';
  231.   });
  233.   carousel.addEventListener('touchmove', e => {
  234.     if (!isDragging) return;
  235.     const moveX = e.touches[0].clientX - startX;
  236.     track.style.transform = `translateX(${-slideWidth * index + moveX}px)`;
  237.   });
  239.   carousel.addEventListener('touchend', e => {
  240.     isDragging = false;
  241.     const diff = e.changedTouches[0].clientX - startX;
  242.     if (diff > 50) index = (index - 1 + items.length) % items.length;
  243.     else if (diff < -50) index = (index + 1) % items.length;
  244.     moveToSlide();
  245.     resetAuto();
  246.   });
  247. });
  248. </script>
  249. {% endblock %}