更改滑块中的字体颜色 - Shopify

Question

<section class="image-slider">

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            {% for block in section.blocks %}
                <li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.index0}}" {%if forloop.index0 == 0 %} class="active" {% endif %}></li>

            {% endfor %}
        </ol>
        <div class="carousel-inner">
           {% for block in section.blocks %}

            <div class="carousel-item {% if forloop.first %} active {% endif %} ">
                <img src="{{block.settings.image  | img_url: 'master'}}">
                <div class="carousel-caption d-none d-md-block">
                <h5 class="title-color">{{block.settings.title}}</h5>
                </div>
            </div>

            <style>
                .title-color{
                    color: {{ block.settings.title_color }};
                }
            </style>

           {% endfor %}

        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

</section>


{% schema %}
{
    "name": "Image Slider",
    "max_blocks": 5,
    "settings": [
        {
            "type": "header",
            "content": "Image Slider"
        }
    ],
    "blocks": [
    {
        "type": "image",
        "name": "Image",
        "settings": [
            {
                "type": "image_picker",
                "id": "image",
                "label": "Image"
            },
            {
                "type": "text",
                "id": "title",
                "label": "Image Title"
            },
            {
                "type": "color",
                "id": "title_color",
                "label": "Title Color",
                "default": "#ffffff"
            }
        ]
    }
    ],
    "presets": [
        {
            "category": "Image",
            "name":"Image Slider"
        }
    ]
}
{% endschema %}

我正在学习 shopify 并遇到有关获取 css 字体颜色的问题。它工作正常我可以从颜色选择器中选择 select 字体颜色并且它正在我的幻灯片上应用但问题是当我添加新幻灯片并更改其标题字体颜色时它应用颜色加上覆盖以前的幻灯片标题颜色也并将新的幻灯片标题颜色应用于所有幻灯片。我知道我在这里遗漏了一些东西。我希望每张幻灯片的幻灯片标题颜色和其他字体样式都不同。

Answer 1

如果你在迭代循环时使用{{ forloop.index }}，你可以将它动态分配给HTMLheader和你的CSSclass。这样，每个方块 h5 都会有自己的颜色 class.

<h5 class="title-color-{{ forloop.index }}">{{block.settings.title}}</h5>

.title-color-{{ forloop.index }} {
  color: {{ block.settings.title_color }};
}

随着循环的进行，您将逐渐建立动态 HTML 和 CSS。

先运行

<h5 class="title-color-1">block title</h5>

.title-color-1 {
  color: #block-color;
}

秒运行

<h5 class="title-color-2">block title</h5>

.title-color-2 {
  color: #block-color;
}

注意每个块的 h5 class 和 CSS 现在如何通过其索引是唯一的，因此不会被新块覆盖。

更改滑块中的字体颜色 - Shopify

Changing font color in slider - Shopify

html

css

shopify

shopify-app

shopify-template