The Swiper slider is unable to display several views at once in the slider layout

I recently started using the amazing swiper slider plugin available here

My goal is to replicate the demo-no-210 from that repository.

Here is the code snippet I am working with:

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/app.css">

   <!-- Styles for swiper slider -->

home.html

<div>
 <div class="swiper-container">
       <!-- Swiper content goes here -->
    </div>

</div>

Despite my efforts, I am currently facing an issue where only the first slide is being displayed and the navigation arrows are not functional. The outcome I am experiencing is as shown in this https://i.sstatic.net/6v6UO.png

My ultimate goal is to achieve a layout with multiple sliders similar to what is depicted https://i.sstatic.net/Uimra.png

Any suggestions or insights on what might be causing this problem?

javascriptjqueryhtmlcssangularjs

Answer №1

Make sure to keep your JavaScript code below your HTML code. Moving your HTML above the JavaScript can cause issues. The code below functions correctly unless the order is changed.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
        <link rel="stylesheet" href="css/app.css">

        <style>
            .swiper-container {
                width: 100%;
                height: 100%;
            }

            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                /* width: 50px; */
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }
        </style>
        <title>xyz</title>
    </head>
    <body>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>


        <script src="bower_components/jquery/dist/jquery.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>

            <!-- Initialize Swiper -->
        <script>
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 4,
                spaceBetween: 30,
                slidesPerGroup: 4,
                loop: true,
                loopFillGroupWithBlank: false,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        </script>

    </body>

</html>

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

How can I access the parent function within module.exports?

Hello, I am having issues with this code because I am unable to access checkIf in order to set its property LengthIs. When I log whether this is equal to module.exports, it returns false. Upon further inspection, I also checked what this was and it retur ...

javascriptnode.js

the navigate feature is not redirecting to the intended page as expected

I am currently working on a React application and facing an issue with configuring the navigation. The problem lies in the code of the Navbar component, where upon clicking the logout button, the authentication context should be cleared and the user should ...

javascriptreactjsreact-routerreact-router-dom

After running my CSS through the validator at http://www.css-validator.org/validator, I encountered a Parse Error. Any suggestions on how I can resolve this issue?

Here are the CSS codes for my media query section. @media (min-width:320px) and (max-width:575px){ .chakra{ width: 100%; float: unset; margin: auto; } } ...

css

Developing a responsive table with AngularJS and integrating it with a restful API

I am encountering an issue while trying to create a table using Quandl's RESTful API in conjunction with AngularJS. Despite successfully creating table headers, the rows remain empty without any data. Below is my controller: angular.module('sto ...

angularjsrestangularjs-ng-repeat

Stopping a build programmatically in Next.js involves implementing specific steps that aim to halt

Is there a method to programmatically halt the execution of npm run build in Next.js when a specific Error occurs within the getStaticProps function? Simply throwing an Error does not seem to stop the build process. ...

javascripttypescriptnext.js

Strategies for patiently waiting for an object to appear before loading the HTML

After logging into my service, I download data from a REST API, and based on that data, I display certain tabs. However, I am experiencing issues with loading the HTML content once the data has been retrieved. The ngif directive at the beginning of the H ...

htmlangulartypescript

Retrieving data using a class in an AJAX form submission

I am attempting to use AJAX to submit an HTML form. Here is my HTML: <form class="lyrics"> <input type="text" value="" id="song" name="song"> <button type="submit" class="btn btn-info lirik">lyrics</button> </form> ...

javascriptphpjqueryhtmlajax

Store various dropdown selections in an array

Questions are being generated from a database for users to answer using a drop-down menu. Upon selecting a specific option, a suggestion is added to an array triggering a JavaScript on-change event. Once all questions are answered, the array including all ...

javascriptphplaravel

Pass the JavaScript variable and redirect swiftly

One of the functionalities I am working on for my website involves allowing users to submit a single piece of information, such as their name. Once they input their name, it is sent to the server via a post request, and in return, a unique URL is generated ...

javascripthtmlexpressredirectweb

Calculate the total of an array with the help of the angular forEach function

function dialogController(generate, $scope) { $scope.profiles = generate.get_keys('::role'); $scope.content = {}; $scope.options = []; $scope.servers = {}; $scope.subs = {}; $scope.discountList = {}; $sco ...

javascriptangularjscontroller

The $http service encounters an error while attempting to retrieve a JSON file from the server

When attempting to fetch a file from the server, I utilize the $http service in the following manner: $http({url: url, method: "GET", withCredentials: true}); For some mysterious reason, an exception is only thrown when trying to retrieve JSON files from ...

javascriptangularjsjson

In Node.js, while running unit tests, the importing function is limited to read-only access

Having trouble mocking an async function in Jest? I followed the documentation and used mockResolvedValue, but encountered a read-only issue when trying to import my mock function from another file. Check out my code below: //index.js async function get ...

javascriptnode.jsaxiosjestjs

Styling Overlapping Divs with CSS3

I am attempting to replicate this particular effect using HTML within the UIWebView control on iOS. The desired outcome is to simulate a progress bar on the listing. My current approach involved utilizing this method, however, as you can observe, adding pa ...

cssoverlapping

Triggering a state in Reactjs from a different component: A step-by-step guide

Hey there, I could really use some assistance with this situation. Currently, I have a progress bar component and another component where I utilize the progress bar. Additionally, there is a third component that is meant to initiate the progress bar. Let ...

javascriptreactjsfrontendweb-frontend

Perform an additional HTTP request and utilize the response within the existing Observable

In my Angular 2 project, I am utilizing the http component to make API calls. The specific REST API I want to access returns a maximum of 100 Elements in one request. If more items exist, a hasMore flag is included in the response. To retrieve additional ...

javascriptangularrxjs

How can Selenium interact with various shadow DOM elements within a dropdown menu?

I am attempting to interact with a dropdown menu in order to track activity on the page when clicking on one of its items. Here is an overview of my HTML structure: <slot> #shadowroot <myoption-cmp> #shadowroot <some anchor te ...

javascriptjavaselenium

Send the appropriate data once the response has been completed

My Express.JS server has multiple res.json responses. In order to conduct statistics, logging, and debugging, I am looking to capture the response payload using a universal hook. While I have come across the finish event res.on('finish'), I am s ...

javascriptnode.jsexpress

What is the method or variable called "afterShow" used for in FancyBox V4 and how does it differ from its counterpart in JQuery-FancyBox V3?

We previously utilized the V3 edition of Fancybox, incorporating our increaseImageClicks and increaseVideoClicks functions within its afterShow function: /* FANCYBOX OLD (https://web.archive.org/web/20210325170940/https://fancyapps.com/fancybox/3/docs/): * ...

javascriptjqueryfancybox

Next.js App encounters a missing API route (The requested page is not found)

I have been working on a Next.js app and I created an api route for sending emails. Everything is functioning properly in my development environment. However, after deploying to production, I encountered a 404 error with the message "The page could not b ...

javascriptreactjsapinext.jsserver-side-rendering

Tips for transferring data between pages in VUE js using paths

I currently have two pages - an add page and an edit page. I am looking to transfer data from the edit page to the add page. When the save button is clicked in the edit page, it should redirect the user back to the add page with a URL of /test/admin/testin ...

javascriptvue.js