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

AngularJS initiates an XMLHttpRequest (XHR) request before each routeChange, without being dependent on the controller being used

I'm currently embarking on a new project, and for the initial phase, I want to verify if the user has an active session with the server by sending an XHR HEAD request to /api/me. My objective is to implement the following syntax $rootScope.$on("$rou ...

javascriptangularjs

Steps for populating a table with data from a JSON array

I am currently facing a challenge in populating an HTML table with data retrieved from a two-dimensional array. The information is being fetched through an $.ajax script after executing a php/MySQL query. Despite successfully parsing the data in the succes ...

javascriptjqueryajaxjson

Aligning table elements for optimal responsiveness

Need a hand with my HTML email code. I'm struggling to center the "resort boxes" when viewed on smaller screens like phones. Tried everything but can't crack it. Appreciate any help! <html> <head> <meta content="text/html; c ...

htmlcsshtml-email

How to retrieve an object once it exits the viewport in JavaScript

I am seeking guidance on how to reset an object to its initial position (0) once it exits the browser window. Currently, I have an image that moves when you click on the up/down/left/right buttons, but it eventually extends beyond the browser window. Belo ...

javascript

What is the best way to attach an event listener to detect the coordinates where a click occurs inside a div element?

Imagine a situation where you have a div container measuring 200px by 500px. The goal is to implement an event listener that can identify the x and y coordinates within this div when it is clicked. What would be the approach to achieve this in React? ...

javascripthtmlreactjs

Creating internal utility functions in Angular without exporting them as part of the module can be achieved by following a

Currently, I'm in the process of creating an angular module called MyModule. This module includes several sub-modules. angular.module('MyModule', [ 'MyModule.SubModule1', 'MyModule.SubModule2', 'MyModule.SubMo ...

javascriptangularjsmoduleexport

Creating a "Container" component in Vue.js step by step

As a newcomer to Vue, I am facing a challenge in implementing a wrapper component similar to React's 'Wrapper' component. Specifically, I want to create a reusable datagrid component using a 3rd-party some-table component and a pagination co ...

javascriptvue.js

How to convey emotions through Material UI MenuProps to customize paper root classes

Utilizing Material UI for a Select menu along with Emotion for custom styling. I am facing a challenge where I need to customize the root classes (MuiPaper-root or MuiMenu-paper) of the menu popover once a menu item inside the Select menu is clicked. Inc ...

cssreactjsmaterial-uiemotion

Require a selection from the menu on the right side needed

I am looking to have the logout link displayed on the far right when the other menu items are hidden. Currently, it is appearing in the center. Is there a way I can make it show up on the right? <div class="nav-content container"> &l ...

htmlcssasp.net

Ways to stop a form input value from disappearing when clicking on other fields?

Upon loading the page, the form's campaignid input value is automatically filled. However, clicking on other fields causes it to reset to default. Is there a way to prevent this default behavior and preserve the input value of campaignid? I've ...

javascriptreactjsnext.jsformikchakra-ui

Updating in real-time through a dynamic jQuery request

Encountering difficulties in performing a Live update after a Live call. The event is successfully added to the dBase, but I am encountering issues with updating the contents of the div that has been changed. We are trying to display the confirmation withi ...

phpjqueryajax

Appending a forward slash at the end of a URL seamlessly directs the user to a serendipitous webpage experience, while

I'm currently developing a project on this website: Interestingly, when you append a forward slash to the end of the URL, all the images mysteriously disappear. Consequently, I am unable to include Google AdWords tracking code at the end of any URLs: ...

javascripthtml.htaccesstracking

How can we ensure that Ajax consistently provides useful and positive outcomes?

Here is my PHP code: function MailList() { $this->Form['email'] = $_POST["email"]; $index = $this->mgr->getMailList($_POST["email"]); } // SQL code function getMailList($email) { $mailArray = Array(); $sql ...

javascriptphpajaxsmarty

Clearing a textarea in jQuery that is populated with text

Having an interesting dilemma. I'm trying to clear a <textarea> and then replace it with new content. The functions in the JSFiddle will work perfectly fine if the textarea is left empty, but as soon as any text is manually typed into it, the me ...

javascriptjquery

How to create flexible, non-url-changing layout states with angular-ui-router?

My Objective I am working with two different styles of display: "Normal": [ Header | Body | Footer ] - primarily used for most views "Discreet": [ Body ] only, centered on screen - ideal for states like login/register, errors etc. These display styles ...

javascriptangularjsroutesangular-uiangular-ui-router

In NextJS with SASS modules, the selector ":root" is considered impure since pure selectors are required to include at least one local class or id within them

Lately, I made the switch to using modules in my next.js project. However, I keep encountering an error in my newly created .module.scss files that says: "Selector ":root" is not pure (pure selectors must contain at least one local class or id)". It seems ...

csssassnext.jscss-modulesreact-css-modules

Using Javascript, the sum of inputs is calculated based on the keyup event

I am a beginner in javascript and I'm learning about events. Below is the HTML code for a table that displays income titles and their respective prices. <table class="table table-hover table-bordered" id="incomeId"> <thead> <tr&g ...

javascriptjqueryhtmlinputsum

Creating a fresh shortcut on the selenium IDE

Is there a way to customize shortcuts in Selenium IDE by modifying its code? For instance, I would like to set the shortcut ctrl + p for the action run test case, similar to how the save action is assigned ctrl + s. I've searched for the JavaScript ...

javascriptseleniumfirefoxfirefox-addonselenium-ide

Iterate over rows in a b-table component in Vue

In the context of Vue bootstrap, a b-table consists of a list with an unknown number of rows. The requirement is to display a remove button only if the email in the row matches that of the currently logged-in user. This functionality currently works for a ...

javascriptvue.jsloopsbootstrap-vue

In order to locate a matching element within an array in a JSON file and update it, you can use Node

Good day, I have a script that updates the value in a JSON file const fsp = require('fs').promises; async function modifyNumberInFile() { try { let data = await fsp.readFile('example.json'); let obj = JSON.parse(dat ...

javascriptnode.js