Custom html code combined with my cms

Design help Custom code
1
Horizontal Slider 
        <div class="collection-list w-dyn-list reviews-collection">
            <div class="w-dyn-items">
            
                <div class="w-dyn-item slide">
                    <div class="review-content">
                        <img src="{{Review_Image}}" alt="{{Review_Name}}">
                        <p>{{Review_Text}}</p>
                        <h4>{{Review_Name}}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div class="slide-container">
        <div class="dots-container"></div>

        <button class="prev slide-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="m15 18-6-6 6-6" />
            </svg>
        </button>
        <button class="next slide-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="m9 18 6-6-6-6" />
            </svg>
        </button>
    </div>
</div>

i have html + css + js custom code intergration which i wanna connect with my cms but how can i make sure that that i get the collection list data on the right place so that i dont have to harcode my data

so i wanna get acces to that data in my html so i dont have to use the js api

2

Hi there,

Connecting your CMS data to your website is straightforward using either Collection pages or Collection lists. These elements automatically handle the display and organization of your dynamic content.

When working with collections, your HTML structure includes specific Webflow classes that manage the dynamic content:

  • w-dyn-list: Contains the entire collection list
  • w-dyn-items: Wraps all collection items
  • w-dyn-item: Represents each individual item

Your Collection field references (such as {{Review_Image}}, {{Review_Text}}, and {{Review_Name}}) will automatically populate with your CMS data once implemented within a Collection template. This dynamic binding ensures your content updates automatically whenever you make changes in the CMS.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Sounds like you want;

  • Finsweet CMS Slider for your slider + collection list integration
  • A collection list for your content
  • An Embed inside of that collection list for your custom code
  • + Add Field to integrate your CMS data into your custom code within that embed.