UPDATED INFO:
I noticed the swiper-wrapper has a width of 4816px and each of the four slides have widths of 1174px:
<div class="swiper-wrapper" style="width: 4816px; transform: translate3d(0px, 0px, 0px);">
<div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 1174px; margin-right: 30px;">
<div class="card-content">
<div class="card-header">
<span>Heading</span>
</div>
I've researched for hours, but am struggling with figuring out how to prevent the swiper from scrolling beyond the last slide. The swiper is set up with four slides that all have a fixed width (not responsive). When the viewport width is less than the width of the swiper container, the SwiperJS is activated. However, it allows the user to swipe far beyond the last (rightmost) slide.
JavaScript
const swiper = new Swiper('.swiper-container', {
observer: true,
observeParents: true,
spaceBetween: 30,
allowSlideNext: false,
freeMode: true,
resistanceRatio: 0,
watchSlidesVisibility: true,
watchSlidesProgress: true,
breakpoints: {
1200: {
allowSlideNext: true,
resistanceRatio: 0,
},
},
});
HTML
The swiper markup is typical:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slider 1
</div>
<div class="swiper-slide">
Slider 2
</div>
<div class="swiper-slide">
Slider 3
</div>
<div class="swiper-slide">
Slider 4
</div>
</div>
</div>
CSS
.swiper-container {
max-width: 1220px !important;
}
.swiper-container-product-cards {
margin: 0 auto;
max-width: 1250px;
position: relative;
overflow: hidden;
list-style: none;
padding: 0 5px;
z-index: 1;
}
.swiper-slide {
text-align: center;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0;
border-radius: 0;
height: 578px;
width: 287px !important;
justify-content: space-around;
}
Related
what i'm trying to do is, change the background color of the selected slide when the link is visited. For example if outdoor link is visited on the new page i would like that slide background to be highlighted so user can understand which section they are in.
<div class="swiper mySwiperAnimationCollection home-page-animation-collection-div">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="https://arditicollection.com/collections/outdoor-spaces-furniture" >
<img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/outdoor-collection.png?v=1672413080"
alt="Arditi Collection® OUTDOORS">
</a>
<p class="collectionTitleP">OUTDOORS</p>
</div>
<div class="swiper-slide">
<a href="https://arditicollection.com/collections/dining-tables" >
<img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/Dining_Tables_Border.png?v=1670939498"
alt="Arditi Collection® DINING TABLES">
</a>
<p class="collectionTitleP">DINING TABLES</p>
</div>
<div class="swiper-slide">
<a href="https://arditicollection.com/collections/dining-chairs" >
<img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/Dining_Chairs_Border.png?v=1670939510"
alt="Arditi Collection® DINING CHAIRS">
</a>
<p class="collectionTitleP">DINING CHAIRS</p>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiperAnimationCollection", {
slidesPerView: 10.5,
spaceBetween: 5,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
},
breakpoints: {
320: {
slidesPerView: 3.5,
spaceBetween: 5
},
768: {
slidesPerView: 5.5,
spaceBetween: 5
},
1024: {
slidesPerView: 10.5,
spaceBetween: 5
}
}
});
</script>
The easiest way is by the slide Active Class (API docs):
.swiper-slide.swiper-slide-active{
background: red;
}
Snippet:
var swiper = new Swiper(".swiper", {
slidesPerView: 3,
loop: true,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
.swiper-slide.swiper-slide-active{
background: red;
}
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;
}
[scroll]{
min-height: 100vh;
background: gray;
}
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" rel="stylesheet"/>
<div class="swiper mySwiper">
<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>
<div class="swiper-pagination"></div>
</div>
I have a swiper slider with Module Mousewheel control, is there a possibility make it so that at the end of the scroll slides (last slide) the page continue to scroll.
let swiper = new Swiper(".mySwiper", {
speed: 600,
direction: 'vertical',
parallax: false,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
mousewheel: {
sensitivity: 1,
}
});
YES.
By Mousewheel API module option:
releaseOnEdges
false by deafult.
mousewheel: {
releaseOnEdges: true,
},
Set to true and swiper will release mousewheel event and allow page
scrolling when swiper is on edge positions (in the beginning or in the
end). Docs
DEMO:
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 1,
spaceBetween: 30,
mousewheel: {
releaseOnEdges: true,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
swiper.on('reachEnd', function () {
console.log('slider reachEnd');
});
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-flex;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<!-- Demo styles -->
<style>
</style>
</head>
<body>
<!-- Swiper -->
<p style="min-height: 100vh">Scroll</p>
<div class="swiper mySwiper">
<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>
<div class="swiper-pagination"></div>
</div>
<br><br>
<h1>releaseOnEdges API option</h1>
<br><br>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</body>
</html>
I have created a centered mode slider(each slide having an image only) with some transition effect when the slide changes, but the slide flickers when it goes from the first to the second slide as well as from the last slide to the first slide.
$(document).ready(function () {
var mySwiper = new Swiper(".swiper-container", {
observer: true,
observeParents: true,
slidesPerView: 3,
loopedSlides: 50,
centeredSlides: true,
loop: true,
watchSlidesVisibility: true,
speed: 1000,
navigation: {
nextEl: ".next-image",
prevEl: ".previous-image"
},
pagination: {
el: ".gallery-pagination",
clickable: true
}
});
mySwiper.init();
});
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
p {
color: #000;
}
.swiper-container {
position: relative;
width: 80%;
}
.swiper-slide {
transition: all 1000ms linear;
transform: scale(0.75);
}
.swiper-slide-active {
transform: scale(1);
}
.image-container {
width: auto;
height: 350px;
border-radius: 9px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9px;
}
.gallery-pagination {
display: flex;
justify-content: center;
margin-top: 15px;
}
.next-image {
position: absolute;
right: 0;
top: 40%;
cursor: pointer;
}
.previous-image {
position: absolute;
left: 0;
top: 40%;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 1 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 2 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 3 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 4 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
</div>
<div class="navigation-pagination-wrapper">
<!-- Previous Navigation -->
<div class="previous-image">
<p>Prev</p>
</div>
<!-- Pagination -->
<div class="gallery-pagination"></div>
<!-- Next Navigation -->
<div class="next-image">
<p>Next</p>
</div>
</div>
</div>
https://codepen.io/suru235/pen/oNwdRzb
Have been researching possible fixes for this but cannot figure out what's wrong.
Any help will be much appreciated.
Thanks!
I'm using Swiper to create a slider that takes up the whole window, minus a few pixels for a bar-- no problem there.
(https://i.imgur.com/2MIJOvs.jpg)
However, as you can see, the image that I put in for the slide (https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) is really enlarged.
How do I make the image show a little more of the width so it doesn't look so enlarged/low quality?
I tried messing with some of the width/height settings in the style/CSS, but either nothing changes or the whole container/wrapper gets messed up.
CSS: (in the html head in a style tag)
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: 100%;
}
.swiper-slide img{
min-width:100%;
}
Javascript:
<!-- Swiper JS -->
<script src="swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 0,
centeredSlides: true,
autoplay: {
delay: 8000,
disableOnInteraction: false,
},
loop:true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
Here is the little update about fullscreen swiper slider .
var galleryTop = new Swiper('.gallery-top', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 10,
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #fff;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 100%;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/js/swiper.js"></script>
<!-- Swiper -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
I'm creating a slide on a site that uses bootstrap 4 and owl carousel 2. Do I need to put the navigation on the slide, how do this, see my code below:
NOTE: I need to make navigation within a container not to get 100% of the width of the window.
HTML
<section class="slide">
<div class="owl-carousel">
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
</div>
<div class="container">
<div class="nav-container"></div>
</div>
</section>
JS
$('.owl-carousel').owlCarousel({
loop:true,
items:1,
autoplay:true,
autoplayHoverPause:true,
nav:true,
navText:['<div class="nav-slide"><i class="flaticon-arrows-1"></i></div>', '<div class="nav-slide"><i class="flaticon-arrows"></i></div>'],
navContainer:'.nav-container'
})
<section class="slide">
<div class="owl-carousel">
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
</div>
<div class="slide-content">
<div class="container">
<div class="nav-container"></div>
</div>
</div>
</section>
.slide {
position: relative;
}
.slide .slide-content {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 0;
right: 0;
z-index: 9999;
}
This will place the navigation in the center of the slide. if you want it at the bottom adjust to suit
I would recommend using flexbox css for this. justify-content: center will align it horizontally, and align-content: center or align-items: center will center it vertically.
Without your css, I'm guessing here a bit, but I put together a quick example to show how the navigation can be set to not to stretch 100% width;
http://jsfiddle.net/8qhfj6u2/
HTML
<div class="owl-carousel">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
</div>
<div class="container">
<div class="nav-container"></div>
</div>
CSS
body{
background: #ccc;
}
.owl-carousel .item {
height: 10rem;
background: #4DC7A0;
padding: 1rem;
}
.container{
height: 300px;
width: 400px;
margin: 0 auto;
background: #000;
display: flex;
align-items: center;
}
.nav-container{
background: #fff;
width: 300px;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 5px;
}
JavaScript
$(document).ready(function () {
$('.owl-carousel').owlCarousel({
loop:true,
items:1,
autoplay:true,
autoplayHoverPause:true,
nav:true,
navText:['<div class="prev">Previous</div>','<div class="next">Next</div>'],
navContainer:'.nav-container'
})
});