How can I create a sliding image carousel with a similar effect as seen on Awwwards using Webflow?
TL;DR
- Add the Slider component from the Webflow Add panel, insert images, and adjust slide settings like autoplay and infinite loop.
- Hide overflow on the Slide Mask and apply a Slide movement interaction with easing for smooth transitions.
- Optionally, create a custom horizontal scroll effect using Webflow Interactions by placing images in a wide flex container and animating their movement on scroll.
- Optimize for responsiveness by refining layouts for different breakpoints and testing in Preview Mode.
Creating a sliding image carousel in Webflow with a smooth Awwwards-style effect involves using the Slider component or custom animations with interactions. Follow these steps to achieve a fluid, highly interactive sliding effect.
1. Add the Slider Component
- Go to the Add panel (A) in Webflow and drag the Slider component onto the canvas.
- Inside the Slider, you'll find two default slides (you can add or remove slides as needed).
- Place images or content inside each slide.
2. Adjust Slider Settings
- Select the Slider Wrapper, then go to the right-hand Element Settings panel.
- Set "Autoplay" if you want automatic sliding and adjust the duration.
- Enable "Infinite Loop" to avoid a hard stop at the last slide.
- Disable "Show Arrows" and "Show Dots" if you want a cleaner look.
3. Add Custom Smooth Transitions
- Select the Slide Mask and apply a CSS overflow: hidden to prevent unwanted visibility.
- Apply a "Slide movement" interaction (found in the Interactions panel):
- Trigger: Scroll or Mouse Move in Viewport
- Action: Move the slides left/right based on mouse movement
- Easing: Apply "Ease" or "Ease-in-out" for a smoother effect
- Duration: 0.3s–0.5s for fluid motion
4. Create a Custom Horizontal Scroll Effect (Optional)
For an Awwwards-like style, use custom div-based scrolling instead of the default Slider:
- Create a horizontal scrolling section using Webflow Interactions (While Scrolling in Viewport).
- Inside a wide flex container, place images side-by-side within a 100vw width div for each one.
- Use "While Scrolling" to animate the X-axis movement of images.
5. Optimize for Responsiveness
- Ensure your slides scale properly on mobile breakpoints.
- Adjust the grid or flex layout for different screen widths.
- Test with Webflow's Preview Mode and make refinements.
Summary
To create an Awwwards-style image carousel, use Webflow’s Slider component with smooth interactions, or build a custom scrolling effect with div-based horizontal scrolling. Optimize transition speeds, easing, and responsiveness for a seamless effect.