{#
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' %}
{% set NewsList = repository('Eccube\\Entity\\News').getList() %}
{% block stylesheet %}
<style>
.slick-slider{
height:100%;
width: 100%;
overflow: hidden;
}
.main_visual.slick-slider .slick-list,
.main_visual.slick-slider .slick-track,
.main_visual.slick-slider .slick-slide,
.main_visual.slick-slider .slick-track > .slick-slide > div,
.main_visual.slick-slider .slick-slide img{
height:100%;
}
.main_visual.slick-slider .slick-slide{
overflow:hidden;
}
.main_visual.slick-slider .slick-cloned img,
.main_visual.slick-slider .slick-slide img{
opacity:0.8;
scale: 1.7;
translate: -5% 0;
margin-left:auto;
transition: scale 6.5s cubic-bezier(0.1, 1, 0.2, 1) , translate 6.5s;
}
.main_visual.slick-slider:before {
background: rgba(60, 20, 0, .2);
content: '';
display: block;
height: 100%;
left: 0;
opacity: .6;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
.main_visual.slick-slider:after {
background: linear-gradient(217deg, rgba(110, 72, 51, .6), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(241, 234, 230, .6), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(249, 247, 245, .6), rgba(0, 0, 255, 0) 70.71%);
content: '';
display: block;
height: 100%;
left: 0;
opacity: .6;
position: absolute;
top: 0;
width: 100%;
z-index: 5;
}
.slick-slide{
position:relative;
}
/* ¥Æ¥¥¹¥È¤Î¥Õ¥§©`¥É¥¤¥ó¤È¥¹¥é¥¤¥É¥¤¥ó */
.main {
opacity: 0;
transform: translateX(10vw); /* ÓÒ¤«¤é¥¹¥é¥¤¥É¥¤¥ó */
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.sub {
opacity: 0;
transform: translateX(10vw); /* ÓÒ¤«¤é¥¹¥é¥¤¥É¥¤¥ó */
transition: opacity 0.5s ease-in-out 0.3s, transform 0.5s ease-in-out 0.2s; /* 0.2ÃëßW¤ì */
}
.fade-in .main {
opacity: 1;
transform: translateX(0); /* Ôª¤ÎλÖäˑø¤ë */
}
.fade-in .sub {
opacity: 1;
transform: translateX(0); /* Ôª¤ÎλÖäˑø¤ë */
}
/* ±³¾°»Ïñ¤ÎÔO¶¨ */
.slick-slide {
overflow:hidden;
}
@-webkit-keyframes fadezoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.25);
}
}
@keyframes fadezoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.25);
}
}
.slick-animation {
scale: 1.1 !important;
translate: 5% 0 !important;
/* animation: fadezoom 20s linear 0s normal both; */
}
</style>
{% endblock %}
{% block javascript %}
<script>
$(function() {
// ¥á¥¤¥ó¥¹¥é¥¤¥À©`¤Î³õÆÚ»¯•r¤Î¥¤¥Ù¥ó¥È
$('.main_visual').on('init', function () {
// ×î³õ¤Î¥¹¥é¥¤¥É¤Ë¥¢¥Ë¥á©`¥·¥ç¥ó¤òßmÓÃ
$('.main_visual .slick-slide[data-slick-index="0"] img').addClass('slick-animation');
});
// ¥á¥¤¥ó¥¹¥é¥¤¥À©`¤ÎÔO¶¨
$('.main_visual').slick({
autoplay: true, // ×Ô„ÓÔÙÉú
infinite: true, // ŸoÏÞ¥ë©`¥×
slidesToShow: 1, // 1¤Ä¤Î¥¹¥é¥¤¥É¤ò±íʾ
slidesToScroll: 1, // ¥¹¥é¥¤¥É¤ò1¤Ä¤º¤Ä¥¹¥¯¥í©`¥ë
arrows: false, // ʸӡ¤ò·Ç±íʾ
speed: 2000, // ¥Õ¥§©`¥É¥¢¥Ë¥á©`¥·¥ç¥ó¤ÎËÙ¶È
autoplaySpeed: 5000, // ¥¹¥é¥¤¥É¤¬ÇФêÌæ¤ï¤ëég¸ô
pauseOnFocus: false, // ¥Õ¥©©`¥«¥¹•r¤Ë¥¹¥é¥¤¥É¤òÒ»•rÍ£Ö¹¤·¤Ê¤¤
pauseOnHover: false, // ¥Û¥Ð©`•r¤Ë¥¹¥é¥¤¥É¤òÒ»•rÍ£Ö¹¤·¤Ê¤¤
asNavFor: '.text_slider' // .text_slider ¤ÈͬÆÚ
})
.on({
beforeChange: function(event, slick, currentSlide, nextSlide) {
// ¤¹¤Ù¤Æ¤Î¥¹¥é¥¤¥É¤Î¥¢¥Ë¥á©`¥·¥ç¥ó¤ò¥ê¥»¥Ã¥È
$(".main_visual .slick-slide img").removeClass("slick-animation");
// ´Î¤Î¥¹¥é¥¤¥É¤Ë¥¢¥Ë¥á©`¥·¥ç¥ó¤òßmÓÃ
$(".main_visual .slick-slide[data-slick-index='" + nextSlide + "'] img").addClass("slick-animation");
// ´Î¤Î¥¹¥é¥¤¥É¤Ë¥¢¥Ë¥á©`¥·¥ç¥ó¤òßmÓÃ
$(".main_visual .slick-cloned img").addClass("slick-animation");
},
afterChange: function(event, slick, currentSlide) {
// Ç°¤Î¥¹¥é¥¤¥É¤Î¥¤¥ó¥Ç¥Ã¥¯¥¹¤òÓ‹Ëã
var prevSlide = (currentSlide === 0) ? slick.slideCount - 1 : currentSlide - 1;
// Ç°¤Î¥¹¥é¥¤¥É¤Î¥¢¥Ë¥á©`¥·¥ç¥ó¤ò¥ê¥»¥Ã¥È
$(".main_visual .slick-slide[data-slick-index='" + prevSlide + "'] img").removeClass("slick-animation");
$(".main_visual .slick-cloned img").removeClass("slick-animation");
}
});
// ¥Æ¥¥¹¥È¥¹¥é¥¤¥À©`¤Î³õÆÚ»¯•r¤Î¥¤¥Ù¥ó¥È
$('.text_slider').on('init', function () {
// ×î³õ¤Î¥¹¥é¥¤¥É¤Ë 'fade-in' ¥¯¥é¥¹¤òßmÓÃ
$('.slick-slide[data-slick-index="0"]').addClass('fade-in');
});
// ¥Æ¥¥¹¥È¥¹¥é¥¤¥À©`¤ÎÔO¶¨£¨¥á¥¤¥ó¥¹¥é¥¤¥À©`¤ÈͬÆÚ£©
$('.text_slider').slick({
autoplay: true, // ×Ô„ÓÔÙÉú
infinite: true, // ŸoÏÞ¥ë©`¥×
slidesToShow: 1, // 1¤Ä¤Î¥¹¥é¥¤¥É¤ò±íʾ
slidesToScroll: 1, // ¥¹¥é¥¤¥É¤ò1¤Ä¤º¤Ä¥¹¥¯¥í©`¥ë
fade: true,
speed: 1000,
autoplaySpeed: 5000,
arrows: false,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
asNavFor: '.main_visual' // .main_visual ¤ÈͬÆÚ
})
.on({
beforeChange: function(event, slick, currentSlide, nextSlide) {
// ´Î¤Î¥¹¥é¥¤¥É¤Ë 'fade-in' ¥¯¥é¥¹¤ò×·¼Ó
$(".text_slider .slick-slide[data-slick-index='" + nextSlide + "']").addClass("fade-in");
},
afterChange: function(event, slick, currentSlide) {
// ¬FÔڤΥ¹¥é¥¤¥ÉÒÔÍâ¤Î¤¹¤Ù¤Æ¤Î¥¹¥é¥¤¥É¤«¤é 'fade-in' ¥¯¥é¥¹¤òÏ÷³ý
$(".text_slider .slick-slide").not("[data-slick-index='" + currentSlide + "']").not(".slick-cloned").removeClass("fade-in");
// ¬FÔڤΥ¹¥é¥¤¥É¤Ë¥¯¥é¥¹¤ò´_Œg¤Ë×·¼Ó
$(".text_slider .slick-slide[data-slick-index='" + currentSlide + "']").addClass("fade-in");
}
});
});
$(function() {
$('.topic_slider').slick({
vertical: true,
autoplay: true,
autoplaySpeed: 3800,
speed: 800,
arrows: true,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false
});
$('.ec-sliderRole__news').each(function() {
var listLength = $(this).find('.ec-sliderRole__newsItem').length;
if (listLength > 5) {
$(this).find('.ec-sliderRole__newsItem:gt(4)').each(function() {
$(this).hide();
});
$(this).append('<a id="news_readmore" class="ec-inlineBtn--top">{{ 'more'|trans }}</a>');
var dispNum = 5;
$(this).find('#news_readmore').click(function() {
dispNum += 5;
$(this).parent().find('.ec-sliderRole__newsItem:lt(' + dispNum + ')').show();
if (dispNum >= listLength) {
$(this).hide();
}
})
}
});
});
</script>
{% endblock javascript %}
{% block main %}
<div class="ec-sliderRole">
<div class="ec-sliderRole__wrap">
<div class="mv__wrap">
<div class="main_visual">
<div class="item slick-slide">
<img src="{{ asset('assets/img/top/01.jpg') }}" class="outset">
</div>
<div class="item slick-slide">
<img src="{{ asset('assets/img/top/02.jpg') }}" class="outset">
</div>
<div class="item slick-slide">
<img src="{{ asset('assets/img/top/03.jpg') }}" class="outset">
</div>
<div class="item slick-slide">
<img src="{{ asset('assets/img/top/04.jpg') }}" class="outset">
</div>
</div>
<div class="text_slider">
<div class="ec-sliderRole__title">
<div class="main">Lillie and</div>
<div class="sub">Garcello</div>
</div>
<div class="ec-sliderRole__title">
<div class="main">ORIGINAL</div>
<div class="sub">GOODS</div>
</div>
<div class="ec-sliderRole__title">
<div class="main">SELECT</div>
<div class="sub">SHOP</div>
</div>
<div class="ec-sliderRole__title">
<div class="main">RECOMMENDED</div>
<div class="sub">ITEM</div>
</div>
</div>
</div>
<div class="ec-sliderRole__news topic_slider">
{% for News in NewsList %}
<a href={{ url('news_detail', {'id': News.id}) }} class="ec-sliderRole__newsItem" target="_blank">
<div class="ec-sliderRole__newsHeading">
<div class="ec-sliderRole__newsDate">
{{ News.publish_date|date_day }}
</div>
<div class="ec-sliderRole__newsColumn">
<div class="ec-sliderRole__newsTitle">
{{ News.title }}
</div>
{# {% if News.description or News.url %}
<div class="ec-sliderRole__newsClose">
<a class="ec-sliderRole__newsCloseBtn">
<i class="fas fa-angle-down"></i>
</a>
</div>
{% endif %} #}
</div>
</div>
{# <div class="ec-sliderRole__newsDescription">
{{ News.description|raw|nl2br }}
{% if News.url %}
<br>
<a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}>{{ 'Ô”¤·¤¯¤Ï¤³¤Á¤é'|trans }}</a>
{% endif %}
</div> #}
</a>
{% endfor %}
</div>
</div>
</div>
{% endblock %}