I am trying to create a CMS slider with the slider bullets calling from the same CMS. I have the slider set up properly and then I am trying to make a CMS slider picker with the bullets linking to the appropriate slide and the bullet highlight for the active slide. I am using some custom code to set up the slider but the slider layout/slider bullet items do not behave properly. I am not sure how to correct the code to achieve what I am looking for.
Instead, the functional slider picker populates on the side of my CMS slider picker(and one of them is missing too). Here is the published link in the current state so far.
While sliders cannot automatically populate with dynamic CMS collection content, you can implement this using collection lists. Here’s how to set it up:
Create your first slide with a collection list and configure it to show only 1 item. For subsequent slides, duplicate the first slide and adjust each collection list’s “Start At” setting (Slide 1 starts at item 1, Slide 2 at item 2, and so on).
For styling the slider navigation dots, you can customize them using these CSS classes in a custom code embed:
.w-slider-dot {
/* Style for all dots */
background-color: #your-color;
width: 10px;
height: 10px;
}
.w-slider-dot.w-active {
/* Style for active dot */
background-color: #active-color;
}
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Had to solve this on a client build , you’ll need to sync your CMS collection list with Swiper’s pagination.renderBullet function so each bullet pulls the CMS item and highlights via swiper.activeIndex. The duplicate/missing issue usually comes from the loop setting or mismatched collection bindings.
Do you have the CMS linked tab on any page in the site? I found the functional static tabs that you have setup without it being linked to CMS and it works fine as you would expect it to.
If you want to explore it with CMS with the custom code, could you set it up so that we can test the issue you are experiencing to troubleshoot it better?