How To in WEBFLOW CMS Collection to Slider on Mobile version

how-to-webflow-cms-to-slider.md

In WEBFLOW We copy content from a CMS into a Slider

It is copied automatically, we create 20 slides or more if necessary, once the content is copied the remaining unused slides will be deleted. This way differs with Div which has to have custom attribute too-slider-container=<complex_name> which wraps the CMS and Slider so that on the same page there can be several sliders.

1. Create CMS component
   1. Add internal component linking to CMS entries
   2. in the container-grid we add custom attribute too-slider-source=container
   3. in the collection item we add custom attribute too-slider-source=item
2. Creamos Slider
   1. Add first item Slide and assign custom attribute too-slider-target=item copy with hot keys CTRL+C and paste about 20 times with CTRL+V.
   2. In the previous level Mask we assign custom attribute too-slider-target=container
3. Wrap the two components with a Div, in side panel Settings scroll down and add custom attribute too-slider-container=<complex_name>.
4. in the page configuration we add code

Before tag:

<script>
(function () {

$("[too-slider-container]").each(function () {
    var $container = $(this);

    var $sourceContainer = $container.find('[too-slider-source="container"]');
    var $sourceItems = $sourceContainer.find('[too-slider-source="item"]');

    var $targetContainer = $container.find('[too-slider-target="container"]');
    var $targetItems = $targetContainer.find('[too-slider-target="item"]');

    $sourceItems.each(function(index) {
        var sourceContent = $(this).html();

        if (index < $targetItems.length) {
            $($targetItems[index]).html(sourceContent);
        }
    });

    if ($targetItems.length > $sourceItems.length) {
        for (var i = $sourceItems.length; i < $targetItems.length; i++) {
            $($targetItems[i]).remove();
        }
    }
});

})();
</script>

5. with keys 1 to 4 we change the views from Desktop to Mobil, select 1 and hide slider Display: None, select 4 and hide CMS and activate Slider.

Done!

---

Visual Structure in html:

<div too-slider-container="container1">

    <div too-slider-source="container">
        <div too-slider-source="item">Item A</div>
        <div too-slider-source="item">Item B</div>
    </div>

    <div too-slider-target="container">
        <div too-slider-target="item">1</div>
        <div too-slider-target="item">2</div>
        <div too-slider-target="item">3</div> <!-- it will be eliminated -->
    </div>

</div>

sychev-webflow-csm-to-slider.js

(function () {

$("[too-slider-container]").each(function () {
    var $container = $(this);

    var $sourceContainer = $container.find('[too-slider-source="container"]');
    var $sourceItems = $sourceContainer.find('[too-slider-source="item"]');

    var $targetContainer = $container.find('[too-slider-target="container"]');
    var $targetItems = $targetContainer.find('[too-slider-target="item"]');

    $sourceItems.each(function(index) {
        var sourceContent = $(this).html();

        if (index < $targetItems.length) {
            $($targetItems[index]).html(sourceContent);
        }
    });

    if ($targetItems.length > $sourceItems.length) {
        for (var i = $sourceItems.length; i < $targetItems.length; i++) {
            $($targetItems[i]).remove();
        }
    }
});

})();