Html Question posted in
Some basic documentation can be found here.

Html – how can i use swiperjs to make the arrows work as intended

I am trying to make a website using html,css and js, and i try using swiperjs to make the arrows work but i cant seem to catch it. From what i tried, i can make the "Sports" movable from left to right or vice-versa, but i cant make the arrows look the same. The sports needs to be seen 3 on the screen, and another number added so that when you press right for example, it will show the next sport.

I am expecting to make the arrows work as intented, and still look how i want them to look.
what i triedhow i want them to look

Tags:

2

Answers


  1. 0

    You can place your arrows anywhere and style them how you like, you will just need to connect them to your slider like this:

    const swiper = new Swiper(".swiper", {
  navigation: {
    prevEl: ".my-prev-arrow",
    nextEl: ".my-next-arrow",
  }
});

    See docs for more information and examples.

    Login or Signup to reply.
  2. 0

    To make the arrows work as intended with SwiperJS, you typically need to configure SwiperJS to enable navigation controls, including the arrow buttons. Here’s a basic example of how you can achieve this:

    First, make sure you have included the necessary SwiperJS library files in your project.

    Create HTML markup for your swiper container and arrow buttons:

    The .swiper-button-next and .swiper-button-prev classes are used for the next and previous arrow buttons, respectively.
    SwiperJS automatically adds event listeners to these elements to handle navigation when clicked.
    Ensure that the SwiperJS script is included in your HTML file before your custom JavaScript code.
    With these steps, SwiperJS should now be configured to use the arrow buttons for navigation. You can customize the appearance and behavior of the arrow buttons using CSS and SwiperJS configuration options as needed.

    Let me know if you need further clarification or assistance!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search