Skip to main content
Breakdance4fun Logo

Supa Swiper - A minimal less bloated slider element for Breakdance

SUPA Swiper appears to be a simple slider, yet it packs several advantages:

  • Employs a modern Web Component architecture.
  • Generates far fewer container elements (divs) than Basic or Advanced Sliders.
  • Loads faster and is easier to configure—perfect for straightforward sliders.
  • Lets you fine-tune or extend behavior with additional attributes—no extra JavaScript required.

Available in the free plugin Asset4Breakdance.

Table Of Contents

A Web Component with fewer containers

All the slider elements (Basic Slider, Advanced Slider, Gallery...) have tons of options. Which is great but 90% of the time, we just need a simple slider.

For comparison, here’s the HTML structure of the Basic Slider with default options:

Basic slider html

The Supa Swiper element contains the bare minimum, no extra containers.

Supa swiper html

Get Started in Seconds

Flip the switches you need, everything essential is one click away. The defaults cover 90% of typical sliders.

Supa swiper optionsSupa swiper design

Add Any Swiper Feature via Attributes

All Swiper parameters are available as kebab-case attributes on the <swiper-container> element (more info: https://swiperjs.com/element#parameters-as-attributes ).

This means any parameter not listed in the options panel can still be applied by adding it as an attribute.

For example, there is no option to enable the 'mousewheel' parameter. No problem, we simply add it as an attribute:

Supa swiper mousewheel
The next example shows how to turn a slider into a 3D cube. The traditional method is straightforward:
const swiper = new Swiper('.swiper', {
effect: 'coverflow',
coverflowEffect: {
rotate: 30,
slideShadows: false,
},
});

The web component method uses the attributes:

<swiper-container effect="cube" coverflow-effect-rotate="30" coverflow-effect-slide-shadows="false">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
...
</swiper-container>

This means that in Breakdance or Oxygen 6 we can add it ourselves, no extra JavaScript required.

Supa swiper coverflow
Oxygen Builder and Breakdance Builder illustrated characters showcasing dance and web design talents in urban streetwear, promoting creativity and web development skills.Breakdance4Fun illustrated women wearing trendy sportswear with "Breakdance Builder" and "Oxygen Builder" logos, showcasing urban dance culture and street style fashion.Dynamic breakdance pose featuring urban dancers emphasizing breakdancing skills and street dance culture for fitness and fun.Breakdance competition dance battle hip hop street dance dancers energetic urban style.Breakdance, hip-hop dance, sneakers, street dance, urban dance, breakdancing illustration, dance culture, streetwear style, youth fashion, breakdance choreography.Vibrant illustration of two superheroes with muscular builds, wearing capes and superhero T-shirts labeled "BREAKDANCE BUILDER" and "OXYGEN BUILDER," engaging in a fist bump showcasing unity and strength in breakdancing culture.

More Cool Features

That’s not all, here are a couple more features that make it unique.

Oxygen Builder and Breakdance Builder illustrated characters showcasing dance and web design talents in urban streetwear, promoting creativity and web development skills.Breakdance4Fun illustrated women wearing trendy sportswear with "Breakdance Builder" and "Oxygen Builder" logos, showcasing urban dance culture and street style fashion.Dynamic breakdance pose featuring urban dancers emphasizing breakdancing skills and street dance culture for fitness and fun.

Vertical Slider

Unlike the built-in sliders, this one allows you to set the slider as a vertical slider (a fixed height or aspect ratio needs to be configured in the options).

Hip-hop fashion female model wearing colorful streetwear with "Supa Style" graphic t-shirt, jewelry, and vibrant accessories for urban dance culture and breakdancing style inspiration.Bright young woman in trendy graphic t-shirt and stylish jewelry, showcasing urban streetwear fashion for breakdance and urban dance culture, on a plain white background.Bright colorful streetwear fashion featuring a young woman in a vibrant "SUPA STYLE" t-shirt and distressed denim shorts, showcasing urban style and dance culture.Stylish young woman wearing urban streetwear, black bomber jacket with "Supa" patches, orange graphic T-shirt with "SUPA STYLE" print, and distressed jeans, posing confidently for fashion photography.Vibrant red-haired woman wearing a trendy white crop top with "SUPA STYLE" text and blue jeans, showcasing urban streetwear fashion, against a plain white background.Colorful streetwear fashion with a woman wearing a vibrant jacket, crop top, and high-waisted jeans, showcasing urban style and bold fashion statements.Bright red-haired woman wearing a colorful tie-dye "SUPA STYLE" t-shirt, distressed jeans, and layered jewelry, posing confidently against a plain white background.Bold young woman modeling streetwear with "SUPA STYLE" graphic t-shirt, high-waisted jeans, and trendy accessories on a white background, representing urban fashion and dance culture.Bright young woman wearing a colorful "SUPA STYLE" t-shirt showcasing streetwear fashion, casual style, and vibrant colors, standing in front of a plain white background for a modern, trendy look.

Breakpoint control

Manually set your own breakpoint to change the Slide-per-view parameter.

Supa swiper custom breakpoint

Note

In the backend, when you set or change certain properties, the changes are applied in real time. However, this doesn’t always work correctly, as it doesn’t use any JavaScript to initialize the preview. Always check the frontend to ensure the changes are reflected properly.