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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .box_pdcommon_r {
  4.   display: flex;
  5.   flex-wrap: wrap;
  6.   justify-content: space-around;
  7.   width: 100%;
  8.   height: auto;
  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. .box_pdcommon1 {
  14.   display: flex;
  15.   flex-wrap: wrap;
  16.   justify-content: space-around;  
  17.   width: calc(130% / 2 - 5px);
  18.   min-width: 320px;
  19. }
  20. .box_pdcommon2 {
  21.   display: flex;
  22.   flex-wrap: wrap;
  23.   justify-content: space-around;  
  24.   width: calc(100% / 5 - 5px);
  25.   min-width: 150px;
  26.   height: 200px;
  27. }
  28. .box_pdcommon3 {
  29.   display: flex;
  30.   flex-wrap: wrap;
  31.   justify-content: space-around;  
  32.   width: calc(100% / 6 - 5px);
  33.   min-width: 150px;
  34.   height: 200px;
  35.   margin-bottom: 10px;
  36. }
  37. .box_pdcommon4 {
  38.   display: flex;
  39.   flex-wrap: wrap;
  40.   justify-content: space-around;
  41.   width: 320px;
  42.   height: 320px;  
  43.   margin: 10px 0;
  44. }
  45. .box_pdcommon5 {
  46.   width: 100%;
  47.   text-align: center;
  48.   margin-left: auto;
  49.   margin-right: auto;
  50. }
  51. .box_pdcommon6 {
  52.   width: 320px;
  53. }
  54. .fit-picture_pdcommon {
  55.   width: 100%;
  56.   height: 200px;
  57. }
  58. .fit-picture_pdcommon2 {
  59.   width: 320px;
  60.   height: 320px;
  61. }
  62. p.example_pd {
  63.   font-size: 26px;
  64.   color: red;
  65.   margin-top: 20px;
  66.   font-weight: 500;
  67. }
  68. p.example_pd2 {
  69.   font-size: 16px;
  70.   color: blue;
  71.   text-align: center;
  72.   margin-top: 10px;
  73. }
  74. p.example_pd3 {
  75.   font-size: 16px;
  76.   color: #000;
  77.   text-align: center;
  78.   line-height: 16px;
  79.   margin-top: 10px;
  80.   font-weight: 500;
  81. }
  82. .carousel-container {
  83.   display: flex;
  84.   gap: 20px;
  85.   flex-wrap: wrap;
  86.   justify-content: flex-start; /* 左寄せ */
  87.   margin-top: 10px;
  88.   margin-bottom: 10px;
  89. }
  90. .carousel {
  91.   position: relative;
  92.   width: 320px;
  93.   overflow: hidden;
  94.   border: 1px solid #aaa;
  95.   border-radius: 6px;
  96.   background: #fff;
  97. }
  98. .carousel-track {
  99.   display: flex;
  100.   transition: transform 0.5s ease-in-out;
  101. }
  102. .carousel-item {
  103.   flex: 0 0 100%;
  104.   text-align: center;
  105.   background: #ddd;
  106.   padding: 0px 0;
  107.   font-size: 24px;
  108.   width: 320px;
  109.   height: 320px;
  110. }
  111. .prev, .next {
  112.   position: absolute;
  113.   top: 50%;
  114.   transform: translateY(-50%);
  115.   background: rgba(0,0,0,0.5);
  116.   color: #fff;
  117.   border: none;
  118.   font-size: 24px;
  119.   cursor: pointer;
  120.   padding: 5px 10px;
  121. }
  122. .prev { left: 5px; }
  123. .next { right: 5px; }
  125. /* マーカー */
  126. .dots {
  127.   position: absolute;
  128.   bottom: 10px;
  129.   width: 100%;
  130.   display: flex;
  131.   justify-content: center;
  132.   gap: 8px;
  133. }
  134. .dot {
  135.   width: 10px;
  136.   height: 10px;
  137.   border-radius: 50%;
  138.   background: rgba(0,0,0,0.3);
  139.   cursor: pointer;
  140.   transition: background 0.3s;
  141. }
  142. .dot.active {
  143.   background: rgba(0,0,0,0.8);
  144. }
  145. /* レスポンシブ */
  146. @media (max-width: 1000px) {
  147.   .carousel { width: 45%; }
  148. }
  149. @media (max-width: 600px) {
  150.   .carousel { width: 100%; }
  151. }
  152. </style>
  153. <div class="box_pdcommon_r">
  154.   <div class="box_pdcommon1">
  155.     <div class="box_pdcommon5">
  156.       <p class="example_pd">一般工場換気扇</p>  
  157.       <p class="example_pd2">一般工場換気扇</p>  
  158.     </div>
  159.     <div class="box_pdcommon2">
  160.       <a href="https://www.nakatomishop.com/products/detail/1404">
  161.       <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF15_150_200.png" width="100%" alt="">
  162.       <p class="example_pd3">N-VF15</p></a>
  163.     </div>
  164.     <div class="box_pdcommon2">
  165.       <a href="https://www.nakatomishop.com/products/detail/1404">
  166.       <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF15_150_200.png" width="100%" alt="">
  167.       <p class="example_pd3">111</p></a>
  168.     </div>
  169.     <div class="box_pdcommon2">
  170.       <a href="https://www.nakatomishop.com/products/detail/1404">
  171.       <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF15_150_200.png" width="100%" alt="">
  172.       <p class="example_pd3">111</p></a>
  173.     </div>
  174.     <div class="box_pdcommon2">
  175.       <a href="https://www.nakatomishop.com/products/detail/1404">
  176.       <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF15_150_200.png" width="100%" alt="">
  177.       <p class="example_pd3">111</p></a>
  178.     </div>
  179.     <div class="box_pdcommon2">
  180.       <a href="https://www.nakatomishop.com/products/detail/1404">
  181.       <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_150_200.png" width="100%" alt="">
  182.       <p class="example_pd3">111</p></a>
  183.     </div>
  184.   </div>
  185.   <div class="box_pdcommon6">
  186.     <div class="carousel-container">
  187.       <div class="carousel" id="carousel1">
  188.         <div class="carousel-track">
  189.           <div class="carousel-item">
  190.            <a href="https://www.nakatomishop.com/products/detail/1404">
  191.            <img class="fit-picture_pdcommon2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_320.png"></a>
  192.           </div>  
  193.           <div class="carousel-item">
  194.             <a href="https://www.nakatomishop.com/products/detail/1404">
  195.             <img class="fit-picture_pdcommon2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_320.png"></a> 
  196.           </div>
  197.           <div class="carousel-item">
  198.             <a href="https://www.nakatomishop.com/products/detail/1404">
  199.             <img class="fit-picture_pdcommon2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_320.png"></a>
  200.           </div>
  201.           <div class="carousel-item">
  202.             <a href="https://www.nakatomishop.com/products/detail/1404">
  203.             <img class="fit-picture_pdcommon2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_320.png"></a>
  204.           </div>
  205.           <div class="carousel-item">
  206.             <a href="https://www.nakatomishop.com/products/detail/1404">
  207.             <img class="fit-picture_pdcommon2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_320.png"></a>
  208.           </div>
  209.         </div>
  210.           <button class="prev">‹</button>
  211.           <button class="next">›</button>
  212.         <div class="dots"></div> <!-- ← ドットマーカー -->
  213.       </div>
  214.     </div>
  215.   </div>  
  216. </div>
  217. <script>
  218. document.querySelectorAll('.carousel').forEach(carousel => {
  219.   const track = carousel.querySelector('.carousel-track');
  220.   const items = Array.from(track.children);
  221.   const prevButton = carousel.querySelector('.prev');
  222.   const nextButton = carousel.querySelector('.next');
  223.   const dotsContainer = carousel.querySelector('.dots');
  225.   let index = 0;
  226.   let slideWidth = carousel.offsetWidth;
  229.   // 重複防止 — ドットを初期化
  230.   dotsContainer.innerHTML = "";
  232.   // ドット生成
  233.   items.forEach((_, i) => {
  234.     const dot = document.createElement('div');
  235.     dot.classList.add('dot');
  236.     if (i === 0) dot.classList.add('active');
  237.     dot.addEventListener('click', () => {
  238.       index = i;
  239.       moveToSlide();
  240.       updateDots();
  241.       resetAuto();
  242.     });
  243.     dotsContainer.appendChild(dot);
  244.   });
  245.   const dots = dotsContainer.querySelectorAll('.dot');
  247.   const updateSlideWidth = () => {
  248.     slideWidth = carousel.offsetWidth;
  249.     track.style.transition = 'none';
  250.     track.style.transform = `translateX(-${slideWidth * index}px)`;
  251.   };
  253.   window.addEventListener('resize', updateSlideWidth);
  254.   updateSlideWidth();
  256.   const moveToSlide = () => {
  257.     track.style.transition = 'transform 0.5s ease-in-out';
  258.     track.style.transform = `translateX(-${slideWidth * index}px)`;
  259.     updateDots();
  260.   };
  262.   const updateDots = () => {
  263.     dots.forEach(dot => dot.classList.remove('active'));
  264.     dots[index].classList.add('active');
  265.   };
  267.   nextButton.addEventListener('click', () => {
  268.     index = (index + 1) % items.length;
  269.     moveToSlide();
  270.     resetAuto();
  271.   });
  273.   prevButton.addEventListener('click', () => {
  274.     index = (index - 1 + items.length) % items.length;
  275.     moveToSlide();
  276.     resetAuto();
  277.   });
  279.   // 自動スライド
  280.   let interval = setInterval(() => {
  281.     index = (index + 1) % items.length;
  282.     moveToSlide();
  283.   }, 3000);
  285.   const resetAuto = () => {
  286.     clearInterval(interval);
  287.     interval = setInterval(() => {
  288.       index = (index + 1) % items.length;
  289.       moveToSlide();
  290.     }, 3000);
  291.   };
  293.   carousel.addEventListener('mouseenter', () => clearInterval(interval));
  294.   carousel.addEventListener('mouseleave', resetAuto);
  296.   // スワイプ操作
  297.   let startX = 0;
  298.   let isDragging = false;
  300.   carousel.addEventListener('touchstart', e => {
  301.     startX = e.touches[0].clientX;
  302.     isDragging = true;
  303.     track.style.transition = 'none';
  304.   });
  306.   carousel.addEventListener('touchmove', e => {
  307.     if (!isDragging) return;
  308.     const moveX = e.touches[0].clientX - startX;
  309.     track.style.transform = `translateX(${-slideWidth * index + moveX}px)`;
  310.   });
  312.   carousel.addEventListener('touchend', e => {
  313.     isDragging = false;
  314.     const diff = e.changedTouches[0].clientX - startX;
  315.     if (diff > 50) index = (index - 1 + items.length) % items.length;
  316.     else if (diff < -50) index = (index + 1) % items.length;
  317.     moveToSlide();
  318.     resetAuto();
  319.   });
  320. });
  321. </script>
  323. {% endblock %}