Auto Size Height on Webflow Sliders

A beautiful Swiper.js overlapping cards slider built for Webflow. This Swiper.js slider is perfect for a hero section or features section of a site. When a user navigates between slides the top card is removed and the next card in line comes into view. The cards are stacked with various offsets so it looks like playing cards. There are text transitions for each text associated with the slide. This slider was created using Swiper.js and utilizes Webflow's native CMS collections. This allows you to dynamically generate slides based on the collection list items. This requires custom code so be sure to look at the pages custom code for the Swiper.js code. You can modify the Swiper.js code to include grabcursor, looping, and utilizing arrows to navigate between slides.

Add a progress bar to your draggable CMS slider sections in Webflow. Typically most draggable, or third party sliders, don't offer a progress bar indicator. Using the power of Dragdealer.js you can now add a progress bar and draggable CMS slider to your Webflow site. Please note that you'll need to add the global styles HTML embed as well as the custom script found in the closing body tag within the Page settings for this to work properly.

Here's a unique way to add transition animations to a full screen slider. Using both Swiper.js and a GSAP animation script.

A complete Splide.js CMS slider solution for Webflow. Splide.js offers a great solution over Webflow's native slider solution. Lightweight and mobile friendly this slider offers four different designs and implementations, including a Webflow CMS slider solution using Splide.js. This technique does require custom code that you'll find within the page settings, custom code area. Using this solution you can update the number of items per page, the number of items changed per slide, infinite looping, pagination, speed, drag threshold and much more.

A 3D Splide.js CMS draggable slider for Webflow. This 3D draggable slider created with Splide.js allows you to integrate Webflow's native CMS solution with Splide.js to create a dynamic and interactive slider with Webflow. The slider features navigation arrows and the ability to drag between each slide item, perfect for desktop or mobile. There's also a 3D effect with the slides entering and exiting the viewport. The Splide.js slider allows you to customize the number of items per page, per move as well as various break point functionality for mobile responsiveness. You're also able to modify the delay, duration and easing in and out. This example is infinite looping so that there's no beginning or end and the users can navigate endlessly between each individual slide that is powered by Webflow CMS.

Here's a basic example of utilizing Swiper.js for a slider within your Webflow site. Swiper.js is great for adding a draggable slider with a variety of effects within Webflow.

Add custom CMS slider with stacking and overlapping cards.

A stunning and easy to implement Swiper.js draggable slider created for Webflow. This slider is completely draggable for both desktop and mobile devices, when the next slide is triggered there's a slide in feature that is powered by Webflow interactions. This makes the next card appear to slide in upon being visible. Swiper.js powers the slider and allows for custom functionality such as speed, looping, breakpoints and much more. Keep in mind that this utilizes data attributes to work properly so you will need to update each slides data attributes in order for the Swiper.js functionality to work properly.

Here's a way to have Webflow's native slider adjust to the height of the contents within each slide. This allows you to dynamically change the size of the slider based on the height of each slides content rather than having the content adjust to the height of the entire slide module.

Here's a way to provide an add all to cart button in Webflow ecommerce. Perfect for upsells and multiple purchases being added to cart at the same time in your Webflow ecommerce store. Be sure to add the custom code snippet found within the closing body tags of the Page Settings in order for this to work.

Stop those pesky videos from playing in the background when the modal or popup has been closed by the user. Apply this to your sites body code and view the instructions in the following loom video: https://www.loom.com/share/ae76cd611f604de5af8cffea8b25efa3

Here's a way to use native Webflow attributes to send and receive data to text fields or div/text elements. This can be useful for allowing users to contact different departments via Webflow's native forms. Please note that you'll need to add the custom code found within the body close tags within Page Settings for this method to work properly.

A very unique JS hack that shows your sites publishing status in your browser tab. Helpful for Webflow's slow publishing times. Navigate to another page/browser tab and watch the status of the publishing LIVE. In order to get this technique to work you'll need to inject the code found on the cloneable to your browser. To inject the code you'll need to use a 3rd party javascript injection tool for Chrome such as CJS or CJS2. You can then copy and paste the elements above and set it to only load on Webflow.com.