{% block stylesheet %}
<style type="text/css">
#rankingProudcts {
width: 100%;
}
#rankingProudcts div {
padding: 10px 5px 0 5px;
text-align: center;
text-decoration: none;
position: relative;
}
#rankingProudcts div a {
color: #333;
}
#rankingProudcts div .number {
top: -20px;
left: 10px;
width: auto;
height: 0;
text-shadow:1px 1px 1px rgba(255,255,255,1);
z-index: 1;
position: absolute;
}
@media screen and (min-width: 960px) {
#rankingProudcts div .number {
font-size: 600%;
}
}
@media screen and (max-width: 959px) {
#rankingProudcts div .number {
font-size: 300%;
}
}
#rankingProudcts img {
width: calc(100% - 10px);
}
#rankingProudcts .name {
margin: 6px 0 0 6px;
}
#rankingProudcts .price {
font-weight: 900;
margin: 6px 0 0 6px;
}
#rankingProudcts .colorDot {
list-style: none;
display: flex;
margin: 0;
padding: 0;
margin: 6px 0 0 6px;
}
#rankingProudcts .colorDot li {
margin-right: 12px;
width: 12px;
height: 12px;
border-radius: 50%;
border: solid 1px #000;
}
{# arrow #}
#rankingProudcts .slick-arrow {
position: absolute;
top: 50%;
/* transform: translateY(-50%); */
width: 50px;
height: 50px;
/* background: #606060; */
background: rgba(0, 0, 0, .7);
z-index: 1;
opacity: 0.7;
cursor: pointer;
}
#rankingProudcts .slick-arrow::before {
position: absolute;
content: "";
top: 50%;
width: 26px;
height: 26px;
border: solid 1px #FFF;
top: 11px;
border-width: 1px 0px 0px 1px;
}
#rankingProudcts .slick-prev {
left: 25px;
}
#rankingProudcts .slick-next {
right: 25px;
}
#rankingProudcts .slick-prev::before {
transform: rotate(-45deg);
left: 21px;
}
#rankingProudcts .slick-next::before {
transform: rotate(130deg);
right: 21px;
}
@media only screen and (max-width: 767px) {
#rankingProudcts .slick-track {
left: 10%;
}
#rankingProudcts .slick-arrow {
width: 30px;
height: 30px;
}
#rankingProudcts .slick-arrow::before {
top: 7px;
width: 16px;
height: 16px;
}
#rankingProudcts .slick-prev {
left: 0;
}
#rankingProudcts .slick-next {
right: 0;
}
#rankingProudcts .slick-prev::before {
left: 12px;
}
#rankingProudcts .slick-next::before {
right: 12px;
}
}
</style>
{% endblock %}
{% block javascript %}
<script type="text/javascript">
$(function(){
$('#rankingProudcts').slick({
infinite: true,
slidesToShow: 4.5,
slidesToScroll: 1,
initialSlide: 2,
centerMode: true,
adaptiveHeight:true,
autoplay: true,
prevArrow: '<div class="slick-prev"></div>',
nextArrow: '<div class="slick-next"></div>',
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 1.5,
}
}],
});
$('#rankingProudcts').slick("slickSetOption", "slidesToScroll", 1);
});
</script>
{% endblock javascript %}
{% block main %}
<section class="fadeinu block_box">
<div class="ec-role">
<div class="ec-secHeading">
<span class="ec-secHeading__en">{{ 'RANKING'|trans }}</span><br>
<span class="ec-secHeading__ja"><h2>{{ 'ランキング'|trans }}</h2></span>
</div>
<section id="rankingProudcts">
<div>
<span class="number">1</span>
<a href="{{ url('product_detail', {'id': '2'}) }}">
<img src="{{ asset('0716124844_6877211c54c45.jpg', 'save_image') }}" />
<p class="name">【冷蔵】本さしみゆば</p>
{#
<span class="price">￥734～￥22,032(税込)</span>
#}
</a>
</div>
<div>
<span class="number">2</span>
<a href="{{ url('product_detail', {'id': '3'}) }}">
<img src="{{ asset('0724164400_6881e4401b2fa.jpg', 'save_image') }}" />
<p class="name">【冷蔵】比叡とろゆば</p>
{#
<span class="price">￥734～￥22,032(税込)</span>
#}
</a>
</div>
<div>
<span class="number">3</span>
<a href="{{ url('product_detail', {'id': '10'}) }}">
<img src="{{ asset('0730143032_6889adf8a56a7.jpg', 'save_image') }}" />
<p class="name">【冷凍】きざみ生ゆば（カットタイプ）</p>
{#
<span class="price">￥1,836～￥44,064(税込)</span>
#}
</a>
</div>
<div>
<span class="number">4</span>
<a href="{{ url('product_detail', {'id': '16'}) }}">
<img src="{{ asset('0730161048_6889c5787886e.jpg', 'save_image') }}" />
<p class="name">きざみゆば 50ｇ</p>
{#
<span class="price">￥923～￥46,170(税込)</span>
#}
</a>
</div>
<div>
<span class="number">5</span>
<a href="{{ url('product_detail', {'id': '4'}) }}">
<img src="{{ asset('0724155142_6881d7feacd9b.jpg', 'save_image') }}" />
<p class="name">【冷凍】引上ゆばシート</p>
{#
<span class="price">￥1,523～￥91,432(税込)</span>
#}
</a>
</div>
<div>
<span class="number">6</span>
<a href="{{ url('product_detail', {'id': '13'}) }}">
<img src="{{ asset('0730152705_6889bb3914c71.jpg', 'save_image') }}" />
<p class="name">【冷凍】お徳用生ゆば（切落し）平タイプ</p>
{#
<span class="price">￥1,080～￥50,569(税込)</span>
#}
</a>
</div>
<div>
<span class="number">7</span>
<a href="{{ url('product_detail', {'id': '12'}) }}">
<img src="{{ asset('0730140907_6889a8f38cacb.jpg', 'save_image') }}" />
<p class="name">【冷蔵】半乾燥ゆば 大判ゆばA（8枚入）</p>
{#
<span class="price">￥2,824～￥56,484(税込)</span>
#}
</a>
</div>
<div>
<span class="number">8</span>
<a href="{{ url('product_detail', {'id': '19'}) }}">
<img src="{{ asset('0730172351_6889d6975ea9a.jpg', 'save_image') }}" />
<p class="name">トレー入 絵文字ゆば「寿」（40個入）</p>
{#
<span class="price">￥1,342～￥53,697(税込)</span>
#}
</a>
</div>
<div>
<span class="number">9</span>
<a href="{{ url('product_detail', {'id': '14'}) }}">
<img src="{{ asset('0730132116_68899dbc6fe80.jpg', 'save_image') }}" />
<p class="name">お徳用乾燥ゆば（割れゆば）500ｇ</p>
{#
<span class="price">￥5,543～￥55,4364(税込)</span>
#}
</a>
</div>
<div>
<span class="number">10</span>
<a href="{{ url('product_detail', {'id': '17'}) }}">
<img src="{{ asset('0730162621_6889c91d6e3cd.jpg', 'save_image') }}" />
<p class="name">三色きざみゆば 50ｇ</p>
{#
<span class="price">￥1,506～￥75,330(税込)</span>
#}
</a>
</div>
</section>
</div>
</section>
{% endblock %}