I enabled swiper for the page that I am building and I have the following settings for it:

  const swiper3 = new Swiper('.ingredients-swiper', {
    grabCursor: true,
    direction: 'horizontal', 

    pagination: {
      el: '.swiper-pagination',
    },

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });

These are basically the default settings that I have copy/pasted from the get started page of Swiper.

The problem is that the pagination controls and arrows are nowhere to be found.

Arrows have display: none and pagination is set to the bottom, but the bottom of the screen, and not the bottom of the slides.

A live preview can be seen here:

https://www.bangcookies.com/pages/ingredients?preview_theme_id=120521556066

I have followed the structure as described in the documentation:

<div class="ingredients-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    ...restofslides...
  </div>
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>