Integrate Swiper on Blocs

Hi, developers out there knows how to integrate this on Blocs: https://swiperjs.com/get-started/

I want to add a Card Brick slider :slight_smile:

Hey @mackyangeles,

Do you want a Custom Bric made, or the steps in setting it up with the code bric?

1 Like

Any will do :slight_smile:

If I recall right from a previous post you wanted to put a card in the slider aye.

1 Like

Yes! Something like this slider :slight_smile:

Basically I need a Card Brick slider hehe :slight_smile:

So. just Nav dots on bottom?

1 Like

Yes :slight_smile:

1 Like

Just an idea. If ever an option with arrow would be helpful too :slight_smile:

1 Like

Here is a starter for you, using side arrows.

There is a little CSS in header (because the class manager does support those attributes). But the rest is all classes in the class manager.

Swiper_Example.bloc (1.4 MB)

2 Likes

It’s not opening on Blocs 3 hehe

Weird, its made in Blocs 3.4.4

1 Like

I just need to update my blocs hehe. Wait I’ll try to study it :slight_smile: I’ll get back to you! Thank you for your help!!! You’re awesome… I need some questions though :slight_smile:

1 Like

How to implement that dot instead hehe not arrow?

Just working on that. The sample code on that site puts the dots inside the slide, I need to make some adjustments to put it below. Give me a few.

1 Like

Ok, try this one. Has dots, auto play and stop on hover. You can disable that in the script in the footer if you want.

Swiper_Example_Dots_Auto.bloc (1.4 MB)

How about to add image? for example I don’t want to use the icon i want to use my own SVG file.

Just add into the code what ever you want.

Eg. remove the span with the font icon and place the code for your svg.

Each slide looks like this…

 <!-- Slide Item START -->
      <div class="swiper-slide">
      	<div class="card">
      		<div class="card-body">
      			<span class="icon"><i class="fa fa-question-circle"></i></span>
      			<h3>Title Text Here</h3>
      			<p>Here is some content specifically for this card. Each card will have different content and icon design</p>
      		</div>
      	</div>
      </div>
<!-- Slide Item END -->

There are a ton of options you can add to the script in the footer too, all on this page…

1 Like

Help me hehe I can’t figure it out how to use my own svg file hehe