How do I build a slider?

Questions
1

Hey, I want to build a slider on my site. Just a simple carousel with images. How could I do this?

2

Unfortunately, the current version of Divhunt does not have native support for this particular feature. However, it is possible to implement it through custom code using a JavaScript library such as Swiper. With Swiper, you have the flexibility to create a wide range of designs in just a few steps. I’ve provided an example below to demonstrate how you can utilize Swiper JS to achieve this feature.

Step 1: Add Swiper CSS and JavaScript files to your project

Include the Swiper CSS and JavaScript CDN files in your project.

Copy code below

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

Go to Custom Code inside of your admin panel and paste it in HEAD END like on screenshow below

image
image889Ă—269 14.8 KB

Step 2: Create proper layers structure on a place where you need a slider

This is how you should organize your layers (div’s):

In example below you will see that we are using div for Swiper, Swiper Wrapper & Swiper Slide. And what is inside of Swiper Slide is not that relevant, thats on you.
As you can see on this example, Swiper Slide is looped 5 times (x5), which means we have 5 exact looking slides, just with a different content.

image

Step 3: Set correct classes on your layers.

  1. Layer named “Swiper” should have a class swiper
  2. Layer named “Swiper Wrapper” should have a class swiper-wrapper
  3. Layer named “Swiper Slide” should have a class swiper-slide
  4. Set one more UNIQUE class on your “Swiper” div. This class will be used inside of our JavaScript in step 5. You can name this class in any way you like, for this example lets name it features-swiper

Step 4: Create a file for your JS Code.

Go to files tab on left side of your builder and create a folder (if you already dont have one). For example, lets name it “Swipers”.

image

Now lets create a file inside of that folder. Click right click on Swipers folder and click Create File.

image

Lets name it feautres-swiper.js.

image

Now when we have our file created, click right click on file, and set event to onPageReady.

image

Step 5: Add JS Code.

You can find a lot of examples on swiperJS demos page, and also you can find some more advanced options on their API page.

In example below you can see we are calling Swiper to work on our features-swiper class which we created in step 3. And then we are telling it what to do. In this example we used only basic features of Swiper such as slidesPerView, spaceBetween and breakpoints.

If you use the same code as below, you will get a slider that has 20px gaps between slides and it has different number of slides per resolution.

  • Resolutions 0 to 767px will show 1.25 slides per view
  • Resolutions 768 to 990px will show 2 slides per view
  • And resolutions higher than 991px will show 3 slides per view
let features_swiper = new Swiper(".features-swiper", {
    slidesPerView: 3,
    spaceBetween: 20,
    breakpoints: {
        0: {
            slidesPerView: 1.25,
        },
        768: {
            slidesPerView: 2,
        },
        991: {
            slidesPerView: 4,
        },
    },
});

Open features-swiper.js file that we created in step 4 and paste code there and click save. Now you can close custom code and thats it!

image
image1095Ă—332 13 KB

3 Likes
3

Is the cdn automatically included, or should I visit swiper documentation to fetch the cdn before I am able to implement it? Also, in case it is already automatically integrated into Divhunt, is it possible to work with it without using their stylesheet?

4

Its not already included in Divhunt. We dont want to load libraries that most people dont use. You need to manually add it in head file of your project, just like in Step 1.

2 Likes