EPYC Slider: Swiper.js Attributes for Webflow

Are you seeking to enhance your Webflow project with a robust slider, all without the need for coding? Allow us to introduce EPYC Slider – the perfect solution for you.

EPYC Slider (Based on SwiperJS) for Webflow utilizes the power of custom attributes that offers a seamless experience in building sliders of any kind, carefully crafted with non-coders in mind. The best part? You can utilize its powerful features without requiring extensive coding expertise.

What is SwiperJS?

SwiperJS is the most powerful CMS Slider for Webflow. And we are bringing the power of attributes to help you build any type of CMS Slider without getting into code.

#TrueNoCoderWay

With SwiperJS, you can build powerful and dynamic sliders that will make your content pop. So why not give it a try and see what you can create?

Setup

Add EPYC SliderJS and SwiperJS to your Webflow project

1. Add EPYC Slider to a single page in your project
   1. Custom code to a Single Page (https://doc.clickup.com/d/h/13fvg8-5264/a02f54cab23e650)
2. Add EPYC Slider to all pages of your project
   1. Custom code to all pages of the Webflow Project (https://doc.clickup.com/d/h/13fvg8-5244/058b444e69862f6)

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@teamepyc/[email protected]/dist/index.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@teamepyc/[email protected]/dist/index.js"></script>

Configure your Webflow Element

Creating a Swiper Slider in Webflow Designer is easy! Here are the steps to set up the following structure:

1. Put your Collection List Wrapper in a div block. Add a class epyc-slider-attributes to it.
2. Add class to the Collection List Wrapper ➝ swiper .
3. Add class to the Collection List ➝ swiper-wrapper .
4. Add class to the Collection Item ➝ swiper-slide
5. Put your slide content inside the swiper-slide element and style it however you want.

| Webflow Element | Class to add | Attribute to add | Attribute Value | | ----------------------- | ---------------------- | ------------------- | --------------- | | Div Block | epyc-slider-attributes | epyc-slider-element | list | | Collection List Wrapper | swiper | | | | Collection List | swiper-wrapper | | | | Collection Item | swiper-slide | | |

Refer to the screenshot below for help

➝

1. Add epyc-slider-element custom attributes with value list to the element with class epyc-styles-attributes.

Done!

Publish your site and the slider will start working.

Customization

To customize your slider, just add custom attributes to the element with epyc-slider-attributes class. This element is also the parent element of your slider.

Once you have added the custom attributes, publish the site to see the changes on your published site.

Add Navigation to the slider (Arrow Buttons)

1. You can add buttons to move to the next/previous slide.
2. Create two buttons inside the epyc-slider-attributes element and the following class to link them.

| Button | Class to Add | Description | | --------------- | ---------------- | ----------------------------------------------------------- | | Previous Button | swiper-prev | Clicking on this button will move the slide to the next one | | Next Button | swiper-next | Clicking on this button will move the slide to the next one |

Styling
You can use the Webflow designer to style the button as you like.

To style the disabled state of the buttons (when you are on the first or the last slide), you need to style the is-disabled class. When the buttons are supposed to be disabled, this class will automatically be added to the button.

Pro Tip: Wrap both the buttons inside another div element to position them easily

Add Pagination to the slider (Bullets)

1. Add a new Div Block element inside epyc-slider-attributes , but outside of the swiper element.
2. Add swiper-bullet-wrapper class on the new element.
3. Change the display to flex and set the flex-direction to horizontal
4. Inside the swiper-bullet-wrapper element
   1. Create two new Div Block elements
   2. Add class swiper-bullet to both the elements
5. Customize the styling of the swiper-bullet class to achieve the desired appearance for your pagination bullets.
   1. Example:
      1. Give them a fixed height and width of 16 pixels and set the background colour to the colour of your choice
      2. Change the border-radius to make the bullet look round.
6. Assign a combo class of swiper-bullet-active to one of the div elements.
   1. Style the swiper-bullet-active combo class to define the appearance of the active pagination bullet.
7. Done!
   1. Publish the site and open the webpage to see your pagination bullets in action

Note: The bullets will be generated dynamically after publishing according to the number of slides in the slider.

| Element | Class to Add | Description | | ---------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Pagination container | swiper-bullet-wrapper | Add this class to the container element inside which the bullets will be placed. | | Pagination Item | swiper-bullet | Add this class on a placeholder element inside the swiper-bullet-wrapper. Use this element to style your pagination bullets | | Active Pagination Item | swiper-bullet-active | Put this class on a placeholder element inside the swiper-bullet-wrapper. Use this element to style how your pagination bullets will look when they are active. |

Add Pagination to the slider (Fraction)

1. Add a new Div Block element insideepyc-slider-attributes , but outside of the swiper element.
2. Add swiper-bullet-wrapper class on the new element.
3. Done!
   1. Publish the site and open the webpage to see your pagination fractions in action.
4. [Optional] Inside the swiper-bullet-wrapper element
   1. Create two new Div Block elements
   2. Add class swiper-fraction-current and swiper-fraction-total to each of the elements and style them.

| Element | Class to Add | Description | | -------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | Pagination container | swiper-bullet-wrapper | Add this class to the container element inside which the pagination will be placed. | | Current Slide | swiper-fraction-current | Put this class on a placeholder element inside the swiper-bullet-wrapper. Use this element to style how the right half of the fraction looks like. | | Total Slide | swiper-fraction-total | Put this class on a placeholder element inside the swiper-bullet-wrapper. Use this element to style how the right half of the fraction looks like. |

Add Pagination to the slider (Progressbar)

1. Add a new Div Block element insideepyc-slider-attributes , but outside of the swiper element.
2. Add swiper-bullet-wrapper class on the new element.
3. Done!
   1. Publish the site and open the webpage to see your pagination fractions in action.
4. [Optional] Inside the swiper-bullet-wrapper element
   1. Create one new Div Block element.
   2. Add class swiper-progress-fill to that element and style it.

| Element | Class to Add | Description | | -------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | Pagination container | swiper-bullet-wrapper | Add this class to the container element inside which the pagination will be placed. | | Progressbar Fill | swiper-progress-fill | Put this class on a placeholder element inside the swiper-bullet-wrapper. Use this element to style how the fill part of the progressbar will look like. |

Special Examples

Add docs for special examples here.

• Infinite Loop (https://doc.clickup.com/d/h/13fvg8-5064/0add8ed90d1be13/13fvg8-5444)

Configuration

Here's a list of all the possible custom attributes which you can add to epyc-slider-attributes element to customize the slider

Change the direction of the slider

Add a custom attribute called epyc-direction and set its value to either horizontal or vertical, depending on your desired direction of movement.

| Attribute Name | Default Value | Possible Values | Description | | ------------------ | ----------------- | --------------------- | ---------------------------------------- | | epyc-direction | horizontal | horizontal / vertical | Changes the movement axis of the slider. |

Important Note: To set the direction to vertical, you will also have to specify a fixed height for the swiper element.

Change the number of Visible Slides at a time (The default is AUTO now)

By default, the slider will show 1 slide at a time. To change the number of visible slides at a time, you can use the epyc-slides-per-view attribute.

This attribute is useful for creating carousels or galleries where you want to show multiple items at once.

Setting the value of this attribute to 'auto', the code will automatically determine the number of slides based on the size of the slider container and the size of each slide.

| Attribute Name | Default Value | Possible Values | Description | | ------------------------------ | ----------------- | ------------------- | -------------------------------------------------------------------------------- | | epyc-slides-per-view | auto | auto / number | Changes the number of visible slides for all breakpoints | | epyc-slides-per-view-desktop | auto | auto / number | Changes the number of visible slides for the desktop (screen width >= 992px) | | epyc-slides-per-view-tablet | auto | auto / number | Changes the number of visible slides for the tablet(screen width >= 768px) | | epyc-slides-per-view-landscape | auto | auto / number | Changes the number of visible slides for mobile landscape(screen width >= 479px) |

Change the space between the Slides

To change the space between slides, set the epyc-space-between attribute. Settings its value to a number like 24, which will keep a 24-pixel gap between two adjacent slides.

You can also define other spacing values like % and em to define the space. 32, 2em, 4% all are valid values of this attribute.

You can set this property for different breakpoints by using breakpoint-specific attributes:

epyc-space-between-<breakpoint> (Replace with desktop, tablet, landscape, or portrait) attribute.

| Attribute Name | Default Value | Possible Values | Description | | ---------------------------- | ----------------- | ------------------- | ---------------------------------------------------------------------------- | | epyc-space-between | 0 | number | Changes the space between slides for all breakpoints | | epyc-space-between-desktop | 0 | number | Changes the space between slides for the desktop (screen width >= 992px) | | epyc-space-between-tablet | 0 | number | Changes the space between slides for the tablet(screen width >= 768px) | | epyc-space-between-landscape | 0 | number | Changes the space between slides for mobile landscape(screen width >= 479px) |

Change the speed of the Slider transition

To change the speed of the slider transition, set the epyc-speed attribute to the desired duration in milliseconds. The default value is 300.

Change autoplay settings

To change the Slider's autoplay behaviour, set the epyc-autoplay attribute to true.

This will make the slider autoplay each 3-second interval and will rewind to the starting on reaching the end by default. If you want to modify the details of autoplay you can do so by changing the following attributes:

| Attribute Name | Default Value | Possible Values | Description | | ------------------------------------ | ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | epyc-autoplay-delay | 3000 | number | The delay between transitions (in ms). If this parameter is not specified, auto-play will be disabled | | epyc-autoplay-reverse-direction | false | true / false | Enables autoplay in the reverse direction | | epyc-autoplay-disable-on-interaction | false | true / false | Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after the interaction | | epyc-autoplay-pause-on-mouse-enter | true | true / false | When enabled autoplay will be paused on the pointer (mouse) enter over the Swiper container. | | epyc-autoplay-stop-on-last-slide | false | true / false | Enable this parameter and autoplay will be stopped when it reaches the last slide (has no effect in loop mode) |

Note: Autoplay is enabled by default. To disable it, set epyc-autoplay attribute to false.

Control the Sliders with the Keyboard

To enable keyboard navigation, set the epyc-keyboard attribute to true. This will allow you to use your keyboard arrow keys to navigate between slides.

Move more than 1 Slide at once

To move more than one slide at once, set the epyc-slides-per-group attribute. Settings its value to a number 3 will make your slider move 3 slides at once.

You can set this property for different breakpoints by using breakpoint-specific attributes:

epyc-slides-per-group-<breakpoint> (Replace with desktop, tablet, landscape, or portrait) attribute.

| Attribute Name | Default Value | Possible Values | Description | | ------------------------------- | ----------------- | ------------------- | ------------------------------------------------------------------------------------------- | | epyc-slides-per-group | 1 | auto / number | Changes the number of slides that move together for all breakpoints | | epyc-slides-per-group-desktop | 1 | auto / number | Changes the number of slides that move together for the desktop (screen width >= 992px) | | epyc-slides-per-group-tablet | 1 | auto / number | Changes the number of slides that move together for the tablet(screen width >= 768px) | | epyc-slides-per-group-landscape | 1 | auto / number | Changes the number of slides that move together for mobile landscape(screen width >= 479px) |

Scroll the Slider using the Mouse Wheel

Yes, that is indeed possible. To enable mouse wheel navigation, set the epyc-mousewheel attribute to true. This will allow you to use your mouse scroll wheel to navigate between slides.

Make the slides move freely

To enable free mode, set the epyc-free-mode attribute to true. This will allow you to swipe and scroll freely between slides, instead of being restricted to the defined slide positions.

This is useful when you want to make your slider more intuitive on mobile devices.

Make an infinite loop of slides in your slider

To enable an infinite loop, set the epyc-loop attribute to true. This will make the slider continuously loop through the slides, starting over at the beginning once it reaches the end.

Make the Slider start from the First slide after completion.

To enable rewind, set the epyc-rewind attribute to true. This will allow the slider to jump to the first slide once it reaches the end.

Please note that this is different from epyc-loop property. When you enable epyc-loop the user won't be able to see the slide jumping, instead the first slide get automatically added to the next position giving the effect of continuous loop.

Auto set Slider's height to match the height of the current Slide

Yes, you can pass in the custom attribute epyc-auto-height with the value of true. Now the slider will change its height to match the height of the current slide.

Special Effects

Apply effects to Slide Transitions

There are several available effects that can be used to transition between slides, including slide (the default), fade, cube, coverflow,flip and cards . You can set the desired effect using the epyc-effect attribute.

Note: The fade , cube , flip and cards effects work only when there is just 1 slide in view.

Coverflow

| Attribute Name | Default Value | Possible Values | Description | | ----------------------------------- | ----------------- | ------------------- | -------------------------------------------------------- | | epyc-coverflow-effect-depth | 100 | number | Changes the depth of the non-active slide in the z-axis. | | epyc-coverflow-effect-modifier | 1 | number | Changes the effect multiplier | | epyc-coverflow-effect-rotate | 50 | number | Changes the rotation of slide in degrees | | epyc-coverflow-effect-scale | 1 | number | Changes the scale of the slide | | epyc-coverflow-effect-slide-shadows | true | true / false | Toggles slide shadows | | epyc-coverflow-effect-stretch | 0 | number | Stretch space between slides (in px) |

Fade

| Attribute Name | Default Value | Possible Values | Description | | --------------------------- | ----------------- | ------------------- | --------------------------------------------------------------- | | epyc-fade-effect-cross-fade | true | truel / false | Changes the visiblitiy of the slides beneath the current slide. |

Flip

| Attribute Name | Default Value | Possible Values | Description | | ------------------------------- | ----------------- | ------------------- | -------------------------- | | epyc-flip-effect-limit-rotation | true | true / false | Limit edge slides rotation | | epyc-flip-effect-slide-shadows | true | true / false | Toggles slide shadows |

Cube

| Attribute Name | Default Value | Possible Values | Description | | ------------------------------ | ----------------- | ------------------- | --------------------------- | | epyc-cube-effect-shadow | true | true / false | Toggles main slider shadows | | epyc-cube-effect-shadow-offset | 20 | number | Main shadow offset (in px) | | epyc-cube-effect-shadow-scale | 0.94 | number | Main shadow scale ratio | | epyc-cube-effect-slide-shadows | true | true / false | Toggles slide shadows |

Cards

| Attribute Name | Default Value | Possible Values | Description | | ---------------------------------- | ----------------- | ------------------- | ----------------------------------- | | epyc-cards-effect-per-slide-offset | 8 | number | Offset distance per slide (in px) | | epyc-cards-effect-per-slide-rotate | 2 | number | Rotate angle per slide (in degrees) | | epyc-cards-effect-rotate | true | true / false | Toggles cards rotation | | epyc-cards-effect-slide-shadows | true | true / false | Toggles slide shadows |

Linking two Sliders together

Sync two sliders (two way linking)

Two sliders on the same page can be synced with each other so that any change in one of them triggers the same change in the other and vice versa.

1. Create two sliders on the same page.
2. Give the first slider the custom attribute of epyc-slider-link and give it a value.
3. Add the same attribute with the same value on the second slider as well.
4. You're done! The two sliders are now synced with each other.

Note: To prevent unexpected behaviours with autoplay, only enable autoplay on one of the sliders.

What next?

As you see it is really easy to integrate Swiper into your website or app. So here are your next steps:

- To know more about Swiper, you can visit its website.

- Look at available Demos of what you can create in Webflow using Swiper.

- If you have questions about Swiper ask them in our GitHub discussions.

- Create an issue on GitHub if you found a bug or would like to suggest any improvements.