app/template/default/index.twig line 1

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% set body_class = 'front_page' %}

{% block stylesheet %}
{% endblock %}

{% block javascript %}
    <script>
  var time = 8;
  var $bar,
      $slick,
      isPause,
      tick,
      percentTime;

    $slick = $('#js-fv-slider');
    $slick.slick({
        initialSlide: 0,
        variableWidth: true,
        centerMode:true,
        speed:1000,
        //autoplay: true,
        autoplaySpeed: time * 1000,
        arrows: false,
        dots: true,
        draggable: false,
        pauseOnDotsHover: true,
    });

  $slick.on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
    },
    beforeChange: function() {
      $bar = $('#js-fv-slider .slick-slide.slick-active .rf-fv-slider-progress span');
      resetProgressbar();
    },
    afterChange: function() {
      $bar = $('#js-fv-slider .slick-slide.slick-active .rf-fv-slider-progress span');
      startProgressbar();
    }
  })

  function startProgressbar() {
    percentTime = 0;
    isPause = false;
    tick = setInterval(interval, 10);
  }

  function interval() {   // プログレスバーの間隔の指定
    if(isPause === false) {
      percentTime += 1 / (time+0.1);
      $bar.css({
        width: percentTime+"%"

      });
      if(percentTime >= 100) {
          $slick.slick('slickNext');
        }
    }
  }

  function resetProgressbar() { // ドットのアクティブな状態を設定し直す指定
    $bar.css({
     width: 0+'%'
    });
    clearTimeout(tick);
  }

  $bar = $('#js-fv-slider .slick-slide.slick-active .rf-fv-slider-progress span');
  startProgressbar();
    </script>
{% endblock javascript %}

{% block main %}
            <section class="rf-fv-section">
                <div id="js-fv-slider" class="rf-fv">
                    <a href="{{ url('firsttime') }}" class="rf-fv-slider-item">
                        <picture>
                          <source media="(min-width:768px)" srcset="{{ asset('assets/img/slider-01.png', 'user_data') }}" sizes="100vw">
                          <source media="(max-width:767px)" srcset="{{ asset('assets/img/slider-01-sp.png', 'user_data') }} 1x,{{ asset('assets/img/slider-01-sp@2x.png', 'user_data') }} 2x," sizes="100vw">
                          <img src="{{ asset('assets/img/slider-01.png', 'user_data') }}">
                        </picture>
                        <div class="rf-fv-slider-progress"><span></span></div>
                    </a>
                    <a href="{{ url('assistant') }}" class="rf-fv-slider-item">
                        <picture>
                          <source media="(min-width:768px)" srcset="{{ asset('assets/img/slider-02.png', 'user_data') }} 1x,{{ asset('assets/img/slider-02@2x.png', 'user_data') }} 2x," sizes="100vw">
                          <source media="(max-width:767px)" srcset="{{ asset('assets/img/slider-02-sp.png', 'user_data') }} 1x,{{ asset('assets/img/slider-02-sp@2x.png', 'user_data') }} 2x," sizes="100vw">
                          <img src="{{ asset('assets/img/slider-02.png', 'user_data') }}">
                        </picture>
                        <div class="rf-fv-slider-progress"><span></span></div>
                    </a>
                    <a href="{{ url('reform') }}" class="rf-fv-slider-item">
                        <picture>
                          <source media="(min-width:768px)" srcset="{{ asset('assets/img/slider-03.png', 'user_data') }} 1x,{{ asset('assets/img/slider-03@2x.png', 'user_data') }} 2x," sizes="100vw">
                          <source media="(max-width:767px)" srcset="{{ asset('assets/img/slider-03-sp.png', 'user_data') }} 1x,{{ asset('assets/img/slider-03-sp@2x.png', 'user_data') }} 2x," sizes="100vw">
                          <img src="{{ asset('assets/img/slider-03.png', 'user_data') }}">
                        </picture>
                        <div class="rf-fv-slider-progress"><span></span></div>
                    </a>
                    <a href="{{ url('firsttime') }}" class="rf-fv-slider-item">
                        <picture>
                          <source media="(min-width:768px)" srcset="{{ asset('assets/img/slider-04.png', 'user_data') }} 1x,{{ asset('assets/img/slider-04@2x.png', 'user_data') }} 2x," sizes="100vw">
                          <source media="(max-width:767px)" srcset="{{ asset('assets/img/slider-04-sp.png', 'user_data') }} 1x,{{ asset('assets/img/slider-04-sp@2x.png', 'user_data') }} 2x," sizes="100vw">
                          <img src="{{ asset('assets/img/slider-04.png', 'user_data') }}">
                        </picture>
                        <div class="rf-fv-slider-progress"><span></span></div>
                    </a>
                </div>
            </section>
{% endblock %}