Dawnを利用しています。
こちら→Featured collection slider for Dawn Theme Shopify 2.0からお借りしたコードでスライダー機能を持つセクションを追加しました。
デスクトップ表示では特に問題ないのですが、タブレット・スマホ表示になった際にページ送りの部分が、8や13になったときに数字のカウントが増えずに、もう一度押した際に数が増えるという挙動になり、最後の商品までページを送ったときに表示の数字がずれてしまいます。
タブレット・スマホ表示になった際に、
の幅がうまく収まっていないのが原因かと思い、コンテンツ幅の調整を試みましたがページ送りの挙動の不具合は改善しませんでした。対処方法をご教示頂けると助かります。
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 }}
{%- 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
-%}
## {{ section.settings.title | escape }}
{% 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);
}
以上、よろしくお願いいたします。