Streaming live at 10am (PST)

Custom slider with CMS integration - Design help


#1

Hey Webflow family,

For the past few days I’ve been trying to create a custom slider for a testimonials sections that I designed. Honestly, I’ve reached a point where I’m rather frustrated that I can’t seem to design it on webflow. Maybe my logic in designing it is wrong - I don’t know.

What would be the best way to design this testimonial section (attached image).
–p.s. I would it be possible to integrate it with the cms? or is it too complex?

FINGERS CROSSED


#2

Hi @ajoy,

It is possible to do it with Webflow.
You might have come across my video tutorials for a custom slider while searching the forum.
In these you will find what I believe to be helpful tips to create this kind of slider.

As this technique rely on knowing in advance the number of items/slides to deal with interactions, you could use CMS items for convenience of data modification but the number of slides would need to be finite and won’t adjust dynamically.

However, I’m currently pushing a bit further and if you are familiar with code, here is my idea to make my Webflow custom slider a dynamic one. It’s not completely finish and customised to your need but you would get the idea.

<script>
$(document).ready(function(){
	// find dynamically how many collection items there are
	let numberOfCollectionItem = $(".slide-stripe").children().length;
  // keep track of the current slide
  let currentSliderPosition = 1;
  // the value in percent that is occupied by one slide
  const itemSize = 25;
  // define the end position of the slider considering the size of an item
  const maxTransform = numberOfCollectionItem-(100/itemSize)
  // by how much the slider should transform
  let transformAmount = itemSize;
  
  // the following click function is only for one direction for now
	$(".slide-stripe").click(function(){
  	// if the slider is not at the end position
  	if (currentSliderPosition < maxTransform) {
    	// move the slider stripe to the next position
  		$(this).css('transform', 'translateX('+transformAmount+'%)');
      //update the current position
    	currentSliderPosition += 1;
      //update the next position (in this direction)
    	transformAmount = currentSliderPosition * itemSize;
    };
	});
});
</script>

I hope this answer will inspire solutions which may work for your design.

Max


#3

Thanks alot for your reply @Maximosaurus, I really appreciate it.

Check this out, @joshwork designed something quite similar. Maybe this could be inspiration for you too?

Have a great day.