Configuring the Sliders

Index 1

Configuring Slider for Events Slider

You can edit the content of this slider in the html files and find the code & comment like this

<!-- ======================================================================= -->
<!--                         EVENT ONE SLIDER START                          -->
<!-- ======================================================================= -->

---- some code here ----

<!-- ======================================================================= -->
<!--                         EVENT ONE SLIDER END                            -->
<!-- ======================================================================= -->

You can easily replaced the image,text or anything there.

To modify settings such as delay or slider speed in this slider, you can make changes in the script.js file. Here is the full code:

/* EVENTS SLIDER IN INDEX-1 */
const event_one_slider = new Swiper(".event_one_slider", {
  speed: 800,
  loop: true,
  spaceBetween: 32,
  slidesPerView: 1,
  centeredSlides: false,
  autoplay: {
    delay: 6000,
    disableOnInteraction: false,
  },
  breakpoints: {
    767: {
      slidesPerView: 2,
      centeredSlides: false,
    },
    991: {
      slidesPerView: 3,
      centeredSlides: true,
    },
  },
  navigation: {
    nextEl: ".event_one_nav .next",
    prevEl: ".event_one_nav .prev",
  },
});

You can modify settings like delay or speed within the event_one_slider instance of the Swiper object in the script.js file as per your requirements.

---

Index 4 & Events Page

Events Two Slider

You can edit the content of this slider in the html files and find the code & comment like this

<!-- ======================================================================= -->
<!--                         EVENT TWO SLIDER START                          -->
<!-- ======================================================================= -->

---- some code here ----

<!-- ======================================================================= -->
<!--                         EVENT TWO SLIDER END                            -->
<!-- ======================================================================= -->

You can easily replaced the image,text or anything there.

To modify settings such as delay or slider speed in this slider, you can make changes in the script.js file. Here is the full code:

/* EVENT TWO SLIDER IN INDEX-4 */
const event_two_slider = new Swiper(".event_two_slider", {
  speed: 800,
  loop: true,
  spaceBetween: 32,
  slidesPerView: 1,
  centeredSlides: false,
  simulateTouch: false,

  autoplay: {
    delay: 6000,
    disableOnInteraction: false,
  },
  breakpoints: {
    767: {
      slidesPerView: 2,
    },
    991: {
      slidesPerView: 3,
    },
    1200: {
      slidesPerView: 4,
    },
  },
});

You can modify settings like delay or speed within the event_two_slider instance of the Swiper object in the script.js file as per your requirements.

---

Configuring Route Slider

You can edit the content of this slider in the html files and find the code & comment like this

<!-- ======================================================================= -->
<!--                           ROUTES SLIDER START                           -->
<!-- ======================================================================= -->

---- some code here ----

<!-- ======================================================================= -->

To modify settings such as delay or slider speed in this slider, you can make changes in the script.js file. Here is the full code:

/* ROUTES SLIDER IN INDEX-4  AND EVENTS PAGE */
const routes_slider = new Swiper(".routes_slider", {
  speed: 800,
  loop: true,
  spaceBetween: 32,
  slidesPerView: 1,
  centeredSlides: false,
  simulateTouch: true,

  autoplay: {
    delay: 8000,
    disableOnInteraction: false,
  },
  breakpoints: {
    767: {
      slidesPerView: 2,
    },
  },
  navigation: {
    nextEl: ".routes_nav .next",
    prevEl: ".routes_nav .prev",
  },
});

You can modify settings like delay, slidesPerView, or speed within the routes_slider instance of the Swiper object in the script.js file as per your requirements.

---

Testimonial Slider in Index 4 and Events page

You can edit the content of this slider in the html files and find the code & comment like this

<!-- ======================================================================= -->
<!--                        TESTIMONIAL SLIDER START                         -->
<!-- ======================================================================= -->

---- some code here ----

<!-- ======================================================================= -->
<!--                        TESTIMONIAL SLIDER END                           -->
<!-- ======================================================================= -->

To modify settings such as delay or slider speed in this slider, you can make changes in the script.js file. Here is the full code:

/* TESTIMONIAL SLIDER IN INDEX-4  AND EVENTS PAGE */
const testi_slide = new Swiper(".testi_slide", {
  speed: 800,
  loop: false,
  spaceBetween: 32,
  slidesPerView: 1,

  autoplay: {
    delay: 12000,
    disableOnInteraction: false,
  },
  breakpoints: {
    767: {
      slidesPerView: 2,
    },
    991: {
      slidesPerView: 3,
    },
  },
  pagination: {
    el: ".testi_pagination",
  },
});

You can modify settings like delay, slidesPerView, or speed within the testi_slide instance of the Swiper object in the script.js file as per your requirements.

---

Event Images slider in Single Event page

To modify settings such as delay or slider speed in this slider, you can make changes in the script.js file. Here is the full code:

/* EVENT SLIDER IN SINGLE EVENT PAGE  */
const event_gallery_slider = new Swiper(".event_gallery_slider", {
  speed: 800,
  loop: false,
  spaceBetween: 32,
  slidesPerView: 1,
  centeredSlides: true,
  autoplay: {
    delay: 12000,
    disableOnInteraction: false,
  },
  breakpoints: {
    767: {
      slidesPerView: 2,
    },
    991: {
      slidesPerView: 3,
    },
  },
  pagination: {
    el: ".testi_pagination",
  },
});

You can modify settings like delay, slidesPerView, or speed within the event_gallery_slider instance of the Swiper object in the script.js file as per your requirements.

To fully understand the features of these sliders that utilize Swiper.js, you can refer to the detailed documentation available at this page: Swiper.js Documentation.

The documentation provides comprehensive information about Swiper.js, including various options, methods, and examples that can help you utilize and customize the sliders according to your requirements.