I need some help with this code. Marquee logos slider

[Fasa]

Hello everyone,

I have an issue. Unfortunately, I'm unable to insert the following code into a custom section. I've also tried inserting it via a custom HTML section. Have I done something wrong? The code is from Codepen.io, and I'm attempting to adapt it to my website, but I'm struggling. Could you provide some clarification?

<div class="container h-100">

  <div class="row align-items-center h-100">

    <div class="container rounded">

      <h1 class="text-center">Featured in:</h1>

      <div class="slider">

        <div class="logos">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/Logo-APCI.png?v=1712565070" alt="Logo 1" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/LA-NIC-2.png?v=1712565069" alt="Logo 2" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/E-LA-FIC.png?v=1712565069" alt="Logo 3" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/italcuochi.png?v=1712565069" alt="Logo 4" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/cdc.png?v=1712565069" alt="Logo 5" class="custom-image">

        </div>

        <div class="logos">

          <img src="url_dell_immagine_6" alt="Logo 6" class="custom-image">

          <img src="url_dell_immagine_7" alt="Logo 7" class="custom-image">

          <img src="url_dell_immagine_8" alt="Logo 8" class="custom-image">

          <img src="url_dell_immagine_9" alt="Logo 9" class="custom-image">

          <img src="url_dell_immagine_10" alt="Logo 10" class="custom-image">

        </div>

      </div>

    </div>

  </div>

</div>

body,html {
height: 100%;
background-color: white;
}

.container {
overflow: hidden;
.slider {
animation: slidein 30s linear infinite;
white-space: nowrap;
.logos {
width: 100%;
display: inline-block;
margin: 0px 0;
.fab {
width: calc(100% / 5);
animation: fade-in 0.5s
cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}
}
}
}

@keyframes slidein {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}

@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

Thank you in advance!

[Liquid_xPert_SJ · Accepted solution]

@Fasa 

You can create a section and and put that all code in that and call that function where ever you need. Updated code below you missed the <style> tags

<div class="container h-100">

  <div class="row align-items-center h-100">

    <div class="container rounded">

      <h1 class="text-center">Featured in:</h1>

      <div class="slider">

        <div class="logos">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/Logo-APCI.png?v=1712565070" alt="Logo 1" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/LA-NIC-2.png?v=1712565069" alt="Logo 2" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/E-LA-FIC.png?v=1712565069" alt="Logo 3" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/italcuochi.png?v=1712565069" alt="Logo 4" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/cdc.png?v=1712565069" alt="Logo 5" class="custom-image">

        </div>

        <div class="logos">

          <img src="url_dell_immagine_6" alt="Logo 6" class="custom-image">

          <img src="url_dell_immagine_7" alt="Logo 7" class="custom-image">

          <img src="url_dell_immagine_8" alt="Logo 8" class="custom-image">

          <img src="url_dell_immagine_9" alt="Logo 9" class="custom-image">

          <img src="url_dell_immagine_10" alt="Logo 10" class="custom-image">

        </div>

      </div>

    </div>

  </div>

</div>

 
<style>
body,html {
height: 100%;
background-color: white;
}

.container {
overflow: hidden;
.slider {
animation: slidein 30s linear infinite;
white-space: nowrap;
.logos {
width: 100%;
display: inline-block;
margin: 0px 0;
.fab {
width: calc(100% / 5);
animation: fade-in 0.5s
cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}
}
}
}

@keyframes slidein {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}

@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

thanks

[Liquid_xPert_SJ · Accepted solution]

@Fasa 

You can create a section and and put that all code in that and call that function where ever you need. Updated code below you missed the <style> tags

<div class="container h-100">

  <div class="row align-items-center h-100">

    <div class="container rounded">

      <h1 class="text-center">Featured in:</h1>

      <div class="slider">

        <div class="logos">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/Logo-APCI.png?v=1712565070" alt="Logo 1" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/LA-NIC-2.png?v=1712565069" alt="Logo 2" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/E-LA-FIC.png?v=1712565069" alt="Logo 3" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/italcuochi.png?v=1712565069" alt="Logo 4" class="custom-image">

          <img src="https://cdn.shopify.com/s/files/1/0820/6732/5251/files/cdc.png?v=1712565069" alt="Logo 5" class="custom-image">

        </div>

        <div class="logos">

          <img src="url_dell_immagine_6" alt="Logo 6" class="custom-image">

          <img src="url_dell_immagine_7" alt="Logo 7" class="custom-image">

          <img src="url_dell_immagine_8" alt="Logo 8" class="custom-image">

          <img src="url_dell_immagine_9" alt="Logo 9" class="custom-image">

          <img src="url_dell_immagine_10" alt="Logo 10" class="custom-image">

        </div>

      </div>

    </div>

  </div>

</div>

 
<style>
body,html {
height: 100%;
background-color: white;
}

.container {
overflow: hidden;
.slider {
animation: slidein 30s linear infinite;
white-space: nowrap;
.logos {
width: 100%;
display: inline-block;
margin: 0px 0;
.fab {
width: calc(100% / 5);
animation: fade-in 0.5s
cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}
}
}
}

@keyframes slidein {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}

@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

thanks

[MRamzan · Accepted solution]

You can do it for your store:

Create a new section marquee and paste below code.

You can add marquee section to any page.

<style>
  .section-{{ section.id }}.custom-marquee-images {
    display: flex;
    align-items: center;
    width: 100vw;
    max-width: 100%;
    height: {{section.settings.marquee_height}}px;
    padding-top: {{section.settings.marquee_padding}}px;
    padding-bottom: {{section.settings.marquee_padding}}px;
    overflow-x: hidden;
    background:{{section.settings.colorBackground}};
  }
  .section-{{ section.id }}.custom-marquee-images .track-images {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 13s linear infinite;
  }
  .section-{{ section.id }}.custom-marquee-images img {
    margin-left: 40px;
    width: calc({{section.settings.image_width}}px + 50px);;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="section-{{ section.id }} custom-marquee-images" role="region" {{ block.shopify_attributes }}>
      <div class="track-images">
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
        {%- for block in section.blocks -%}
          <img src="{{ block.settings.image | image_url: width: 533 }}" width="150" height="100%" />
        {%- endfor -%}
      </div>
  </div>

{% schema %}
{
  "name": "Marquee Images",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#06ffbc"
    },
    {
      "type": "range",
      "id": "marquee_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 100,
      "label": "Marquee height"
    },
    {
      "type": "range",
      "id": "marquee_padding",
      "min": 0,
      "max": 100,
      "step": 2,
      "default": 0,
      "label": "Marquee padding"
    },
    {
      "type": "range",
      "id": "image_width",
      "min": 10,
      "max": 200,
      "step": 2,
      "default": 100,
      "label": "Image size"
    }
  ],
  "blocks": [
    {
      "type": "image_picker",
      "name": "Logo",
      "limit": 20,
      "settings": [
         {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee Images"
    }
  ]
}
{% endschema %}