app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'front_page' %}
  15. {% block stylesheet %}
  16.     <style>
  17.         .slick-slider {
  18.             margin-bottom: 30px;
  19.         }
  21.         .slick-dots {
  22.             position: absolute;
  23.             bottom: -45px;
  24.             display: block;
  25.             width: 100%;
  26.             padding: 0;
  27.             list-style: none;
  28.             text-align: center;
  29.         }
  31.         .slick-dots li {
  32.             position: relative;
  33.             display: inline-block;
  34.             width: 20px;
  35.             height: 20px;
  36.             margin: 0 5px;
  37.             padding: 0;
  39.             cursor: pointer;
  40.         }
  42.         .slick-dots li button {
  43.             font-size: 0;
  44.             line-height: 0;
  45.             display: block;
  46.             width: 20px;
  47.             height: 20px;
  48.             padding: 5px;
  49.             cursor: pointer;
  50.             color: transparent;
  51.             border: 0;
  52.             outline: none;
  53.             background: transparent;
  54.         }
  56.         .slick-dots li button:hover,
  57.         .slick-dots li button:focus {
  58.             outline: none;
  59.         }
  61.         .slick-dots li button:hover:before,
  62.         .slick-dots li button:focus:before {
  63.             opacity: 1;
  64.         }
  66.         .slick-dots li button:before {
  67.             content: " ";
  68.             line-height: 20px;
  69.             position: absolute;
  70.             top: 0;
  71.             left: 0;
  72.             width: 12px;
  73.             height: 12px;
  74.             text-align: center;
  75.             opacity: .25;
  76.             background-color: black;
  77.             border-radius: 50%;
  79.         }
  81.         .slick-dots li.slick-active button:before {
  82.             opacity: .75;
  83.             background-color: black;
  84.         }
  86.         .slick-dots li button.thumbnail img {
  87.             width: 0;
  88.             height: 0;
  89.         }
  90.         .slick-slide img {
  91.             width: 100%;
  92.         }
  93.     </style>
  94. {% endblock %}
  96. {% block javascript %}
  97.     <script>
  98.         // 初回訪問のみで実行するかどうか
  99.         const doAct = false
  100.         const changeTime = 5000
  101.         const body = document.getElementsByTagName("body")[0]
  102.         const sliderItems = document.querySelectorAll(".sliderItem")
  103.         let autoSlide;
  104.         // アニメーションを実行する関数
  105.         // スライダーNavの要素を追加する
  106.         // id属性で要素を取得
  107.         const sliderNavBlock = document.getElementById('sliderNavBlock');
  108.         for (let i=0;i<sliderItems.length; i++) {
  109.             // 新しいHTML要素を作成
  110.             const new_element = document.createElement('span');
  111.             new_element.classList.add('sliderNav')
  112.             // 指定した要素の中の末尾に挿入
  113.             sliderNavBlock.appendChild(new_element);
  114.         }
  115.         // activeのindex情報は保存しておこう
  116.         let activeIndex = 0
  117.         // スライダーのボタンを押したときの動作
  118.         const sliderNavs = document.querySelectorAll(".sliderNav")
  119.         sliderNavs.forEach((nav, index) => {
  120.                 nav.addEventListener("click", function (e) {
  121.                 resetTime()
  122.                 i = index + 1
  123.                 changeSlider(index)
  124.                 //ボタン表示クリック後動いを止める場合
  125.                 clearTimeout(timeoutID);
  126.             })
  127.         })
  129.         // ボタン押された時の
  130.         const changeSlider = (index) => {
  131.             // 一回今のactiveIndex以外はactive外す。現在のはz-index=1に
  132.             sliderItems.forEach((item, index) => (index === activeIndex ? item.style.zIndex = 1 : item.classList.remove("active")))
  133.             // 対象のスライダーにactiveをつけてz-indexを2にする
  134.             // アニメーションを再実行するため.1s待ってからクラスを付与
  135.             setTimeout(function () {
  136.                 sliderItems[index].classList.add('active')
  137.                 sliderItems[index].style.zIndex = 2
  138.             }, 100)
  140.             // スライダーのボタンからactiveクラスを一回全部外して対象のボタンにactiveをつける
  141.             sliderNavs.forEach((nav) => {nav.classList.remove("active")})
  142.                 sliderNavs[index].classList.add("active")
  143.                 activeIndex = index
  144.         }
  145.         // 読み込み後の自動スライダーを定時実行するための関数
  146.         // 開始時間
  147.         let startTime = Date.now();
  148.         // タイムアウトID
  149.         let timeoutID;
  150.         let currentTime;
  151.         let i = 1
  152.         // 通常スライダー関数
  153.         const startStaticSlider = () => {
  154.             currentTime = new Date(Date.now() - startTime);
  155.             const s = currentTime.getSeconds();
  156.             timeoutID = setTimeout(startStaticSlider, 100);
  158.             // 画像の枚数に達したら終了
  159.             if (i === sliderItems.length) {
  160.                 setTimeout(completeAnimation, 4000);
  161.             }
  163.             // 4sたったら次のスライダーに
  164.             if (s === changeTime/1000) {
  165.                 staticNextSlider()
  166.                 resetTime()
  167.                 i++
  168.             }
  169.         }
  171.         const resetTime = () => {
  172.             startTime = Date.now()
  173.         }
  175.         // 読み込み後の自動スライダー
  176.         const staticNextSlider = () => {
  177.             const navCount = sliderNavs.length
  178.             let nextIndex = (activeIndex + 1 >= navCount ? 0 : activeIndex + 1)
  179.             // console.log(nextIndex)
  180.             changeSlider(nextIndex)
  181.             activeIndex = nextIndex
  182.         }
  184.         const sliderStop = () => {
  185.             clearTimeout(timeoutID);
  186.         }
  187.         const navBtnShow = () => {
  188.         sliderNavBlock.classList.add('show')
  189.         }
  190.         // fixedを外すためのアニメーション
  191.         const completeAnimation = () => {
  192.             document.getElementById("sliderFV").classList.add("complete")
  193.             sliderNavBlock.classList.add('show')
  195.         }
  196.         const completeSkipAnimation = () => {
  197.             document.getElementById("sliderFV").classList.add("complete")
  198.             document.getElementById("sliderFV").classList.remove("skip")
  199.             //ボタンを表示させる場合
  200.             sliderNavBlock.classList.add('show')
  201.         }
  202.         // 読み込んだら、doActの値によって実行を切り替え
  203.         window.onload = function () {
  204.             completeAnimation()
  205.             sliderItems[0].classList.add("active")
  206.             changeSlider(0)
  207.             startTime = Date.now();
  208.             startStaticSlider()
  209.         }
  210.     </script>
  211. {% endblock javascript %}
  213. {% block main %}
  214. <section class="sliderFV" id="sliderFV">
  215.     <div class="sliderFV__title">
  216.         <p class="sliderFV__title__sub">いい環境はいい職場から</p>
  217.         <h1 class="sliderFV__title__main">“その先へ”JUKEBOX</h1>
  218.     </div>
  219.   <div class="scroll-text">
  220.     <p class="scroll-text__inner">SCROLL</p>
  221.     <p class="scroll-text__line"></p>
  222.   </div>
  223.   <ul class="sliderList">
  224.     <li class="sliderItem active" style="z-index: 2;">
  225.         <picture class="fvImage">
  226.           <source srcset="{{ asset('assets/img/top/slider/kv01_sp.jpg', "user_data") }}" media="(max-width: 768px)">
  227.           <img src="{{ asset('assets/img/top/slider/kv01.jpg', "user_data") }}" alt="">
  228.         </picture>
  229.     </li>
  230.     <li class="sliderItem">
  231.         <picture class="fvImage">
  232.           <source srcset="{{ asset('assets/img/top/slider/kv02_sp.jpg', "user_data") }}" media="(max-width: 768px)">
  233.           <img src="{{ asset('assets/img/top/slider/kv02.jpg', "user_data") }}" alt="">
  234.         </picture>
  235.     </li>
  236.     <li class="sliderItem">
  237.         <picture class="fvImage">
  238.           <source srcset="{{ asset('assets/img/top/slider/kv03_sp.jpg', "user_data") }}" media="(max-width: 768px)">
  239.           <img src="{{ asset('assets/img/top/slider/kv03.jpg', "user_data") }}" alt="">
  240.         </picture>
  241.     </li>
  242.     <li class="sliderItem">
  243.         <picture class="fvImage">
  244.           <source srcset="{{ asset('assets/img/top/slider/kv04_sp.jpg', "user_data") }}" media="(max-width: 768px)">
  245.           <img src="{{ asset('assets/img/top/slider/kv04.jpg', "user_data") }}" alt="">
  246.         </picture>
  247.     </li>
  248.   </ul>
  249.   <div class="sliderNavBlock" id="sliderNavBlock"></div>
  250. </section>
  251. {% endblock %}