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>