Hi,
I create 2 CMS components (Latest news and Projects). You can review the read-only link
I’m using custom code from one amazing Webflow dev to animate the CMS slider (provided below)
For the projects component, I added a combo class projects
Now the arrow buttons should work but it doesn’t
Any help is greatly appreciated 
--Script for CMS Slider
<!-- Before /body -->
<script >
/* Left/Right Arrow Styling */
function leftArrowHide() {
$("#left-arrow").removeClass('arrow-box').addClass('arrow-end');
}
function leftArrowShow() {
$("#left-arrow").removeClass('arrow-end').addClass('arrow-box');
}
function rightArrowHide() {
$("#right-arrow").removeClass('arrow-box').addClass('arrow-end');
}
function rightArrowShow() {
$("#right-arrow").removeClass('arrow-end').addClass('arrow-box');
}
/* Hide the CMS nav dots used for styling
and set the arrows to default styles for Slide 1 */
$('.navdot').hide();
rightArrowShow();
leftArrowHide();
/* Generate nav dots for each CMS slide */
var slideval = 0;
var cmscount = $("#slides").children().length;
var countconverted = (cmscount - 1) * -100;
for (i = 0; i < cmscount; i++) {
var container = document.getElementById('#nav');
var div = document.createElement("div");
div.className = 'navdot';
div.id = 'slide' + i;
div.className += ' generated';
var slidenumber = document.createElement("div");
slidenumber.innerHTML = i + 1;
slidenumber.className = 'navdot-number';
div.append(slidenumber);
document.getElementById('nav').append(div);
}
/* Activate the generated nav dot for Slide 1. */
$("#slide0").addClass("selected");
/* Click detection for nav dots. Activate the corresponding slide
and update the left/right arrows if on the first or last slide */
$(".navdot").click(function() {
$(".navdot").removeClass("selected");
$(this).addClass("selected");
var slide = $(this).attr('id');
var num = slide.replace('slide', '');
slide = parseInt(num);
var multiplier = slide * -100;
slideval = multiplier;
if (slide == 0) {
leftArrowHide();
rightArrowShow();
} else if (slide == cmscount - 1) {
rightArrowHide();
leftArrowShow();
} else {
leftArrowShow();
rightArrowShow();
}
moveSlides(slideval);
$('#animationTrigger').click();
});
/* Right Arrow click detection and actions. */
$("#right-arrow").click(function() {
if (slideval > countconverted) {
leftArrowShow();
slideval += -100;
moveSlides(slideval);
updatenav();
$('#animationTrigger').click();
if (slideval == countconverted) {
rightArrowHide();
}
}
});
/* Left Arrow click detection and actions. */
$("#left-arrow").click(function() {
if (slideval < 0) {
rightArrowShow();
slideval += 100;
moveSlides(slideval);
updatenav();
$('#animationTrigger').click();
if (slideval == 0) {
leftArrowHide();
}
}
});
/* Function called on by arrow and nav dot clicks to move to
the selected slide */
function moveSlides(measurement) {
$('#slides').css({
'-webkit-transform': 'translateX(' + slideval + '%)',
'-moz-transform': 'translateX(' + slideval + '%)',
'-ms-transform': 'translateX(' + slideval + '%)',
'-o-transform': 'translateX(' + slideval + '%)',
'transform': 'translateX(' + slideval + '%)'
});
}
/* Update nav dots so that the active dot corresponds to the
active slide */
function updatenav() {
$(".navdot").removeClass("selected");
var slides = $('.generated');
for (i = 0; i < slides.length; i++) {
var slide = slides[i].id;
var num = slide.replace('slide', '');
slide = parseInt(num);
var multiplier = slide * -100;
if (multiplier == slideval) {
$("#slide" + i).addClass("selected");
}
}
}
</script>
Here is my public share link: LINK
(how to access public share link)
