How to connect the Webflow CMS Slider layout with a Collection List
1. Once you've added the layout to your page, locate the first element with the 'BF Collection List Wrapper' class applied to it. It can be found within the first 'BF Card Slide' element.
2. Take note of the class structure within the 'BF Collection List Wrapper' as we'll need to replace this element with a Collection List element and then add the following classes to the corresponding elements:
- Collection List Wrapper > BF Collection List Wrapper
- Collection List > BF Collection Slider
- Collection Item > BF Collection Item Slide
3. Connect your collection.
3. Select the Collection List Wrapper element, navigate to the 'Settings' tab on the right-hand side of your screen, then check the 'Limit Items' checkbox and set it to 'Show: 5'. In order to increase the amount of Collection Items the slider should display, follow the steps within the 'How to change the amount of slides' section on this page.
4. Connect your Collection Item fields. You can add whatever content your Collection Item allows within the 'BF Collection Item Slide' element; or alternatively; you could copy and paste the contents of the 'BF Collection Item Slide' within the 'BF Card Slide' element (this is the last child of 'BF Card Slider Mask' element). You can then link the Collection Item fields.
5. When you're happy with the slides, you'll want to replace the 'BF Collection List Wrapper' within the last child of the 'BF Card Slider Mask' element as shown. This is used to make the slider appear infinite.
Note: If you'd like to make any changes to either of these Collection List Wrappers or their children, you'll need to replicate those changes for the other Collection List Wrapper
6. Finally, you'll need to add the class 'Duplicate' to the element with the class 'BF Collection Slider' within this last 'BF Card Slide' element. This should now be a combo class with two classes 'BF Collection Slider' and 'Duplicate'.
How to change the amount of slides
The infinite collection slider is non-native to Webflow. However, there is no custom code involved in making it work.
In order to make increase the amount of slides, you'll need to follow these steps:
1. Duplicate the last 'Lightbox Link' element within the first 'Slide Wrap' as shown in the picture below.
2. Link the 'Lightbox Link' as well as the 'Lightbox Image' with your new image field and alt text.
3. Set the 'Slide Wrap' 2d transform by following this formula-(100% / amount_of_slides) x 2
By default, we have 6 slides. Therefore our calculation is -(100% / 6) x 2 which equals -33.3333333334%. You can paste your value into the X value under the 'Move' tab in the '2D & 3D transforms' style.
4. Similar to the previous step, you'll also need to update the Width of the 'Lightbox Link' as well.
The formula for this is 100% / amount_of_slides, which again in this case is 100% / 6, that equals 16.6666666667%.
5. The last slide has the child 'Slide Wrap' with a secondary class 'Last'. You'll need to set the 2D & 3D transform Move X style to the same value from Step 4 but as a negative. In this case that will be -16.6666666667%.
6. Now set the 'Slide Wrap' to amount_of_slides x 100. By default it is 600%.
7. You'll finally just need to duplicate a 'Phantom Slide' for the amount of slides you have, take away 2. We have 6 slides by default, therefore we should have 4 Phantom Slides.
Note: The last 'Slide' should stay the same as it is. It contains 3 'Lightbox Link' elements. They must be linked to the same collection fields as the first 3 'Lightbox Link' elements in the first Slide > Slide Wrap. This is to assist with a smooth transition in order for the slider to be infinite.
If you were to re-order or change the linked collection fields for any of the first 3 'Lightbox Link' elements in the first Slide > Slide Wrap, you'll need to make sure the ones in the last Slide > Slide Wrap match.
.svg)
