{% 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': '28'}) }}">
<img src="{{ asset('0617160317_648d5ab5174a1.jpg', 'save_image') }}" />
<p class="name">限定商品おさしみゆば</p>
{#
<span class="price">￥735(税込)</span>
#}
</a>
</div>
<div>
<span class="number">2</span>
<a href="{{ url('product_detail', {'id': '1'}) }}">
<img src="{{ asset('0122095541_6790420d18579.jpg', 'save_image') }}" />
<p class="name">本さしみゆば</p>
{#
<span class="price">￥735(税込)</span>
#}
</a>
</div>
<div>
<span class="number">3</span>
<a href="{{ url('product_detail', {'id': '30'}) }}">
<img src="{{ asset('0617161441_648d5d610c02d.jpg', 'save_image') }}" />
<p class="name">比叡とろゆば</p>
{#
<span class="price">￥735(税込)</span>
#}
</a>
</div>
<div>
<span class="number">4</span>
<a href="{{ url('product_detail', {'id': '84'}) }}">
<img src="{{ asset('0422150913_6625ff0987dce.jpg', 'save_image') }}" />
<p class="name">お徳用乾燥ゆば（割れゆば）</p>
{#
<span class="price">￥432(税込)</span>
#}
</a>
</div>
<div>
<span class="number">5</span>
<a href="{{ url('product_detail', {'id': '40'}) }}">
<img src="{{ asset('0619142617_648fe6f9a38fe.jpg', 'save_image') }}" />
<p class="name">三色湯葉入り にゅうめん</p>
{#
<span class="price">￥594(税込)</span>
#}
</a>
</div>
<div>
<span class="number">6</span>
<a href="{{ url('product_detail', {'id': '33'}) }}">
<img src="{{ asset('0906151958_64f81a0e44c58.jpg', 'save_image') }}" />
<p class="name">湯葉ちらし寿司の素（１合用×２袋入）</p>
{#
<span class="price">￥1,059(税込)</span>
#}
</a>
</div>
<div>
<span class="number">7</span>
<a href="{{ url('product_detail', {'id': '5'}) }}">
<img src="{{ asset('0122100452_6790443468a29.jpg', 'save_image') }}" />
<p class="name">【WEB限定】人気の生ゆば食べくらべセット</p>
{#
<span class="price">￥2,310～￥9,870(税込)</span>
#}
</a>
</div>
<div>
<span class="number">8</span>
<a href="{{ url('product_detail', {'id': '8'}) }}">
<img src="{{ asset('0615155303_648ab54f43564.jpg', 'save_image') }}" />
<p class="name">【WEB限定】人気の生ゆば・生麩セット</p>
{#
<span class="price">￥2,830～￥4,300(税込)</span>
#}
</a>
</div>
<div>
<span class="number">9</span>
<a href="{{ url('product_detail', {'id': '17'}) }}">
<img src="{{ asset('0616184956_648c30447a37c.jpg', 'save_image') }}" />
<p class="name">ありがとう 湯葉のお吸物 三種</p>
{#
<span class="price">￥1,944～￥5,184(税込)</span>
#}
</a>
</div>
<div>
<span class="number">10</span>
<a href="{{ url('product_detail', {'id': '32'}) }}">
<img src="{{ asset('1115160402_6736f262bc8db.jpg', 'save_image') }}" />
<p class="name">【WEB・直営店限定】冷凍 生ゆばお徳用 （切落し）</p>
{#
<span class="price">￥1,000(税込)</span>
#}
</a>
</div>
</section>
</div>
</section>
{% endblock %}