app/template/BlackCherry/Block/image_slide_block.twig line 1

Open in your IDE?
  1. {# 画像スライドブロック #}
  2. <div class="ec-sliderRole">
  3.     <div class="main_visual">
  4.         <div class="image-slider">
  5.             
  6.              <!-- スライド0 -->
  7.             <div class="slide-item active">
  8.                     <img src="{{ asset('assets/img/pr/pr_visual.jpg') }}"
  9.                         alt="BlackCherry FV"
  10.                         width="800" 
  11.                         height="400"
  12.                         loading="eager"
  13.                         fetchpriority="high"
  14.                         sizes="(max-width: 768px) 100vw, 80vw"
  15.                     />
  16.             </div>
  17.             
  18.             <!-- スライド1 -->
  19.             <div class="slide-item">
  20.                 <a href="{{ url('product_detail', {'id': 59498}) }}">
  21.                     <img src="{{ asset('assets/img/top/img_bp_spring.png') }}" 
  22.                          alt="スライド1" 
  23.                          width="800" 
  24.                          height="400"
  25.                          loading="lazy"
  26.                          sizes="(max-width: 768px) 100vw, 80vw" />
  27.                 </a>
  28.             </div>
  29.             
  30.             <!-- スライド2 -->
  31.             <div class="slide-item">
  32.                 <a href="{{ url('entry')}}">
  33.                     <img src="{{ asset('assets/img/top/img_entry.png') }}" 
  34.                          alt="スライド2" 
  35.                          width="800" 
  36.                          height="400"
  37.                          loading="lazy"
  38.                          sizes="(max-width: 768px) 100vw, 80vw" />
  39.                 </a>
  40.             </div>
  41.             
  42.             <!-- スライド3 -->
  43.             <div class="slide-item">
  44.                     <img src="{{ asset('assets/img/top/img_point_new.png') }}" 
  45.                          alt="スライド3" 
  46.                          width="800" 
  47.                          height="400"
  48.                          loading="lazy"
  49.                          sizes="(max-width: 768px) 100vw, 80vw" />
  50.             </div>
  51.         </div>
  52.     </div>
  53. </div>
  55. <style>
  56. .main_visual {
  57.     text-align: center;
  58.     margin: 0 auto;
  59.     padding-left: 20px;
  60.     padding-right: 20px;
  61. }
  63. .main_visual img {
  64.     width: 100%;
  65.     height: auto;
  66. }
  68. @media only screen and (min-width: 768px) {
  69.     .main_visual img {
  70.         width: 80%;
  71.         margin: auto;
  72.     }
  73. }
  75. .image-slider {
  76.     position: relative;
  77.     overflow: hidden;
  78. }
  80. .slide-item {
  81.     display: none;
  82.     opacity: 0;
  83.     transition: opacity 1.5s ease-in-out;
  84. }
  86. .slide-item.active {
  87.     display: block;
  88.     opacity: 1;
  89. }
  91. .slide-item img {
  92.     width: 100%;
  93.     height: auto;
  94.     display: block;
  95. }
  97. /* スライダーコントロール */
  98. .slider-controls {
  99.     text-align: center;
  100.     margin-top: 20px;
  101. }
  103. .slider-dots {
  104.     display: inline-block;
  105. }
  107. .slider-dot {
  108.     display: inline-block;
  109.     width: 12px;
  110.     height: 12px;
  111.     border-radius: 50%;
  112.     background-color: #ccc;
  113.     margin: 0 5px;
  114.     cursor: pointer;
  115.     transition: background-color 0.3s;
  116. }
  118. .slider-dot.active {
  119.     background-color: #333;
  120. }
  122. .slider-dot:hover {
  123.     background-color: #666;
  124. }
  125. </style>
  127. <script>
  128. document.addEventListener('DOMContentLoaded', function() {
  129.     const slides = document.querySelectorAll('.slide-item');
  130.     let currentSlide = 0;
  131.     
  132.     // ドットコントロールを作成
  133.     const sliderControls = document.createElement('div');
  134.     sliderControls.className = 'slider-controls';
  135.     const dotsContainer = document.createElement('div');
  136.     dotsContainer.className = 'slider-dots';
  137.     
  138.     for (let i = 0; i < slides.length; i++) {
  139.         const dot = document.createElement('span');
  140.         dot.className = 'slider-dot';
  141.         if (i === 0) dot.classList.add('active');
  142.         dot.addEventListener('click', function() {
  143.             goToSlide(i);
  144.         });
  145.         dotsContainer.appendChild(dot);
  146.     }
  147.     
  148.     sliderControls.appendChild(dotsContainer);
  149.     document.querySelector('.image-slider').appendChild(sliderControls);
  150.     
  151.     // スライド表示関数
  152.     function showSlide(index) {
  153.         slides.forEach(slide => slide.classList.remove('active'));
  154.         document.querySelectorAll('.slider-dot').forEach(dot => dot.classList.remove('active'));
  155.         
  156.         slides[index].classList.add('active');
  157.         document.querySelectorAll('.slider-dot')[index].classList.add('active');
  158.     }
  159.     
  160.     // 指定スライドに移動
  161.     function goToSlide(index) {
  162.         currentSlide = index;
  163.         showSlide(currentSlide);
  164.     }
  165.     
  166.     // 次のスライドに移動
  167.     function nextSlide() {
  168.         currentSlide = (currentSlide + 1) % slides.length;
  169.         showSlide(currentSlide);
  170.     }
  171.     
  172.     // 自動スライド（3秒間隔）
  173.     setInterval(nextSlide, 5000);
  174. });
  175. </script>