'Swiper JS Slider next/previous buttons aren't working perfectly

Hi guys I'm having a bit of trouble using swiper js slides. This is the link of my website having swiper js slider: https://nyside2.internet.dk/ As you can see in the start the swiper js slider is showing a few parts from the next slide. This is a very big concern for me. Because I want only one slider per view also when I click on the next or previous button I'm having half part of the previous slider and half part of the next slider at the same time. Again this isn't what I want I want only one slide after clicking the next or previous button. You can see the code below that I'm using:

<HTML>
<head>
<style>
HTML,body
{position: relative;
  height: 100%;
}
body{
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
#Slider .swiper-container {
  width: auto;
  height: 100%;
}
#Slider .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* reset list */
#Slider ul.swiper-wrapper{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#Slider h2{
  flex-basis: 100%;
}


#Slider .swiper-button-prev,
#Slider .swiper-button-next{
 top: 45%;
 background: none;
 color: #FFFFFF;
 opacity: 0;
}

#Slider .swiper-container:hover .swiper-button-prev{
    opacity: 1.0;
    animation-duration: 1s;
    animation-iteration-count: 1;
    margin-left: 30px;
    animation-name: PreviousSlider;
}

u/keyframes PreviousSlider{
    0%{
    opacity: 1;
    }
    100%{
    opacity: 1;
    transform: translate(30px, 0px);
    }
}


#Slider .swiper-container:hover .swiper-button-next{
    opacity: 1.0;
    animation-duration: 1s;
    animation-iteration-count: 1;
    margin-right: 30px;
    animation-name: NextSlider;
}


u/keyframes NextSlider{
  0%{
    opacity: 1;}
  100%{
    opacity: 1;
    transform: translate(-30px, 0px);}
}

#Slider .h2--small .heading-line--0{
    position: absolute;
    display: block;
    top: 50%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 200;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .h2--small .heading-line--1{
    position: absolute;
    display: block;
    top: 58%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 500;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
} 

#Slider .content_subtitle{
    position: absolute;
    display: block;
    top: 68%;
    margin-left: 20px;
    z-index: 9;
    font-family: futura-pt;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 579px;
    height: 87px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 29px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 24px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .button--inline{
    position: absolute;
    display: block;
    top: 77%;
    margin-left: 20px;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
    font-family: "News Cycle";
    text-transform: uppercase;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 20px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
    border-width: 0px;
    border-radius: 0px;
}

#Slider .button--inline .b8{
    color: #EF8524;
}

#Slider .fa-long-arrow-alt-right:before{
    color: #EF8524;
    text-align: left;
    letter-spacing: 0px;
    font-weight: 400;
}

#Slider .video-overlay{
    margin-top: -759px;
    width: 100%;
    height: 750px;
    position: relative;
    display: flex;
    background: black;
    opacity: 0.5;
}

/* Extra small devices (phones, 600px and down) */
u/media only screen and (max-width: 600px) and (min-width: 360px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
display: none;
}

#Slider .h2--small .heading-line--0{
    position: absolute;
    display: block;
    top: 22%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 25px;
    font-weight: 200;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}    

#Slider .h2--small .heading-line--1{
    position: absolute;
    display: block;
    top: 33%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 25px;
    font-weight: 500;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .content_subtitle{
    position: absolute;
    display: block;
    top: 53%;
    margin-left: 20px;
    z-index: 9;
    font-family: futura-pt;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 320px;
    height: 87px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 25px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 18px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .button--inline{
    position: absolute;
    display: block;
    top: 84%;
    margin-left: 20px;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
    font-family: "News Cycle";
    text-transform: uppercase;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 18px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
    border-width: 0px;
    border-radius: 0px;
}
}


/***********


/* Small devices (portrait tablets and large phones, 600px and up) */
u/media only screen and (max-width: 768px) and (min-width: 600px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
 top: 35%;
 background: none;
 color: #FFFFFF;
 opacity: 0;
}

#Slider .h2--small .heading-line--0{
    position: absolute;
    display: block;
    top: 40%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 50px;
    font-weight: 200;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .h2--small .heading-line--1{
    position: absolute;
    display: block;
    top: 53%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 50px;
    font-weight: 500;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
} 

#Slider .content_subtitle{
    position: absolute;
    display: block;
    top: 68%;
    margin-left: 20px;
    z-index: 9;
    font-family: futura-pt;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 579px;
    height: 87px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 29px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 24px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .button--inline{
    position: absolute;
    display: block;
    top: 85%;
    margin-left: 20px;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
    font-family: "News Cycle";
    text-transform: uppercase;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 20px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
    border-width: 0px;
    border-radius: 0px;
}

#Slider .button--inline .b8{
    color: #EF8524;
}
}

/* For tablet devices 768px to 992px */
u/media only screen and (max-width: 992px) and (min-width: 768px){
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
 top: 38%;
 background: none;
 color: #FFFFFF;
 opacity: 0;
}

#Slider .h2--small .heading-line--0{
    position: absolute;
    display: block;
    top: 45%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 200;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .h2--small .heading-line--1{
    position: absolute;
    display: block;
    top: 58%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 500;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
} 

#Slider .content_subtitle{
    position: absolute;
    display: block;
    top: 72%;
    margin-left: 20px;
    z-index: 9;
    font-family: futura-pt;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 579px;
    height: 87px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 29px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 24px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

 .button--inline{
    position: absolute;
    display: block;
    top: 85%;
    margin-left: 20px;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
    font-family: "News Cycle";
    text-transform: uppercase;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 20px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
    border-width: 0px;
    border-radius: 0px;
}

.button--inline .b8{
    color: #EF8524;
}
}

/* Large devices (laptops/desktops, 992px and up) */
u/media only screen and (max-width: 1200px) and (min-width: 992px) {
#Slider .swiper-button-prev,
#Slider .swiper-button-next{
 top: 45%;
 background: none;
 color: #FFFFFF;
 opacity: 0;
}

#Slider .h2--small .heading-line--0{
    position: absolute;
    display: block;
    top: 50%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 200;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .h2--small .heading-line--1{
    position: absolute;
    display: block;
    top: 58%;
    margin-left: 20px;
    z-index: 11;
    font-family: futura-pt;
    font-style: Regular;
    text-transform: uppercase;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 894px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 75px;
    letter-spacing: normal;
    font-size: 60px;
    font-weight: 500;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
} 

#Slider .content_subtitle{
    position: absolute;
    display: block;
    top: 68%;
    margin-left: 20px;
    z-index: 9;
    font-family: futura-pt;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 579px;
    height: 87px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 29px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 24px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
}

#Slider .button--inline{
    position: absolute;
    display: block;
    top: 77%;
    margin-left: 20px;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
    font-family: "News Cycle";
    text-transform: uppercase;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 23px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 20px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
    border-width: 0px;
    border-radius: 0px;
}

#Slider .button--inline .b8{
    color: #EF8524;
} 



</style>
</head>
<body>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/swiper-bundle.min.css">
<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <ul class="swiper-wrapper">
    <!-- Slides -->
    <li class="swiper-slide">
    <div>
        <video 
source src="//nyside2.internet.dk/wp-content/uploads/2022/03/moviefront720.mp4" type="video/mp4" lazyload="//nyside2.internet.dk/wp-content/uploads/2022/03/moviefront720.mp4" ></video>
    <div class="video-overlay"> </div>
    <h2 class="h2 content-copy__title h2--small"><span class="heading-line heading-line--0">Forretningsorienteret</span>
    <span>
        <strong class="heading-line heading-line--1">
            bureau
        </strong>
    </span>
    </h2>
        <div class="b2 b2--spread content_subtitle">
            <p>
                Stærkt team med fokus på strategi og kreativitet der engagere og aktiver mennesker på deres kunderejse
            </p>
        </div>
    <div class="button hero-content-cta z4 button--inline">
            <a href="https://nyside2.internet.dk/?page_id=37">
                <span class="b8 z2">
                Se hvordan vi gør 
                </span>
                <i class="fas fa-long-arrow-alt-right">
                </i>
            </a>
        </div>
    </div>
    </li>
    <li class="swiper-slide">
      <div>
        <video source src="//nyside2.internet.dk/wp-content/uploads/2022/03/Frontmovie2_720.mp4" type="video/mp4" lazyload="//nyside2.internet.dk/wp-content/uploads/2022/03/Frontmovie2_720.mp4"></video>
        <div class="video-overlay"></div>
        <h2 class="h2 content-copy__title h2--small"><span class="heading-line heading-line--0">Fra kr. 2.980,- / mdr.</span>
        <span>
            <strong class="heading-line heading-line--1">
                Den fulde løsning
            </strong>
        </span>
        </h2>
        <div class="b2 b2--spread content_subtitle">
            <p>
                Nyt kreativt webdesign, der løfter din virksomhed og øger effekten af din indsats
            </p>
        </div>
    <div class="button hero-content-cta z4 button--inline">
            <a href="https://nyside2.internet.dk/about/">
                <span class="b8 z2">
                Interesseret - så klik 
                </span>
                <i class="fas fa-long-arrow-alt-right">
                </i>
            </a>
    </div>

      </div>
    </li>
  </ul>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
  loop: true,
  slidesPerView: 1,
  centeredSlides: true,
  autoplay: {
    delay: 5000,
    autoplayDisableOnInteraction: false,  
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

 /* ON INIT AUTOPLAY THE FIRST VIDEO */
  on: {
    init: function () {
      console.log('swiper initialized');
      var currentVideo =  $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
      currentVideo.trigger('play');
    },
  },
});

/* GET ALL VIDEOS */
var sliderVideos = $(".swiper-slide video");

/* SWIPER API - Event will be fired after animation to other slide (next or previous) */
swiper.on('slideChange', function () {
  console.log('slide changed');
  /* stop all videos (currentTime buggy without this loop idea - no "real" previousIndex) */
  sliderVideos.each(function( index ) {
    this.currentTime = 0;
  });

  /* SWIPER GET CURRENT AND PREV SLIDE (AND VIDEO INSIDE) */
  var prevVideo =  $("[data-swiper-slide-index=" + this.previousIndex + "]").find("video");
  var currentVideo =  $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
  prevVideo.trigger('stop');
  currentVideo.trigger('play');
});
</script>
</body>
</html>
javascriptswiperswiperjs


Solution 1:[1]

I would to use angular or other framework to get that! better to use swipper with somthing framework. Your script don'd clear to me. Sorry to don't get help you. Your css code is perfect, but swipper has properties. Take a look on documentacion to javascript. I would recomend to use Ionic Framewor to create thats cards thath you want to slide.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions

React Router with optional path parameter

How to dynamically update google recaptcha sitekey?

How to dynamically update google recaptcha sitekey?

Remove duplicate in a string - javascript

Remove duplicate in a string - javascript

Searching a string for missing letters of the alphabet in javascript

Searching a string for missing letters of the alphabet in javascript

Searching a string for missing letters of the alphabet in javascript

Find an element in DOM based on an attribute value

Redirecting html page with javascript

Find an element in DOM based on an attribute value

Find an element in DOM based on an attribute value

Redirecting html page with javascript

How to find x and y coordinates of a button while using keyboard navigation?

How to find x and y coordinates of a button while using keyboard navigation?