app/template/akracing/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 %}
    <style>
        .slick-slider {
            margin-bottom: 30px;
        }

        .slick-dots {
            position: absolute;
            bottom: -45px;
            display: block;
            width: 100%;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .slick-dots li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;

            cursor: pointer;
        }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

        .slick-dots li button:hover,
        .slick-dots li button:focus {
            outline: none;
        }

        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            opacity: 1;
        }

        .slick-dots li button:before {
            content: " ";
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            text-align: center;
            opacity: .25;
            background-color: black;
            border-radius: 50%;

        }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            background-color: black;
        }

        .slick-dots li button.thumbnail img {
            width: 0;
            height: 0;
        }
    </style>
{% endblock %}

{% block javascript %}
    <script>
        $(function() {
            $('.main_visual').slick({
                dots: true,
                arrows: false,
                autoplay: true,
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                speed: 300,
                asNavFor: '.thumb-item-nav'
            });
            $('.thumb-item-nav').slick({
                accessibility: true,
                arrows: false,
                autoplay: true,
                speed: 300,
                infinite: true,
                slidesToShow: 4,
                slidesToScroll: 1,
                asNavFor: '.thumb-item',
                focusOnSelect: false,
                variableWidth: true
            });
        });
    </script>
{% endblock javascript %}

{% block main %}
    <div id="topFast">
            <div id="keyimage">
                <div class="ec-sliderRole">
                    <div class="main_visual">
                        <div class="item slick-slide"><img src="{{ asset('assets/img/top/slider_2025_05.jpg') }}" alt=""></div>
                        
                        <div class="item slick-slide"><img src="{{ asset('assets/img/top/slider_2025_03.jpg') }}" alt=""></div>
                        <div class="item slick-slide"><img src="{{ asset('assets/img/top/slider_2025_04.jpg') }}" alt=""></div>
                        <div class="item slick-slide"><img src="{{ asset('assets/img/top/slider1.png') }}" alt=""></div>
                    </div>
                </div>
            </div><!-- #keyimage -->
            <div class="top-info">
                <div class="top-info_inner">
                    <div class="spnone">
                        <h2>気がつけば、<br>いつもここ</h2>
                        <p>AKRacing & Tsubasa Honda</p>
                        <div class="slider thumb-item-nav">
                            <div class="item slick-slide"></div>
                            <div class="item slick-slide"></div>
                            <div class="item slick-slide"></div>
                            <div class="item slick-slide"></div>
                            <div class="item slick-slide"></div>
                        </div>
                    </div>
                    <div class="pcnone">
                        <h2>
                            <img src="{{ asset('assets/img/top/top_title.png') }}" alt="気がつけば、いつもここ">
                        </h2>
                    </div>
                </div>
            </div><!-- top-info -->
    </div><!-- #topFast -->

    <div id="top-side">
            <ul class="ak-sns-icon">
                <li><a href="https://twitter.com/AKRacingJapan" target="_blank"><i class="fab fa-twitter"></i></a></li>
                <li><a href="https://www.youtube.com/channel/UC3IfqphfSpYgHY-x_PA8oqw" target="_blank"><i class="fab fa-youtube"></i></a></li>
                <li><img src="{{ asset('assets/img/top/Social.png') }}" alt=""></li>
            </ul>
            <p class="scroll"><img src="{{ asset('assets/img/top/scroll.png') }}" alt=""></p>
    </div>
{% endblock %}