upright scrolling mouse slider

In my project, I have implemented a vertical slider with mousewheel control using SwiperJS from https://swiperjs.com/. Although the slider is working perfectly fine, I am looking to fix the positions while scrolling on the page similar to the example provided in section four of this link: https://amernitech.com/dev/. Could you please share a sample demo for achieving this?

//html
  <!-- Swiper -->
    <div class="swiper mySwiper hide-tabview page" style="background:green;">
      <div class="swiper-wrapper ">
        <div class="swiper-slide ">
            <section>
                <div class="container">
                    <div class="row" style="flex-wrap: nowrap;">
                        <div class="col-xl-6 col-lg-6 col-md-6 " style="align-self:center;">
                            <div class="shadow-number">01</div>
                            <h2 class="heading heading-h3 text-white"> Upload your work</h2>
                            <p class="heading-L mt-4" style="color: #B7B7B7;">Get started by uploading your very own creations of all types to any array of games and projects.</p>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6  " >
                            <img class="img-fluid custom-border-radius slider-image-wd" src="{{asset('public/assets/img/upload1v1new.png')}}"alt="" style="  margin: 0 auto;display: table;">
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="swiper-slide">
          <section>
        <div class="container">
            <div class="row" style="flex-wrap: nowrap;">
                <div class="col-xl-6 col-lg-6 col-md-6 " style="align-self:center;">
                    <div class="shadow-number">02</div>
                    <h2 class="heading heading-h3 text-white">Create Collections</h2>
                    <p class="heading-L mt-4" style="color: #B7B7B7;">If you want to create multiple creations for one game, we provide you with the ability to create “Collections”, so you can bundle all of your work together! </p>
                </div>
                <div class="col-xl-6 col-lg-6 col-md-6  " >
                    <img class="img-fluid custom-border-radius mt-2 slider-image-wd" src="{{asset('public/assets/img/createmusic1.png')}}"alt=""  style=" margin: 0 auto;display: table;">
                </div>
            </div>
        </div>
      </section>
    </div>
    <div class="swiper-slide">
        <section>
            <div class="container">
                <div class="row" style="flex-wrap: nowrap;">
                    <div class="col-xl-6 col-lg-6 col-md-6 " style="align-self:center;">
                        <div class="shadow-number">03</div>
                        <h2 class="heading heading-h3 text-white">Earn Today!</h2>
                        <p class="heading-L mt-4" style="color: #B7B7B7;">Start earning for your creations today! We provide advanced data analytics for all the work product you produce. This way you have a handle on your projects from Day 1.</p>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6" >
                        <img class="img-fluid custom-border-radius slider-image-wd" src="{{asset('public/assets/img/dashboard1n.png')}}"alt="" style="  margin: 0 auto;display: table;">
                    </div>
                </div>
            </div>
        </section>
    </div>
  </div>
  <div class="swiper-pagination"></div>
javascripthtmljquerycss

Answer №1

Here is the code snippet for creating a vertical swiper with pagination:

 var swiper = new Swiper(".mySwiper", {
        direction: "vertical",
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
   mousewheel: {
    forceToAxis: true,
    sensitivity: 1,
    releaseOnEdges: true,
},
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
 html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        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;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto">
    <div class="inner">
      <h3 class="masthead-brand">Cover</h3>
      <nav class="nav nav-masthead justify-content-center">
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Contact</a>
      </nav>
    </div>
  </header>

  <main role="main" class="inner cover">
    <h1 class="cover-heading">Cover your page.</h1>
    <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>

    <p class="lead">
      <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
    </p>
  </main>
  </div>

  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="card float-left p-4">
          <div class="row ">

            <div class="col-sm-7">
              <div class="card-block">
                <!--           <h4 class="card-title">Small card</h4> -->
                <h4>Card 1</h4>
                <p>Change around the content for awesomeness</p>
                <a href="#" class="btn btn-primary btn-sm">Read More</a>
              </div>
            </div>

            <div class="col-sm-5">
              <img class="d-block w-100" src="https://picsum.photos/150?image=380" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card float-left p-4">
          <div class="row ">

            <div class="col-sm-7">
              <div class="card-block">
                <!--           <h4 class="card-title">Small card</h4> -->
                <h4>Card 2</h4>
                <p>Change around the content for awesomeness</p>
                <a href="#" class="btn btn-primary btn-sm">Read More</a>
              </div>
            </div>

            <div class="col-sm-5">
              <img class="d-block w-100" src="https://picsum.photos/150?image=380" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card float-left p-4">
          <div class="row ">

            <div class="col-sm-7">
              <div class="card-block">
                <!--           <h4 class="card-title">Small card</h4> -->
                <h4>Card 3</h4>
                <p>Change around the content for awesomeness</p>
                <a href="#" class="btn btn-primary btn-sm">Read More</a>
              </div>
            </div>

            <div class="col-sm-5">
              <img class="d-block w-100" src="https://picsum.photos/150?image=380" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card float-left p-4">
          <div class="row ">

            <div class="col-sm-7">
              <div class="card-block">
                <!--           <h4 class="card-title">Small card</h4> -->
                <h4>Card 4</h4>
                <p>Change around the content for awesomeness</p>
                <a href="#" class="btn btn-primary btn-sm">Read More</a>
              </div>
            </div>

            <div class="col-sm-5">
              <img class="d-block w-100" src="https://picsum.photos/150?image=380" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
<main role="main" class="inner cover">
    <h1 class="cover-heading">Cover your page.</h1>
    <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
  </main>

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

Can you tell me the standard CSS easing curves?

When working with css, we have the option to incorporate easing for transitions, like this: transition: all .5s ease-in-out CSS provides predefined easings such as ease, ease-in, ease-out, and ease-in-out. We can also create a customized easing using a ...

csseasing

Exporting an HTML table to Excel while excluding any hidden <td> elements

I have a web application with an HTML table that displays data to users. I wanted to export the table to Excel and found a jQuery code for it. However, the exported data includes information that is hidden in the table. Is there a way to export the tabl ...

javascripthtmljquery

The response from unirest in node.js came back as undefined

Currently, I am diving into the world of Facebook bots, despite not being well-versed in node.js development. Stepping out of my comfort zone and embracing this new challenge for the first time has been quite exhilarating. Below is the function that I hav ...

javascriptnode.jsresponseunirest

Issue: Angular is indicating that the 'feedbackFormDirective' member is implicitly assigned with type 'any'

I am encountering an error in my project while using Angular version 12. Despite extensive research, I have been unable to find a solution. Here is my .ts file: import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Feedba ...

javascriptangulartypescriptresetangular-forms

The frisbyjs test is not passing due to the absence of proper HTTP headers being sent by the get()

My frisbyjs test is failing because the x-access-token and x-key HTTP headers are not being sent. Am I missing something? This seems like a simple mistake. Here is the outer test that contains the failing test within afterJSON(): frisby.create('Logi ...

javascriptnode.jsjasmine-node

All browsers experiencing issues with autoplay audio function

While creating an HTML page, I decided to include an audio element in the header using the code below: <audio id="audio_play"> <source src="voice/Story 2_A.m4a" type="audio/ogg" /> </audio> <img class= ...

javascripthtmljquery

Modifying properties through JavaScript is not possible

I created an HTML form and I'm trying to change the attributes of a div and a button but for some reason, it's not working <form> <button type='button' id='other'>Sub</button> <select id="prop"> &l ...

javascripthtml

Using jQuery to slide in dynamically generated content

I am in the process of developing a straightforward content slider that has the capability to manage dynamically added content. Unfortunately, none of the supposedly "lightweight" plugins I came across offered this functionality or, if they did, it was not ...

javascriptjqueryslider

What are some strategies for breaking down large components in React?

Picture yourself working on a complex component, with multiple methods to handle a specific task. As you continue developing this component, you may consider refactoring it by breaking it down into smaller parts, resembling molecules composed of atoms (it ...

javascriptreactjsreact-native

Modifying the URL path while navigating through pages with ajax and jQuery

I have implemented ajax post requests to enable paging on a feed within my website. Upon receiving the post request data, I refresh the page by clearing out previous content and displaying the new data retrieved from the request. In addition to this, I wan ...

javascriptjqueryajaxnode.js

Arrange a variety of images with different dimensions in a narrow row while keeping the width fixed and adjusting the height accordingly

Imagine you have a collection of 3 (or more) images, each with different sizes and aspect ratios, within a fixed-width div (for example width:100%): <div class="image-row"> <img src="1.png"> <img src="2.png"> <img src="3.png" ...

htmlcssimageflexboxalignment

Where should the defer.resolve be placed when executing a function asynchronously in a loop using JavaScript?

As someone coming from a java/python background, I am venturing into the world of JavaScript. My current task involves creating a product list with detailed descriptions of its children included in a JSON array. Here is an example of what I want to achiev ...

javascriptnode.jsasynchronouspromisesails.js

When programming with PHP and JavaScript, managing events' start dates and end dates

In my current project, I am developing a script that deals with events. An event is scheduled to start on 12/02/2016 at 11:20 and end on 01/04/2016 at 8:20. When the end date is reached, I need to trigger a specific action using JavaScript. if (t.getFullY ...

javascriptphpdate

Using the PMT function in PHP allows for easy calculation of

I have been attempting to integrate the PMT function into my PHP code for a loan calculator. Unfortunately, the PHP code seems to be malfunctioning and I am unsure of the reason, especially since I am still at the novice level in programming. PHP(Get.php ...

phphtml

Issue: missing proper invocation of `next` after an `await` in a `catch`

I had a simple route that was functioning well until I refactored it using catch. Suddenly, it stopped working and threw an UnhandledPromiseRejectionWarning: router.get('/', async (req, res, next) => { const allEmployees = await employees.fi ...

javascriptnode.jsexpresses6-promise

js/jquery issue with IE: Scrolling to the bottom of a div upon page load

I have encountered an issue with my code on Internet Explorer. It works perfectly on Firefox, but when the content of the div is too high in IE, it fails to scroll to the bottom. Clicking a button to scroll to the bottom works fine, but the problem arise ...

javascriptjquery

Unfortunately, CORS is preventing me from sending a POST request through AJAX

I'm currently working on integrating an API into my website. I'm attempting to send a POST request with JSON data, but I keep encountering an error code when trying to make the request. Interestingly, sending the request using curl does not pose ...

javascriptjqueryajaxapachecors

Creating a star-based rating feature through directive implementation

Can anyone help me figure out why my static star rating system using angularjs/ionic is not showing up on the screen? I've been struggling with it and would appreciate some guidance. service.html <ion-list> <ion-item ng-repeat="busine ...

javascriptangularjsionic-framework

How to securely upload and generate a permanent link for the contents of a zip file using express js

I am new to Javascript and Node JS. I have a challenge of uploading a zip file containing only pictures and creating permanent links for these pictures. Currently, I can upload a zip file and extract its contents using the following code snippet: var expr ...

javascriptnode.jsexpress

What is the best way to remove an item from my online shopping cart using JavaScript?

I am currently developing an online store website. One issue I am facing is deleting items from the cart after a customer completes an order. Below is the array of cart items: const products = [ { id: '0', name: 'Nike Slim Shirt&ap ...

javascriptreactjsjsonreduxnext.js