Swiper ( height issue – multiple swiper – vertical direction ) - javascript

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

Related

Swiper slideTo last slide, whilst snapping to left hand side

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

Swiper and FullpageJS scrolling

I've got a little problem with those two. I'm using FullpageJS for my whole page scrolling and Swiper in one section.
My page contains 3 sections:
Intro section with some text and main menu
Products section where I've put Swiper
3.End section with contact form and footer.
FullpageJS is ofc scrolling only between these.
There's my swiper code:
let mySwiper = new Swiper('.swiper-container', {
// Optional parameters
releaseOnEdges: true,
direction: 'vertical',
loop:false,
centeredSlides: true,
breakpoints:{
768:{
direction:'horizontal',
slidesPerView: '1.1'
}
},
slidesPerView: '1.65',
mousewheel: {
invert: false,
releaseOnEdges:true,
}
});
As you can see swiper is controlled by mouse scroll.
There's my fullpageJS code:
$('#fullpage').fullpage({
controlArrows: false,
normalScrollElements: '#products',
});
"normalScrollElements" prevents fullpageJS from scrolling when #products section is on screen.
The problem that I'm facing is Swiper method 'isEnd' executes too fast. Products section contains full width and full height Swiper container with 10 slides.
What I want to do is to tell Swiper to slide to next section when I use mouse wheel after last slide. 'isEnd' method is working but not as I would like to.
It's scrolling page down in the same time when slide 9 is changing to slide 10 so I actually cant see what's there. I need to scroll back from section 3 to section 2 to see it. I want to call $.fn.fullpage.moveSectionDown();
ONLY when I try to scroll after slide 10.
All I had to do was to use "reachEnd".
on:{
reachEnd: function () {
setTimeout(function () {
$.fn.fullpage.setAllowScrolling(true);
},100)
}
}
After adding 'setTimeout', page doesn't scroll between slides 9 and 10 anymore :)

Can i disable fullPage.js if depending on div size?

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.

CarouFredSel - turn off infinite scrolling?

I have a horizontal scrolling carousel:
_gotoNext: function (that) {
//tjobbe - put funciton here to check if there is anything else after the last slide, then stop / disable the gotonext. must only scroll one if only one is available (or 2). same for go to prev
that.$element.find('.mediaCarousel').trigger("next", false);
},
//This method tells the mediaCarousel to go to the previous slide.
_gotoPrev: function(that, callback) {
that.$element.find('.mediaCarousel').trigger("prev", false);
},
http://jsfiddle.net/YVCTx/
I need it to STOP or at least disable the next button when it gets to the last item. If there is an un-even number I also need it to only scroll one or two items, or let it do the full three.
My current code doesn't seem to be paying attention to the built in "infinite: true (or false)" option.
For example, I have 7 items at the moment, and I scroll 3 at a time. I'd like to stop at the third scroll, so that the second scroll only goes as for as the items in the list.
Any ideas if this is possible?
It seems that there is a circular and an infinite option which you can set.
I would imagine one of those would do what you want (most probably the infinite one):
$('#carousel').carouFredSel({
circular: true, // Determines whether the carousel should be circular.
infinite: true, // Determines whether the carousel should be infinite. Note: It is possible to create a non-circular, infinite carousel, but it is not possible to create a circular, non-infinite carousel.
responsive: false, // Determines whether the carousel should be responsive. If true, the items will be resized to fill the carousel.
direction: "left", // The direction to scroll the carousel. Possible values: "right", "left", "up" or "down".
width: null, // The width of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable widths), "auto" (measure the widest item) or a percentage like "100%" (only applies on horizontal carousels)
height: null, // The height of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable heights), "auto" (measure the tallest item) or a percentage like "100%" (only applies on vertical carousels)
align: "center", // Whether and how to align the items inside a fixed width/height. Possible values: "center", "left", "right" or false.
padding: null, // Padding around the carousel (top, right, bottom and left). For example: [10, 20, 30, 40] (top, right, bottom, left) or [0, 50] (top/bottom, left/right).
synchronise: null, // Selector and options for the carousel to synchronise: [string selector, boolean inheritOptions, boolean sameDirection, number deviation] For example: ["#foo2", true, true, 0]
cookie: false, // Determines whether the carousel should start at its last viewed position. The cookie is stored until the browser is closed. Can be a string to set a specific name for the cookie to prevent multiple carousels from using the same cookie.
onCreate: null // Function that will be called after the carousel has been created. Receives a map of all data.
});
Source: documentation

jCarouselLite auto-scroll responsive changes

I'm using jcarousel lite to display an auto-scrolling carousel of brand logos on one of my sites. I tried to make it responsive (max 6 images on largest display) using the following javascript. The carousel works fine using the original code without me trying to modify how many images are visible.
<script>
function carouselLogic(){
if ($(window).width() > 959 ){
visible = 6;
changeCarousel(visible);
}
else if($(window).width() > 767){
visible = 4;
changeCarousel(visible);
}
else if($(window).width() > 599){
visible = 2;
changeCarousel(visible);
}
}
carouselLogic();
$(window).resize(function(){
carouselLogic();
});
/* original function for first page load
$(function() {
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: 6
});
});
*/
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: visible
});
}
</script>
Images appear inline with a 20px margin left/right.
This code is supposed to change the visible number of logos to ensure they still fit on the page with each responsive change.
The result is the carousels auto scroll goes all crazy. It bounces back and forth all over the place, and much quicker than the default.
Any suggestions on how to improve this code?
The original jCarouselLite has been forked here;
https://github.com/kswedberg/jquery-carousel-lite#responsive-carousels
It's not quite as Lite as it originally was but it has many more methods, and is touch screen scrollable and responsive. You can add the following options which are working for me;
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: true,
speed: 1000,
visible: visible,
autoWidth: true,
responsive: true
});
}
As pointed out here,
Run jCarouselLite again, after an AJAX request
You might want to end the original carousel as well in your carouselLogic() function
$(".logoCarousel").trigger("endCarousel");
This is old but in case it helps, i'm pretty sure you need to "reset" jcarousellite. Otherwise you are instantiating it again and again after each window resize.
To initialize it properly after it has already been initialized, you need to call a reset method. I don't remember the syntax off the top of my head, but if you search the jcarousellite.js source for "reset" you should find the correct syntax

Categories