In Swiper demos, slides snap to the left of the screen until you get to the final slides, which are prevented from snapping to left because (I presume) Swiper doesn't want to show whitespace down the righthand side:
Slide 10 will never snap to the left side
https://swiperjs.com/demos/120-slides-per-view-auto.html
In my opinion it feels like a bug to the user, especially when you trigger slide to slide 10 and it only pops into the right side.
The workarounds I've found are to either add a blank slide, or to add margin-right to the final slide, so then slide will snap to the left side:
.swiper-slide:last-child {
margin-right: calc(100vw - 300px);
}
Add margin-right to last slide
https://codepen.io/kmturley/pen/ExxrGgw
Add blank slide at end
https://codepen.io/kmturley/pen/JjjzKrK
Use loop functionality and then hide duplicates
https://codepen.io/kmturley/pen/oNNVLxL
Is there a better or built-in way to do? this without having to use a workaround?
I want to change this spacing dynamically later and if you change it manually, then you have to call swiper.update() causing layout updates. Also my current workaround requires you to know the width of the slides, or use custom javascript to calculate the widths. So a built-in or responsive solution would be preferable!
try to add loopedSlides: 8, and remove margin-right: calc(100vw - 300px);
var container = document.getElementById('container');
var content = document.getElementById('content');
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 'auto',
autoplayDisableOnInteraction: false,
loopedSlides: 8,
});
Your current workaround probably is quite optimal and I don't htink there is any built in way to acheave what you are trying to do. However you could consider to use loop: true option and this could give a better user experience.
https://codepen.io/rentodesign/pen/gOOqNwo
Related
The Problem
I'm setting up a slick slider/carousel on a Wordpress website. Everything works/displays perfectly, however the slider has stopped dragging correctly.
I can still physically drag the slider with the mouse and it animates as it should, however when I let go of the slider it just snaps back to the first slide and never lets me navigate back or forward from the first slide by dragging
Using the prev and next arrows works perfectly, and so does using the arrow keys on the keyboard which makes me even more confused as to why the dragging doesn't work.
What I need
A fix for the dragging not working so that I can navigate through the slider properly.
**The slider is also broken in the same way on mobile when I swipe through the slider.
My Code
I can't link you to the slider as it's on a private site at the moment, but I will try to put all of the code I think is relevant below:
(I'm using the slick.min.js file and the slick.css file only from the download)
HTML
<div class="slider">
<div class="slider__item">
<a href="">
</a>
</div>
</div>
There are multiple slider__item's but they are created in a WP Loop of the posts so I have only included one
Leaving out content in slides so that this post isn't too long but imagine <p> and <div> tags for text/titles/images etc...
JS
$('.slider').slick({
infinite: true,
slidesToScroll: 1,
variableWidth: true,
dots: false,
arrows: true,
focusOnSelect: false,
prevArrow: $('.home-posts__arrow__prev'),
nextArrow: $('.home-posts__arrow__next'),
});
CSS
.slider {
position: absolute;
left: calc(33.333333% + 30px);
}
.slider__item {
max-width: 290px;
margin: 0px 15px;
}
Reference image
The slider is to the right of the content, "Test post 4" is the first slide that it always snaps back to. The blue squares are temp prev and next buttons
I hope that's enough info to go off but leave a comment if you need anything else, thanks in advance!
This is an old question, but I had the same issue. Dragging slides with Slick slider didn't work, slides snap back to the first slide. The fix for me was setting the touchThreshold to a higher number.
From the docs:
touchThreshold: To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
https://github.com/kenwheeler/slick/#settings
The default value is 5. I changed it to 100 and dragging slides works again:
touchThreshold:100
Have you tried adding the swipeToSlide option and setting it to true?
Have experienced the same requirements today, maybe this would help future searchers.
Try comment out or remove that line:
//max = _.slideCount * 2;
I'm trying to make a toggle window to pop coming from the right to the left.
I have tried this:
$('#menuDiv').show({ direction: "left", easing:"linear" }, 1750 );
But this has 2 problem:
The time 1750 is not having any effect.
The windows pops top to down with half width and right to left at the same time. (In a diagonal way).
Any help appreciated.
I'm using the jQuery UI library.
You made two mistakes:
You didn't specify the type of effect you want, which is the required option effect
You tried to specify the duration as second parameter, while you should have used the option duration
A working version of your code:
$('#menuDiv').show({
effect: "slide",
direction: "left",
easing:"linear",
duration: 1750
});
Sorry if this is stupid question, but i'm not the greatest coder alive (actually i design websites for a living).
My question is: Can i disable fullPage.js depending on a div size?
I've been trying to look this up, but with no luck. I found this, but i don't think i know how to tweak it right, or if it's even possible:
if(.scrollable.width < 480) {
$('#fullpage').fullpage({
autoScrolling: false,
fitToSection: false
}} else {
$('#fullpage').fullpage({
autoScrolling: true,
fitToSection: true
}}
.scrollable = div starting at 0vw and expanding to 50vw.
I want the scroll from fullPage.js to stop when this div is bigger than 1vw.
Is this possible? Much thanks in advance.
You should use the responsive options provided by fullPage.js, such as responsiveWidth and responsiveHeight. You can find all about those options in the fullpage.js docs. And you can find examples online.
Example of usage:
$('#fullpage').fullpage({
responsiveWidth: 900,
responsiveHeight: 600
});
Additionally you can make use of the fp-auto-height-responsive class as in this example, to allow sections bigger than the viewport once in responsive mode.
Also, you can make use of the Responsive Slides extension if you want to convert horizontal slides to vertical sections when reaching the responsive point.
When moving back through the loop using the "previous" navigation button the slides seem to jump from last to first. Issue seems to happen on all platforms.
Moving forward using navigation works as expected, and dragging works as expected.
I have done a fiddle based off the "Centered Slides + Auto Slides Per View" demo on the Swiper website, adding only the navigation html
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
and the options
loop: true,
loopedSlides: 10,
roundLengths: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
JSFiddle here: https://jsfiddle.net/MatraSimca/L063jo3x/17/
In the production site I'm working on I'm using fixed width slides and the issue only seems to occur when adding
roundLengths: true,
With the percentage based widths in the demo fiddle the issue occurs with or without the roundLengths option. Any pointers appreciated...
loop functionality is duplicating only DOM nodes, meaning that your duplicated slides for the loop don't have their JS code appended as well, only the rendered result.
I spent 2 days trying to figure this out, so by using the original Swiper's methods and events, I came to a semi-infinite-loop feature:
add the following to your swiper's config
loop: true,
loopedSlides: 1,
on: {
slideChange: function () {
let lastVisibleItem = this.realIndex + this.params.slidesPerView
let slidesLength = this.slides.length - 2
let lastVisibleIndex = this.realIndex + this.params.slidesPerView
// if swiper reaches the end of displayed items, goToNext redirects swiper to the start
if (lastVisibleItem > slidesLength) {
this.slideTo(1)
}
// if swiper wants to go before the first item, then forward swiper to the last item
if (lastVisibleIndex >= this.slides.length) {
this.slideTo((slidesLength - this.params.slidesPerView) + 1)
}
}
}
I would like to ash here a question, which I asking already in the developers forum of swiper, too. So don't be confused. If a solution is/was found, I will close/mark both.
At the moment I want for a project a horizontal scrolling sidebar and a vertical scrolling footer. (Swiper based)
But see self what happens if you switch from horizontal (1) footer to a vertical (2) one.
Video 1 (direction both horizontal - not wanted)
Video 2 (footer direction vertical, wanted! - not works)
As you can see, on the simplified example (Video 2):
If I use direction:vertical on the second swiper-container it breaks the result. Where the HEIGHT of "swiper-slide" should be 226px, appears now a HEIGHT of 2408px and a MARGIN-BOTTOM of 100px.
I really can't understand what's going wrong here.
ConfInit
var swiper = [];
$('.swiper-container').each(function(index){
var $el = $(this);
var sParams = [{
speed: 400,
spaceBetween: 100,
allowSwipeToNext: false, // for event controlled swipes
allowSwipeToPrev: false // for event controlled swipes
},
{
speed: 400,
spaceBetween: 100,
allowSwipeToNext: false, // for event controlled swipes
allowSwipeToPrev: false, // for event controlled swipes
direction: 'vertical'
}
];
I have faced the same issue, solved by adding height: 100vh declaration to swiper container.
Finding
height property is must
NOTE: % does not work