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

Open in your IDE?
  1. {% block main %}
  2. <style>
  3. .box_pdcommon_l {
  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_l">
  154.   <div class="box_pdcommon6">
  155.     <div class="carousel-container">
  156.       <div class="carousel" id="carousel2">
  157.         <div class="carousel-track">
  158.           <div class="carousel-item">
  159.            <a href="https://www.nakatomishop.com/products/detail/1404">
  160.            <img class="fit-picture_pdcommon2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_320.png"></a>
  161.           </div>  
  162.           <div class="carousel-item">
  163.             <a href="https://www.nakatomishop.com/products/detail/1404">
  164.             <img class="fit-picture_pdcommon2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_320.png"></a> 
  165.           </div>
  166.           <div class="carousel-item">
  167.             <a href="https://www.nakatomishop.com/products/detail/1404">
  168.             <img class="fit-picture_pdcommon2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_320.png"></a>
  169.           </div>
  170.           <div class="carousel-item">
  171.             <a href="https://www.nakatomishop.com/products/detail/1404">
  172.             <img class="fit-picture_pdcommon2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_320.png"></a>
  173.           </div>
  174.           <div class="carousel-item">
  175.             <a href="https://www.nakatomishop.com/products/detail/1404">
  176.             <img class="fit-picture_pdcommon2" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_320_320.png"></a>
  177.           </div>
  178.         </div>
  179.           <button class="prev">‹</button>
  180.           <button class="next">›</button>
  181.         <div class="dots"></div> <!-- ← ドットマーカー -->
  182.       </div>
  183.     </div>
  184.   </div>
  185.   <div class="box_pdcommon1">
  186.     <div class="box_pdcommon5">
  187.       <p class="example_pd">一般工場換気扇</p>  
  188.       <p class="example_pd2">一般工場換気扇</p>  
  189.     </div>
  190.     <div class="box_pdcommon2">
  191.       <a href="https://www.nakatomishop.com/products/detail/1404">
  192.       <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF15_150_200.png" width="100%" alt="">
  193.       <p class="example_pd3">N-VF15</p></a>
  194.     </div>
  195.     <div class="box_pdcommon2">
  196.       <a href="https://www.nakatomishop.com/products/detail/1404">
  197.       <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF15_150_200.png" width="100%" alt="">
  198.       <p class="example_pd3">111</p></a>
  199.     </div>
  200.     <div class="box_pdcommon2">
  201.       <a href="https://www.nakatomishop.com/products/detail/1404">
  202.       <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF15_150_200.png" width="100%" alt="">
  203.       <p class="example_pd3">111</p></a>
  204.     </div>
  205.     <div class="box_pdcommon2">
  206.       <a href="https://www.nakatomishop.com/products/detail/1404">
  207.       <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/N-VF15_150_200.png" width="100%" alt="">
  208.       <p class="example_pd3">111</p></a>
  209.     </div>
  210.     <div class="box_pdcommon2">
  211.       <a href="https://www.nakatomishop.com/products/detail/1404">
  212.       <img class="fit-picture_pdcommon3" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25winter/image_spacification_150_200.png" width="100%" alt="">
  213.       <p class="example_pd3">111</p></a>
  214.     </div>
  215.   </div>
  216.   
  217. </div>
  218. <script>
  219. document.querySelectorAll('.carousel').forEach(carousel => {
  220.   const track = carousel.querySelector('.carousel-track');
  221.   const items = Array.from(track.children);
  222.   const prevButton = carousel.querySelector('.prev');
  223.   const nextButton = carousel.querySelector('.next');
  224.   const dotsContainer = carousel.querySelector('.dots');
  226.   let index = 0;
  227.   let slideWidth = carousel.offsetWidth;
  230.   // 重複防止 — ドットを初期化
  231.   dotsContainer.innerHTML = "";
  233.   // ドット生成
  234.   items.forEach((_, i) => {
  235.     const dot = document.createElement('div');
  236.     dot.classList.add('dot');
  237.     if (i === 0) dot.classList.add('active');
  238.     dot.addEventListener('click', () => {
  239.       index = i;
  240.       moveToSlide();
  241.       updateDots();
  242.       resetAuto();
  243.     });
  244.     dotsContainer.appendChild(dot);
  245.   });
  246.   const dots = dotsContainer.querySelectorAll('.dot');
  248.   const updateSlideWidth = () => {
  249.     slideWidth = carousel.offsetWidth;
  250.     track.style.transition = 'none';
  251.     track.style.transform = `translateX(-${slideWidth * index}px)`;
  252.   };
  254.   window.addEventListener('resize', updateSlideWidth);
  255.   updateSlideWidth();
  257.   const moveToSlide = () => {
  258.     track.style.transition = 'transform 0.5s ease-in-out';
  259.     track.style.transform = `translateX(-${slideWidth * index}px)`;
  260.     updateDots();
  261.   };
  263.   const updateDots = () => {
  264.     dots.forEach(dot => dot.classList.remove('active'));
  265.     dots[index].classList.add('active');
  266.   };
  268.   nextButton.addEventListener('click', () => {
  269.     index = (index + 1) % items.length;
  270.     moveToSlide();
  271.     resetAuto();
  272.   });
  274.   prevButton.addEventListener('click', () => {
  275.     index = (index - 1 + items.length) % items.length;
  276.     moveToSlide();
  277.     resetAuto();
  278.   });
  280.   // 自動スライド
  281.   let interval = setInterval(() => {
  282.     index = (index + 1) % items.length;
  283.     moveToSlide();
  284.   }, 3000);
  286.   const resetAuto = () => {
  287.     clearInterval(interval);
  288.     interval = setInterval(() => {
  289.       index = (index + 1) % items.length;
  290.       moveToSlide();
  291.     }, 3000);
  292.   };
  294.   carousel.addEventListener('mouseenter', () => clearInterval(interval));
  295.   carousel.addEventListener('mouseleave', resetAuto);
  297.   // スワイプ操作
  298.   let startX = 0;
  299.   let isDragging = false;
  301.   carousel.addEventListener('touchstart', e => {
  302.     startX = e.touches[0].clientX;
  303.     isDragging = true;
  304.     track.style.transition = 'none';
  305.   });
  307.   carousel.addEventListener('touchmove', e => {
  308.     if (!isDragging) return;
  309.     const moveX = e.touches[0].clientX - startX;
  310.     track.style.transform = `translateX(${-slideWidth * index + moveX}px)`;
  311.   });
  313.   carousel.addEventListener('touchend', e => {
  314.     isDragging = false;
  315.     const diff = e.changedTouches[0].clientX - startX;
  316.     if (diff > 50) index = (index - 1 + items.length) % items.length;
  317.     else if (diff < -50) index = (index + 1) % items.length;
  318.     moveToSlide();
  319.     resetAuto();
  320.   });
  321. });
  322. </script>
  325. {% endblock %}