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

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

javascripthtmlcss

Inserting blocks of text into a MySQL database

I'm hoping to insert text segments into a MySQL database. Below is an excerpt of my HTML code: <div class="margins3"> <h1>Meal Plan...</h1> <div id='results-container'> <div class='LeanMuscle ...

javascriptphphtmlmysqldatabase

React-bootstrap's Modal is glitching and only partially appearing on the screen

I am a beginner in frontend development and I've been struggling to position the modal at the center of the screen; it keeps appearing on the right side. I am currently using "bootstrap/dist/css/bootstrap.min.css" for my CSS. Should I create a new CSS ...

htmlcssreactjs

Unusual display of fonts on Chrome

Recently, I encountered a strange issue with font rendering on Chrome/Opera compared to Firefox. The problem can be seen in the preview below - pay attention to the pink text. It appears blurry initially but sharpens once text input is focused. This same i ...

cssgoogle-chromefontsfont-faceopera

Skipping the validation of a variable in a return statement with Angular and Javascript

Is there a way to exclude level a.3 from the return in the completion form if a.3 is undefined? scope.isValid = function() { return a.1 && a.2 && a.3; }; ng-disabled="!isValid()" ...

javascriptangularjsangular-material

What is the best way to remove excess content that falls outside the viewBox?

Is there a function or method to trim a path that extends beyond the viewbox rather than simply concealing it? I am currently using svg-edit, which has a specific viewbox or canvas area. Any elements drawn outside of this canvas remain hidden. However, wh ...

javascripthtmlsvgjquery-svgsvg-edit

axios.get consistently delivers a Promise of type <Pending>

I have been searching for a solution to my issue, but so far none of the suggestions have worked for me. Below is the code that I am struggling with: const Element = () => { async function getEndData() { const data = (await getEnd()) ...

javascripttypescriptaxios

methods for sorting firestore data in react on client side

Fetching data from firestore and applying filters const [projects, setProjects] = useState([]); const fetchData = (sortBy = "NAME_ASC") => { const unsubscribe = firebase .firestore() .collection("projects") ...

javascriptreactjsfirebasegoogle-cloud-firestore

Error: The program encountered a TypeError because it was unable to read the property 'top' of an undefined element when attempting to click the send

I have been searching for solutions, but none seem to match the requirements of my code. My website has various categories. I encountered an issue while attempting to add a new ad post here. form.find('.info-tooltip-container').addClass(&ap ...

javascriptjquery

struggling to adjust image dimensions using bootstrap styling

Currently, I am in the process of creating a Carousel image slider using bootstrap. However, I am facing an issue with changing the height of the images within the carousel. Whenever I try to adjust the height, it ends up affecting both the width and heigh ...

htmlcssbootstrap-4

Instead of using setTimeout in useEffect to wait for props, opt for an alternative

Looking for a more efficient alternative to using setTimeout in conjunction with props and the useEffect() hook. Currently, the code is functional: const sessionCookie = getCookie('_session'); const { verifiedEmail } = props.credentials; const [l ...

javascriptreactjs

What is the best way to have a div created by JavaScript automatically expand to cover the entire screen after clicking on a dynamically generated table cell?

A unique interactive game inspired by Jeopardy is in the works. By clicking on a specific element within the game board, players can reveal questions fetched from the Jeopardy API. These questions are then presented elegantly within a dynamically created d ...

javascripthtmlcss

Emphasize the engaged menu selection when the page is refreshed

My application is a dashboard app built with React, Redux, and Antdesign. I utilized the layout provided by Ant design at https://ant.design/components/layout/. One issue I encountered is that when clicking on side menus, the active menu gets bold but upo ...

javascriptreactjsreduxantd

Showing real-time information from an object

I am attempting to showcase the 'helpText' data on the front end based on the type. Is it feasible to include a conditional statement (metricsType variable) and the [key] value into what I want to return? The final 'p' below provides an ...

javascriptreactjs

When employing useNavigation, the URL is updated but the component does not render or appear on the

Check out this code snippet: https://codesandbox.io/p/sandbox/hardcore-lake-mptzw3 App.jsx: import ContextProvider from "./provider/contextProvider"; import Routes from "./routes"; function App() { console.log("Inside App" ...

javascriptreactjsreact-router-dom

What is the best way to assign a class to every cell in a table that has a specific string?

Currently, I am facing a challenge with a data visualizer project assigned to me by the company that recently hired me. The task involves extracting information from a MySQL database using PHP and integrating it into an HTML-CSS table. In this table, four ...

phphtmlstringhtml-table

JS-generated elements do not automatically wrap to the next line

For my first project, I've been working on a to-do list and encountered an issue. When I create a new div with user input, I expect it to start on a new line but it remains stuck on the same line. Can anyone point out where I might have gone wrong? I ...

javascripthtmlcss

Cannot locate element using React Testing Library with the selector: [data-testid="task"]

I've encountered an issue while testing a Task component that should be rendered after submitting a form. I'm utilizing redux-toolkit, but despite setting data-testid="task" for the Task component, it doesn't appear in the test DOM ...

javascriptreactjsreact-reduxreact-testing-libraryredux-toolkit

Difficulty in pinpointing hyperlinks within a styled list

My current challenge involves customizing the color of links within the <li> elements by applying specific classes to the <li> tag. The structure of my HTML is as follows: <div id="sidebar_tall"> <ul> <li class="active_item"> ...

htmlcss

angular-recaptcha: Adjusting language based on the website's language update

My website offers three different languages that users can switch between. The language switch functionality is implemented on the client side using JavaScript (AngularJS). I have integrated reCAPTCHA 2 into my website and now I need to update the languag ...

javascriptangularjstranslationrecaptcha