更改滑块中的字体颜色 - 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 字体颜色的问题。它工作正常我可以从颜色选择器中选择字体颜色，它正在应用于我的幻灯片，但问题是当我添加新幻灯片并更改其标题字体颜色时，它会应用颜色并覆盖以前的幻灯片标题颜色并应用新的所有幻灯片的幻灯片标题颜色。我知道我在这里遗漏了一些东西。我希望每张幻灯片的幻灯片标题颜色以及其他字体样式都不同。

Answer 1

如果您在迭代循环时使用{{ forloop.index }}，您可以将其动态分配给HTML 标头和您的CSS 类。这样，每个块h5 都会有自己的颜色类。

<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 类和 CSS 现在通过其索引是唯一的，因此不会被新块覆盖。