I need to prevent swiping by dragging (mouse, fingers), but keep it when using pagination buttons and next or prev button.
Here is how I initialize it:
var pcSwiper = new Swiper('.swiper-container_pc', {
direction: 'horizontal',
slidesPerView: 'auto',
spaceBetween: 20,
nested: true
});
As I found out disableTouchControl method also disables mouse dragging (not only touch dragging). So, the name and description of this method are a little bit unclear, but it works.
pcSwiper.disableTouchControl();
Related
Is there a way to let users scroll free inside a slick slider without jumping back to an element?
At the moment I can only scroll from one slider item to the next. I want to allow scrolling like in a browser with the mouse or by dragging the elements.
I found the option swipeToSlide which allows users to drag or swipe directly to a slide irrespective of slidesToScroll.
That's nice but not a free scrolling with the mouse.
Is there any solution to to that?
Here's my current slick code:
$('.multiple-items').slick({
infinite: true,
swipeToSlide: true,
slidesToShow: 3,
slidesToScroll: 3
});
Working example
I found myself in this question as i'm trying to achieve the exact same functionality as the one you describe.
I found a way to enable mouse wheell scrolling but NOT free scrolling. So when you rotate your mouse wheel up it goes to the next slide and when you rotate your mouse wheel down it goes to the previous slide.
The code for this functionality is the following:
$('.multiple-items').on('wheel', (function(e) {
e.preventDefault();
if (e.originalEvent.deltaY < 0) {
$(this).slick('slickPrev');
}else {
$(this).slick('slickNext');
}
}));
Have you managed to achieve the free scrolling?
I'm trying to create a vertically scrollable and draggable list with swiper.js, and I've almost reached the goal. There is only one issue left:
The mousewheel scrolling feels very laggy. After every scroll, there is a small delay before the next one is registered. Check out the behavior here:
http://idangero.us/swiper/demos/20-mousewheel-control.html
This is my configuration so far:
this.swiper = new Swiper(this.$el, {
direction: 'vertical',
centeredSlides: true,
spaceBetween: 0,
grabCursor: true,
slidesPerView: 'auto',
mousewheelControl: true,
}
I haven't found a way to disable this. The only property that sounds like it could help, mousewheelSensitivity, does not seem to change the behavior at all.
Is this even possible or do I need to change swiper.js internals for this to work?
I have the same issue, and haven't found a final answer for this, however, I noticed that adding the next options helps a little:
mousewheelSensitivity: 0,
mousewheelReleaseOnEdges: true,
If you have found any other solution, please share it with us.
Mousewheel Methods & Properties:
function disableScrolling() {
swiper.mousewheel.disable();
}
I'm working on an horizontal scrolling website.
On it, I'm using mousewheel.js plugin (to allow horizontal scroll with mouse wheel) and the magnific-popup plugin.
When someone activates the magnific-popup plugin by clicking on a photo, it opens the photo, as it should be, and background scrollbars are disabled.
But, as I'm using mousewheel.js, the background is still scrollable with mouse wheel.
How would it be possible to disable background scrolling only when magnific-popup is showing a photo ?
I have a similar problem. This decision helped me in part.
$('#open_button').magnificPopup({
type: 'inline', // Custom settings, never mind
closeBtnInside: false, // Custom settings, never mind
fixedContentPos: false, // Custom settings, never mind
fixedBgPos: true, // Custom settings, never mind
callbacks: {
open: function() { // When you open the
$('body').css('overflow', 'hidden'); // window, the element
}, // "body" is used "overflow: hidden".
close: function() { // When the window
$('body').css('overflow', ''); // is closed, the
}, // "overflow" gets the initial value.
}
});
fixedContentPos: true,
overflowY: 'hidden',
This should work!
recently I am working on a page using this awesome plugin:
https://github.com/peachananr/onepage-scroll
However I am not familiar with JavaScript so I will be obliged if someone could explain to me few things:
I'd like to combine one-scroll-page behaviour with anchor scrolling, simple example:
function scrollContent(id) {
$('html, body').animate({ scrollTop: $('#' + id).offset().top }, 1000 );
}
as far as I know there is an embedded function called "$.fn.moveTo(page_index)"(see plugin link) but I wasn't able to use it successfully.
I'd like to turn a slider when leaving page #1 to save resources, slider launches with function:
$('#da-slider').cslider({
autoplay : true,
interval : 8000,
});
tried to simply turn off autoplay by messing with callbacks but it turned out to be bad solution:
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(#1) {
$('#da-slider').cslider({
autoplay : off,
interval : 8000,
});
}, // This option accepts a callback function. The function will be called after the page moves.
loop: true, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: 600, // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
direction: "horizontal" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".
});
Every tip, even link to jquery tutorial will be very helpfull. Thanks in advance!
Solution found:
$("#your-div-id").on("click", function(){$(".main").moveTo(2);});
I'm using AnythingSlider (fun toy) as a website where the panels are the site's pages. As such, I want to disable and remove the Start/Stop button but leave the rest of the navigation. I'm under the impression that it's part of the navigation and can't be optioned out. If that's correct, how do I do it?
Actually, I want to move the navigation to the top right of the panel, as well.
Cheers
Completely removing the "start/stop" button:
buildStartStop: false
(no hiding, no tricks, simply removed)
From the examples here: http://css-tricks.com/examples/AnythingSlider/
The 2nd example does not have the button. If you read the source:
$('#slider2').anythingSlider({
width : 600, // if resizeContent is false, this is the default width if panel size is not defined
height : 350, // if resizeContent is false, this is the default height if panel size is not defined
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
autoPlay : false, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
navigationFormatter : formatText // Format navigation labels with text
})
Look at autoPlay. It is clearly responsible for the start/stop functionality, including the button.
Hiding play/stop button, but still working with autoplay:
startText : '',
stopText : '',
Call of the dogs. It is an option:
autoPlay : false,