Integrate Swiper on Blocs

I Need Help
1

Hi, developers out there knows how to integrate this on Blocs: Getting Started With Swiper

I want to add a Card Brick slider :slight_smile:

2

Hey @mackyangeles,

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

1 Like
3

Any will do :slight_smile:

4

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

1 Like
5

Yes! Something like this slider :slight_smile:

sample
sample.jpg1700×1000 112 KB

6

Basically I need a Card Brick slider hehe :slight_smile:

7

So. just Nav dots on bottom?

1 Like
8

Yes :slight_smile:

1 Like
9

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

1 Like
10

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
11

It’s not opening on Blocs 3 hehe

12

Weird, its made in Blocs 3.4.4

1 Like
13

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
14

How to implement that dot instead hehe not arrow?

15

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
16

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)

17

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

18

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 -->
19

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

https://swiperjs.com/api/

1 Like
20

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