{#
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.
#}
{% block javascript %}
<script>
$(function () {
$('#js-slider-3').slick({
arrows: true, // 前・次のボタンを表示する
speed: 500, // スライドさせるスピード(ミリ秒)
slidesToShow: 4, // 表示させるスライド数
centerMode: true, // slidesToShowが奇数のとき、現在のスライドを中央に表示する
variableWidth: true, // スライド幅の自動計算を無効化
});
});
</script>
{% endblock %}
{% block stylesheet %}
<style>
.pickedCard {
width: auto;
height: auto;
position: relative;
}
.img-wrap {
width: 300px;
height: 400px;
}
.img {
width: auto;
max-width: 100%;
height: auto;
max-height: 400px;
}
.bottom-right {
position: absolute;
bottom: 10px;
right: 25px;
color: white;
font-weight: bold;
}
{# ihone #}
@media screen and (max-width: 415px ) {
.component-title {
font-size: 37px;
}
}
</style>
{% endblock %}
<div class="ec-role">
<div class="ec-secHeading">
<div class="component-title">注目のアーティスト</div>
</div>
<ul class="slider-2" id="js-slider-3">
<li>
<div class="ec-newItemRole__listItem pickedCard">
<a href="/artists">
<div class="img-wrap"><img class="img" src="https://acrylicrab.com/wp-content/uploads/2017/03/manet_self-portrait.jpg"></div>
</a>
</div>
</li>
<li>
<div class="ec-newItemRole__listItem pickedCard">
<a href="/artists">
<div class="img-wrap"><img class="img" src="https://acrylicrab.com/wp-content/uploads/2017/03/6MonetSPB-e1489564992931.jpg"></div>
</a>
</div>
</li>
<li>
<div class="ec-newItemRole__listItem pickedCard">
<a href="/artists">
<div class="img-wrap"><img class="img" src="https://spice.eplus.jp/images/CJNrOT3GWGfiteiLgImNzLhPGIRXCrZM3N12PqTyKrEekzWXTbDvO8iUMkmrZSyf"></div>
</a>
</div>
</li>
<li>
<div class="ec-newItemRole__listItem pickedCard">
<a href="/artists">
<div class="img-wrap"><img class="img" src="https://livedoor.blogimg.jp/insidercharmant/imgs/0/4/04dfd3b4.jpg"></div>
</a>
</div>
</li>
<li>
<div class="ec-newItemRole__listItem pickedCard">
<a href="/artists">
<div class="img-wrap"><img class="img" src="https://acrylicrab.com/wp-content/uploads/2017/03/Turner_selfportrait-788x1024.jpg"></div>
</a>
</div>
</li>
<li>
<div class="ec-newItemRole__listItem pickedCard">
<a href="/artists">
<img src="http://liveatloft.cocolog-nifty.com/photos/uncategorized/2015/01/22/photo_7.jpg">
</a>
</div>
</li>
{% for artist in artists %}
<li>
<div class="ec-newItemRole__listItem pickedCard">
<a href="/artists/detail/{{artist.id}}">
<div class="img-wrap"><img class="img" src="{{ asset(artist.image |no_image_product, 'user_data') }}" alt=artist.name><h4 class="bottom-right">{{artist.name}}</h4></div>
</a>
</div>
</li>
{% endfor %}
</ul>
</div>