FROM CACHE - jp_header

セクションに設置したスライダーのページ送りの数字がずれてしまう

nishi-ec
Shopify Partner
31 1 3

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);
}

 

以上、よろしくお願いいたします。

0件の返信0