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

Open in your IDE?
  1. {# TOPページスライダー #}
  2. {% block javascript %}
  3. <script>
  4.     $(document).ready(function() {
  5.         /*メインスライダー*/
  6.         const swiper_text = new Swiper(".swiper_text", {
  7.             loop: true,
  8.             slidesPerView: 1,
  9.             allowTouchMove: false,
  10.             effect: 'fade',
  11.         })
  12.         const swiper_main = new Swiper('.main_visual', {
  13.             speed: 900,
  14.             slidesPerView: 1,
  15.             autoplay: {
  16.                 delay: 6000
  17.             },
  18.             loop: true,
  19.             allowTouchMove: true,
  20.             parallax: true,
  21.             pagination: {
  22.                 el: ".slider_pagination",
  23.                 clickable: true,
  24.             },
  25.             thumbs: {
  26.                 swiper: swiper_text,
  27.             },
  28.             navigation: {
  29.                 prevEl: ".swiper-button-prev",
  30.                 nextEl: ".swiper-button-next",
  31.             },
  32.         });
  33.         // スライドの総数を取得
  34.         const totalSlides = swiper_main.loopedSlides ? swiper_main.slides.length - 2 : swiper_main.slides.length;
  35.         $('.total_slides').text(totalSlides);
  36.         // 現在のスライド番号
  37.         swiper_main.on('slideChange', function () {
  38.             const currentSlide = swiper_main.realIndex + 1;
  39.             $('.current_slide').text(currentSlide);
  40.         });
  42.         var slash = $(".swiper-pagination").text();
  43.         var result = slash.replace(" / ", "");
  44.         $("swiper-pagination").text(result);
  46.     });
  48. </script>
  49. {% endblock javascript %}
  52. <div class="ec-headerRole">
  53.     <div class="ec-headerRole__title">
  54.         <div class="ec-headerTitle">
  55.             <div class="ec-headerTitle__title">
  56.                 <h1 class="head_logo_title head_logo_title__home">
  57.                     <a href="{{ url('homepage') }}">
  58.                         <img src="{{ asset('assets/img/common/main_logo.svg') }}">
  59.                     </a>
  60.                 </h1>
  61.             </div>
  62.         </div>
  63.     </div>
  64. </div>
  66. <div class="main_slide_area">
  67.     <div class="main_slide_area__inner">
  68.         {#
  69.         <img class="main_slide_area__logo" src="{{ asset('assets/icon/logo_type02.svg') }}">
  70.         #}
  72.         <div class="swiper main_visual">
  73.             <div class="swiper-wrapper">
  74.                 <div class="item swiper-slide">
  75.                     <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  76.                         <a href="{{ url('homepage') }}products/list?category_id=36"><img src="{{ asset('assets/img/home/main01.jpg') }}"></a>
  77.                     </div>
  78.                 </div>
  79.                 <div class="item swiper-slide">
  80.                     <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  81.                         <a href="{{ url('homepage') }}products/list?category_id=17"><img src="{{ asset('assets/img/home/main02.jpg') }}"></a>
  82.                     </div>
  83.                 </div>
  84.                 <div class="item swiper-slide">
  85.                     <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  86.                         <a href="{{ url('homepage') }}products/list?category_id=35"><img src="{{ asset('assets/img/home/main03.jpg') }}"></a>
  87.                     </div>
  88.                 </div>
  89.                 <div class="item swiper-slide">
  90.                     <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  91.                         <a href="{{ url('homepage') }}products/list?category_id=10"><img src="{{ asset('assets/img/home/main04.jpg') }}"></a>
  92.                     </div>
  93.                 </div>
  94.                 <div class="item swiper-slide">
  95.                     <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  96.                         <a href="{{ url('homepage') }}products/list?category_id=39"><img src="{{ asset('assets/img/home/main05.jpg') }}"></a>
  97.                     </div>
  98.                 </div>
  99.             </div><!--/.wrapper-->
  100.         </div><!--/.main_visual-->
  102.         <div class="main_visual_text__wrap">
  103.             <div class="swiper_text main_visual_text">
  104.                 <div class="swiper-wrapper">
  105.                     <div class="item swiper-slide">
  106.                         <div class="slide_txt">
  107.                             <span>統一感のあるリビングに</span><br>
  108.                             <span>洗練されたデザインが特徴の</span><br>
  109.                             <span>Karimoku New Standardを</span>
  110.                         </div>
  111.                     </div>
  112.                     <div class="item swiper-slide">
  113.                         <div class="slide_txt">
  114.                             <span>食卓に彩りを</span><br>
  115.                             <span>IKUSが提案するダイニングテーブル</span>
  116.                         </div>
  117.                     </div>
  118.                     <div class="item swiper-slide">
  119.                         <div class="slide_txt">
  120.                             <span>100年後のアンティーク家具へ</span><br>
  121.                             <span>厳選されたウォールナットを使用した</span><br>
  122.                             <span>高品質のファニチャーブランド。</span>
  123.                         </div>
  124.                     </div>
  125.                     <div class="item swiper-slide">
  126.                         <div class="slide_txt">
  127.                             <span>リビングの顔</span><br>
  128.                             <span>家族が集まる団らんのリビングに</span><br>
  129.                             <span>IKUSがおすすめするソファ</span>
  131.                         </div>
  132.                     </div>
  133.                     <div class="item swiper-slide">
  134.                         <div class="slide_txt">
  135.                             <span>デンマークの家具デザイナー、</span><br>
  136.                             <span>ハンス・S・ヤコブセンとのコラボレーションブランド</span>
  137.                         </div>
  138.                     </div>
  140.                 </div><!--/.wrapper-->
  141.             </div><!--/.main_visual_text-->
  142.         </div><!--/.main_visual_text__wrap-->
  144.         <div class="sp_slide_bottom">
  145.             <div class="slide_info">
  146.                 <span class="current_slide">1</span> <span class="slide_info_slash"></span> <span class="total_slides"></span>
  147.             </div>
  148.             <div class="sp_slide_bottom__right">
  149.                 <div class="swiper-pagination slider_pagination"></div>
  150.                 {#
  151.                 <img class="sp_slide_bottom__logo" src="{{ asset('assets/icon/logo_type02.svg') }}">
  152.                 #}
  153.             </div><!--/.sp_slide_bottom__right-->
  154.         </div><!--/.sp_slide_bottom-->
  156.         <div class="swiper-button-next slider_button-next"></div>
  157.         <div class="swiper-button-prev slider_button-prev"></div>
  159.     </div><!--/.main_slide_area__inner-->
  160. </div><!--/.main_slide_area-->