The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

I am having an issue with the pagination display in the text. I would like it to appear below the text as a standalone item for better visibility.

Another problem arises when viewing the page on mobile devices - the hamburger menu displays behind the slider, but I want it to be in front of the slider.

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1'>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">

    <link rel="stylesheet" href="swiper.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type='text/javascript'>
        $(document).ready(function(){
            $('.menu-toggle').click(function(){
                $('.site-nav').toggleClass('site-nav--open');
                $(this).toggleClass('open');
            })
        })
    </script>

</head>
<body>
    <header>
    <div class="container">
        <div class="logo">
            <ul>
                <li><a href="#">SakaHapa</a></li>
            </ul>
        </div>

        <nav class="site-nav">
            <ul>
                <li><a href="#"><i class="fa fa-home site-nav--icon"></i>HOME</a></li>
                <li><a href="#"><i class="fa fa-question-circle-o site-nav--icon"></i>HOW IT WORKS</a></li>
                <li><a href="#"><i class="fa fa-user-circle site-nav--icon"></i>PROFILE</a></li>
                <li><a href="#"><i class="fa fa-cart-plus site-nav--icon"></i>PURCHASES</a></li>
                <li><a href="#"><i class="fa fa-eye site-nav--icon"></i>POPULAR</a></li>
                <li><a href="#"><i class="fa fa-envelope site-nav--icon"></i>CONTACT</a></li>
                <li><a href="#"><i class="fa fa-power-off site-nav--icon"></i>Log Out</a></li>
            </ul> 
        </nav>
        <div class="menu-toggle">
            <div class="hamburger"></div>
        </div>
    </div>
    </header>


    <div class="container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-text">
                        <h2>Slide man</h2>
                        <p>Lorem Ipsum ...

Some CSS styling:

body{
    background: #F0F8EA;
    font-family: sans-serif;
}
.container{
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
}
...

If you can provide assistance with these issues, it would be greatly appreciated.

javascripthtmlcssswiper.js

Answer №1

To ensure proper functionality, don't forget to add these lines before initializing your slider:

const slider = this.slider;
slider.destroyLoop();
slider.createLoop();

Here is a sample snippet:

const slider = this.slider;
slider.destroyLoop();
slider.createLoop();

var slider = new Slider('.slider-container', { 
    slidesToShow: 'auto',
    pagination: {
        el: '.slider-pagination',
        clickable: true,
    },
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing data in Angular service for future use

My ui-grid is functioning correctly, utilizing server side pagination with a view button to display row details on a separate page. However, upon returning to the grid after viewing details, it defaults back to displaying the first page. I would like it to ...

javascriptangularjsangular-ui-grid

Personalize Tooltip on Highchart Area Chart

I am currently in the process of customizing the tooltip for my area chart using Highchart. Within this area chart, I have plotted 3 series. My goal is to display the tooltip at a fixed location on the chart's top center. When hovering over any point ...

javascriptchartshighcharts

Loading images dynamically in ReactJS allows for a seamless and customized user experience

I've been trying to dynamically fetch images from my images folder based on data retrieved from the database. Despite searching through numerous resources, I'm still struggling to crack this issue. Check out my code snippet below: import sword fr ...

javascriptreactjs

Managing the height of a hero section with TailwindCSS and React.js

Embarking on my first website project using React and Tailwind has been an exciting learning experience. My vision is to showcase a Hero Section prominently at the top, with a Nav bar situated elegantly at the bottom of the screen. To bring this concept ...

htmlcsstailwind-css

How can I use jQuery to locate all elements that match a specific style within the DOM?

Similar Question: How can I target hidden elements? Selecting multiple elements with CSS display:none property <div class="container"> <p style="display:none">I am hidden</p> <p>I am visible</p> <p>I am also ...

javascriptjqueryhtml

Failing to verify the presence of specific text within a dropdown menu using Selenium

Previously, I successfully implemented this code, however, the HTML/CSS for the dropdown has since changed and now I am unable to get it to function correctly. Below is the structure for the dropdown code, with specific text highlighted that I am trying t ...

javascripthtmlcssseleniumselenium-webdriver

Troubleshooting node modules for browser compatibility

Looking for assistance with running a specific node module in a browser. The module in question is called fury.js. I attempted to use browserify, however, encountered an error stating "ReferenceError: fury is not defined" when trying to utilize it. In th ...

javascriptnode.jsbrowserify

Obtaining Position Coordinates of an Element Linked to an Object in AngularJS $scope

Imagine a website with a left column containing filters like checkboxes and text fields. The main column displays items that are filtered based on the values provided in the left column. When a user changes a value in the filter column, a small floating el ...

javascriptjqueryangularjs

Upon registration, the user's information is successfully stored in the mongoDB database, even if the selected "username" is already in

I am currently working on a web application using the MERN stack. When registering a user with an existing email either through Postman or the front-end form, the user is not added to the database. The same logic is applied to check if the chosen username ...

javascriptreactjsmongodbmongoose

JavaScript and DOM element removal: Even after the element is removed visually, it still remains in the traversal

Our goal is to enable users to drag and drop items from a source list on the left to a destination list on the right, where they can add or remove items. The changes made to the list on the right are saved automatically. However, we are encountering an iss ...

javascriptjqueryjsondom

The div above the footer seems to be interfering with the styling of the footer. Is there a solution to

I am currently working on implementing a Help functionality for our users. In order to do this, I have placed a div right above my footer. However, I am facing an issue where the styling of my div is affecting the footer in ways that I cannot figure out. ...

htmlcssdom

Understanding Aspect Ratios in CSS for Div Containers and their Components

I am crafting an HTML5 game without the use of canvas and aiming to maintain a 16:9 aspect ratio within my div. Thanks to javascript, achieving this is straightforward and it functions flawlessly. However, the elements inside the div occasionally appear to ...

javascriptcsshtml

Error functions in Angular HTTP Interceptor are not being triggered

I followed the example code for an interceptor from the Angular HTTP documentation, but I am having trouble getting the "requestError" and "responseError" functions to trigger. The "request" and "response" functions are working as expected. myApp.config([ ...

javascriptangularjshttpexpress

Is it possible to load the surrounding markup in Angular before the guards are resolved upon the initial load of the router-outlet?

Within our Angular 12 application, we have implemented guards that conduct checks through API calls to the backend in order to validate the user's permissions for accessing the requested route. The default behavior of these guards follows an all-or-no ...

htmlangularangular-ui-routerrouterrouter-outlet

The IP validation feature in the textbox is not performing as anticipated

My goal is to have a textbox that receives an IP address and validates it before submission. To achieve this, I've developed a JavaScript class called `validityCheck`. In my main Vue.js component, I aim to utilize this class to validate the input&apo ...

javascriptvue.js

Exploring each item within oData: A guide

After writing the code statement above, I am able to see the attached image. Now, my challenge is accessing the "label" property inside each object. How can I iterate through these objects and retrieve their "label" properties? item.getModel().oData; I a ...

javascriptjqueryloopsobjecteach

Renew the php blade foreach loop using jQuery to update data live

I have a foreach cycle in my HTML, and at one point, some data is posted from JavaScript. I would like to append it once it is added to the database. I need to find a way to refresh the foreach loop without reloading the entire page (I could simply use ap ...

javascriptphpjqueryforeach

Strategies for setting up the runtime dynamically for Nextjs API routes

After deploying my Next.js 13 app on Cloudflare Pages, I encountered an issue with the API routes. To address this, I had to export the runtime variable from each route in the following manner. export const runtime = "edge" During local developm ...

javascriptnext.jscloudflareedge-runtime

When using Sequelize, I encountered an error message from SQLite stating that the table does not exist despite having created

I am struggling to grasp the concept of how Sequelize operates and I can't figure out why I am encountering the SQLITE_ERROR: no such table: Users error even though I have created the table using sequelize.define. Here is my code: const { Sequelize, D ...

javascriptnode.jsdatabasesqlitesequelize.js

Styling the `mat-hint` in Angular Material for large blocks of text

Currently, I am undertaking a project in Angular 9 and utilizing Material design. If you want to view a demo of my work, you can find it here: https://stackblitz.com/edit/mat-hint-styling-issue?file=src/app/app.component.html In my project, I am using in ...

cssangularsassangular-materialangular9