{% block stylesheet %}
{% endblock %}
{% block javascript %}
<script>
{% set arrowLeft = asset('assets/icon/slick-arrow-left-white.svg') %}
{% set arrowRight = asset('assets/icon/slick-arrow-right-white.svg') %}
$(function() {
$('#slide_taste').slick({
slidesToShow: 4,
dots: false,
arrows: true,
autoplay: false,
speed: 300,
infinite: false,
appendArrows: $('#taste_arrows'),
prevArrow: '<button type="button" class="btn"><img src="{{ arrowLeft }}" alt=""></button>',
nextArrow: '<button type="button" class="btn btn-juliet"><img src="{{ arrowRight }}" alt=""></button>',
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 2
}
}]
});
});
</script>
{% endblock javascript %}
{% set Tastes = repository('Plugin\\TasteManager\\Entity\\Taste').getList() %}
{% if Tastes|length %}
<div class="ec-role">
<div class="ec-rankingRole ec-contentRole">
<div class="ec-secHeading">
<div>
<span class="ec-secHeading__en">{{ 'TASTE'|trans }}</span>
<img src="{{ asset('assets/icon/slash.svg') }}" alt="" class="ec-slash is-pc">
<span class="ec-secHeading__ja">{{ 'テイスト'|trans }}</span>
</div>
<div class="ranking-arrows content-arrows" id="taste_arrows"></div>
</div>
<div class="ec-rankingRole__List" id="slide_taste">
{% for Taste in Tastes %}
<div class="ec-contentRole__listItem">
<div class="img img_fit size_type1">
<a href="/taste/view/{{ Taste.id }}"><img src="{{ Taste.getImage }}"></a>
</div>
<a href="/taste/view/{{ Taste.id }}">
<p class="ec-contentRole__listItemTitle">{{ Taste.name }}</p>
</a>
</div>
{% endfor %}
</div>
</div>
<div class="read_more">
<a href="/taste" class="">テイスト一覧</a>
</div>
</div>
{% endif %}