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
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
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?
https://webflow.com/website/User-Reviews-Micro-Interactions-UI8-Joshwork-Dribbble-Series
Have a great day.