I'm needing some help with Swiper.js
I have a site I'm working on https://www.paradev.co.uk/ee-live/home-alt/ and what I want to happen is after the last slide the user can continue to scroll down to rest of the page and then on scrolling up the slider works again with the mousewheel.
I've had to add the 'slide Down' text and arrow to allow the jump to the next section. This isn't ideal and will get deleted once it's working correctly.
I've managed to get what I want by adding the function slideChangeTransitionEnd and disabling the mousweheel. This does what I want for scrolling down and past the container but I can't find a way to reverse it for scrolling back up.
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 1,
direction: "vertical",
slidesPerView: 1,
speed: 1000,
spaceBetween: 0,
roundLengths: true,
centeredSlides: true,
mousewheel: {
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
},
mousewheel: true,
pagination: {
el: ".swiper-pagination",
clickable: false,
},
});
swiper.on('slideChangeTransitionEnd', function () {
swiper.mousewheel.disable();
});
Any ideas?
Thanks.
NOTE
The swiper is in a section with the ID of 'slider'
The section below has an ID of 'festivals'. If this offers an alternative way
I think, It's too rate to fix your issue.
I was dealing with same problem as you today.
But, finally I solved that problem.
try romove below option.
mousewheel: true,
and just leave below options.
"mousewheel: {
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
},"
That's how I handled the problem.
I hope it will be helpful.
Ramy's answer above worked for me, but just to add if you're using react you can add the params as below
<Swiper
className="mySwiper max-h-[400px] w-full max-w-[100vw] overflow-hidden "
direction={'vertical'}
slidesPerView={1}
spaceBetween={30}
mousewheel={{
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
}}
modules={[Mousewheel]}
>
Related
Basic question...is there a way to set a default setting for spread view in PDF.js viewer?
I want to be able to change the spread setting based on my layout, for example to 'no spreads' option but I can't find procedure for this in the official documentation or on the internet.
Ok, I managed to find the solution and it wasn't so hard after all.
For anyone struggling with this problem, you need to open viewer.js and change "spreadModeOnLoad" (-1 is for the last browsers (or PDF file's) default state, 0 is for no spreads and 1 is for obligatory spreads).
The part of the code is located here:
function getDefaultPreferences() {
if (!defaultPreferences) {
defaultPreferences = Promise.resolve({
"cursorToolOnLoad": 0,
"defaultZoomValue": "",
"disablePageLabels": false,
"enablePermissions": false,
"enablePrintAutoRotate": false,
"enableWebGL": false,
"externalLinkTarget": 0,
"historyUpdateUrl": false,
"ignoreDestinationZoom": false,
"pdfBugEnabled": false,
"renderer": "canvas",
"renderInteractiveForms": true,
"sidebarViewOnLoad": -1,
"scrollModeOnLoad": -1,
"spreadModeOnLoad": 1,
"textLayerMode": 1,
"useOnlyCssZoom": false,
"viewOnLoad": 0,
"disableAutoFetch": false,
"disableFontFace": false,
"disableRange": false,
"disableStream": false
});
}
return defaultPreferences;
}
I think the problem is transform property. Caniuse says safari on IOS have partial support, only with vendor prefix -webkit-, but in ows script i see a code for adding vendor prefixes, so i can't get the problem with this carousel.
initializing plugin code:
$(".owl-carousel-beer").owlCarousel({
items: 2,
nav: true,
center: true,
loop: true,
dots: false,
mouseDrag: true,
stagePadding: 50,
responsiveClass:true,
responsive:{
0:{
items:1,
stagePadding: 0,
},
480:{
items:1,
stagePadding: 0,
},
768:{
items:2,
},
1024:{
items:2,
},
1380:{
items:3,
},
1580:{
items:4,
}
}
});
On ipad owl carousel looks like this.
http://i.stack.imgur.com/Q6yET.jpg
On android it looks like this perfect carousel
http://i.stack.imgur.com/gvwdF.png
Bug was fixed by putting initialization code into script in the html page.
I'm having a strange problem with the jquery dialog popup that I'm hoping someone here can help. The pop up codes looks like below. It works fine except for one thing. When the pop-up is displayed, it will sometimes push the background content down by about the height of the the dialog window. Is there a way to prevent this from happenning?
$("#searchPopUp").dialog({
modal: true,
bgiframe: false,
autoOpen: false,
resizable: true,
position:{ my: "center", at: "center", of: window },
title: 'Choose one search criteria and<br/>populate the corresponding field below:',
width: 400,
close: function( event, ui ) {},
buttons: {
"Search": function() {
$("#viewDevicesSearchForm\\:searchCommandLink").click();
},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
This is because jquery sets position to relative, and then moves the popup to the right place using top and left. I found two ways to fix the problem:
1) The easier of the two: set margin-bottom of the dialog container to negative its height.
popup.dialog({
...other options...,
open : function() {
popup.css('margin-bottom', 0 - popup.height());
},
});
2) For the dialog container, set the position to absolute and adjust the top and left. To put it in the right place, add the offset position of where it is getting placed to the top value that jquery set. The calculation is similar for left.This should do it, but different parameters to the dialog may require different calculations.
When the slideshow ends(when all the pictures displayed) it does not start over, gets stuck at the end.
Any help is appreciated.
Here is the code:
$(".flexslider").flexslider({
animation: "fade",
controlsContainer: ".flex-container",
useCSS: false,
touch: true,
controlNav: false,
animationLoop: false,
smoothHeight: true,
slideshowSpeed: 4500,
slideshow: true,
pauseOnHover: true
});
You need to change the folowing line:
animationLoop: false,
to
animationLoop: true,
Also make sure that you don't hover the slider as the folowing line of code in your example will make it pause on hover (mouse over):
pauseOnHover: true
Try to use reverse: true for starting back to 1
Edit: I still have not resolved this issue. If anyone has advice I would appreciate it.
I have a jquery slider with two bars that the user can change to select a price range. Below the slider I display min: $xxx and max: $xxx to show the current price range. Here's the code:
$("#slider-price .slider").slider({
step: 10,
animate: true,
range: true,
min: 0,
max: 500,
values: [range_price[0],range_price[1]],
slide: function() {
range_price = $(this).slider("option", "values");
$("#low-price-label").text("Min: $"+range_price[0]);
$("#high-price-label").text("Max: $"+range_price[1]);
}
});
The slide option looks at what the value of the slider is, and updates the min and max numbers. However, they only change on mouseup, after the user is done sliding the bar. I want the numbers to update as the user is sliding the bars. How do I do this?
I use this in a media player I wrote
slide: function(event, ui) {
$("#amount").text(ui.value);
}
edit: Just re-read your question, you should be able to use 'ui.values' instead of value to return the array , parse it and go from there.
edit2: Try this function instead of the one you have.
slide: function(event,ui) {
range_price = ui.values;
$("#low-price-label").text("Min: $"+range_price[0]);
$("#high-price-label").text("Max: $"+range_price[1]);
}