Dawnを利用しています。
こちら→Featured collection slider for Dawn Theme Shopify 2.0からお借りしたコードでスライダー機能を持つセクションを追加しました。
デスクトップ表示では特に問題ないのですが、タブレット・スマホ表示になった際にページ送りの部分が、8や13になったときに数字のカウントが増えずに、もう一度押した際に数が増えるという挙動になり、最後の商品までページを送ったときに表示の数字がずれてしまいます。
タブレット・スマホ表示になった際に、<li></li>の幅がうまく収まっていないのが原因かと思い、コンテンツ幅の調整を試みましたがページ送りの挙動の不具合は改善しませんでした。
対処方法をご教示頂けると助かります。
SectionsフォルダとAsssetsフォルダへ追加したコードを以下に記載します。
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}
{{ 'collection-slider.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
assign total_products = section.settings.collection.products.size
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
endif
-%}
<div class="slider-container collection page-width page-width-desktop">
<div class="title-wrapper-with-link{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
<h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
</div>
<slider-component style="display: block;" >
<ul class="product-slider-box grid grid--2-col product- {% if total_products == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop
{% else %} grid--3-col-tablet{% endif %}{% if total_products > 4 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}
{% if total_products > 2 %}
slider slider--tablet grid--peek{% endif %}
negative-margin--small"
role="list"
id="product-slider-box">
{%- for product in section.settings.collection.products -%}
<li class="product-slider grid__item slider__slide" id="product-slider"
data-slide-index="{{forloop.index}}">
{% render 'product-card',
product_card_product: product,
media_size: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
add_image_padding: section.settings.add_image_padding,
show_vendor: section.settings.show_vendor,
show_image_outline: section.settings.show_image_outline,
show_rating: section.settings.show_rating
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'product-card-placeholder' %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if section.settings.collection.all_products_count > 4 -%}
<div class="slider-buttons no-js-hidden {% if total_products < 4 %} small-hide{% endif %}" style="display: flex;">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">
{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
<span class="slider-counter--total"
data-total-products ="{{total_products}}">{{total_products}}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">
{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
</div>
{% schema %}
{
"name": "Collection Slider",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Featured Collection",
"label": "t:sections.featured-collection.settings.title.label"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "add_image_padding",
"default": false,
"label": "t:sections.featured-collection.settings.add_image_padding.label"
},
{
"type": "checkbox",
"id": "show_image_outline",
"default": true,
"label": "t:sections.featured-collection.settings.show_image_outline.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection.settings.show_rating.label",
"info": "t:sections.featured-collection.settings.show_rating.info"
}
],
"presets": [
{
"name": "Collection Slider"
}
]
}
{% endschema %}
.slider-container {
/*padding: 0 3rem;*/
width: 100%;
overflow: auto;
display: flex;
flex-flow: column wrap;
/*align-items: center;*/
position: relative;
}
ul {
padding-inline-start: 0px !important;
}
slider-component {
position: relative;
display: block;
width:100%;
}
.slider__slide {
scroll-snap-align: start;
flex-shrink: 0;
}
.product-slider-box {
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
width: 100%;
height: 100%;
display: flex;
}
.product-slider {
height: 100%;
width: calc(50% - .5rem / 2) !important;
display: inline-block;
}
.slide-image {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 989px) {
.grid__item {
padding-left: 1rem;
}
}
/* navigation slider */
.slider-buttons {
display: flex;
}
.slider {
scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
-ms-overflow-style: none;
scrollbar-width: none;
}
.slider::-webkit-scrollbar {
height: 0.4rem;
width: 0.4rem;
display: none;
}
.no-js .slider {
-ms-overflow-style: auto;
scrollbar-width: auto;
}
.no-js .slider::-webkit-scrollbar {
display: initial;
}
.slider::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-foreground));
border-radius: 0.4rem;
border: 0;
}
.slider::-webkit-scrollbar-track {
background: rgba(var(--color-foreground), 0.04);
border-radius: 0.4rem;
}
.slider-counter {
margin: 0 1.2rem;
}
.slider-buttons {
display: flex;
align-items: center;
justify-content: center;
}
.slider-button {
color: rgba(var(--color-foreground), 0.75);
background: transparent;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
}
.slider-button:not([disabled]):hover {
color: rgb(var(--color-foreground));
}
.slider-button .icon {
height: 0.6rem;
}
.slider-button[disabled] .icon {
color: rgba(var(--color-foreground), 0.3);
}
.slider-button--next .icon {
margin-right: -0.2rem;
transform: rotate(-90deg) translateX(0.15rem);
}
.slider-button--prev .icon {
margin-left: -0.2rem;
transform: rotate(90deg) translateX(-0.15rem);
}
.slider-button--next:not([disabled]):hover .icon {
transform: rotate(-90deg) translateX(0.15rem) scale(1.07);
}
.slider-button--prev:not([disabled]):hover .icon {
transform: rotate(90deg) translateX(-0.15rem) scale(1.07);
}
以上、よろしくお願いいたします。
