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

Posted 2023-02-15

【中文标题】更改滑块中的字体颜色 - Shopify

【英文标题】：Changing font color in slider - Shopify

【发布时间】：2020-11-07 11:32:04

【问题描述】：

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

【参考方案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 现在通过其索引是唯一的，因此不会被新块覆盖。

【讨论】：

这很好用，但你能向我解释一下逻辑吗@andy

@AliMirza 我用更多解释更新了我的答案。