Comments (11)
Probably not. If you need it I suggest you to try Flex Slider which provides more options: http://www.woothemes.com/flexslider/
from responsiveslides.js.
Thanks for the advice :)
from responsiveslides.js.
Wondering why you're choosing not to include this? It is a responsive carousel after all, seems one of the only missing important features if you ask me.
from responsiveslides.js.
Just because of time constraint… After all, I'm developing this plugin on my free time. "Taping on slider displays the next slide" is already possible to do though (http://viljamis.com/responsive-slides/themes/).
This all might change though if I need the plugin in a client project and the client is willing to pay for the development. :-)
from responsiveslides.js.
Fair enough. Thanks for the "tapping slider advances" info!
from responsiveslides.js.
Hi,
you can make the slider touch-enabled by adding some js:
Add:
https://github.com/stephband/jquery.event.move/blob/master/js/jquery.event.move.js
https://github.com/stephband/jquery.event.swipe/blob/master/js/jquery.event.swipe.js
Those two scripts are really just a few kb
Now, add the following script for making the responsiveslide.js touch-enabled:
// Next Slide on Swipe
if ($(window).width() < 992) { // Only if device's width is smaller than 992px
var slides = jQuery('.rslides'),
i = 0;
slides
.on('swipeleft', function(e) {
$('.rslides_nav.next').click();
$(".rslides").mouseenter();
setTimeout(function() { $(".rslides").mouseleave(); }, 2000); // Delay automatic sliding for 2seconds after swiping
})
.on('swiperight', function(e) {
$('.rslides_nav.prev').click();
$(".rslides").mouseenter();
setTimeout(function() { $(".rslides").mouseleave(); }, 2000); // Delay automatic sliding for 2seconds after swiping
});
// If the movestart is heading off in an upwards or downwards direction, prevent it so that the browser scrolls normally.
jQuery('.rslides')
.on('movestart', function(e) {
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
});
}
This is of course the code that works for me. You probably have to change some details for your own project.
from responsiveslides.js.
Hi dasmax,
where to put this code?
in responsivesildes.js file or on HTML file ?
from responsiveslides.js.
Probably something like this:
<script type="text/javascript" src="js/responsiveslides.js"></script>
<script type="text/javascript" src="js/jquery.event.move.js"></script>
<script type="text/javascript" src="js/jquery.event.swipe.js"></script>
<script type="text/javascript">
// Next Slide on Swipe
if ($(window).width() < 992) { // Only if device's width is smaller than 992px
var slides = jQuery('.rslides'),
i = 0;
slides
.on('swipeleft', function(e) {
$('.rslides_nav.next').click();
$(".rslides").mouseenter();
setTimeout(function() { $(".rslides").mouseleave(); }, 2000); // Delay automatic sliding for 2seconds after swiping
})
.on('swiperight', function(e) {
$('.rslides_nav.prev').click();
$(".rslides").mouseenter();
setTimeout(function() { $(".rslides").mouseleave(); }, 2000); // Delay automatic sliding for 2seconds after swiping
});
// If the movestart is heading off in an upwards or downwards direction, prevent it so that the browser scrolls normally.
jQuery('.rslides')
.on('movestart', function(e) {
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
});
}
</script>
from responsiveslides.js.
Hi Dasmax,
I've tried your code, but it doesn't seem to work.
any chance you could update the demo.html and send a zip file.
desperately need this
tony
from responsiveslides.js.
Hi,
the above code worked fine for me. It's been a while so I can't help you any further on this. Sorry!
from responsiveslides.js.
Works for me, I removed the delay. Do not forget to add script tags for those jquery.event.move.js and jquery.event.swipe.js files!
from responsiveslides.js.
Related Issues (20)
- Firefox First Slider Problem
- Missing css for navigation
- Is there documentation explaining how to achieve the different Nav types?
- Readme out of date?
- responsiveSlides is not work my website HOT 1
- stop "auto: true" when clicking on "pager" or "nav"
- How to get current slider index HOT 1
- $slide.stop(true, true) is not a function HOT 2
- HTTPS breaks it? HOT 2
- Uncaught ReferenceError: responsiveSlides is not defined HOT 1
- Uncaught TypeError: e.size is not a function HOT 2
- Slides disappears when slider switch.
- silder not working
- Edge Issue
- getting an error
- How to import in node js
- Change Animation to fade from slide
- slide http vs https
- WCAG / ADA Compliance Issue from Malformed <UL> HTML
- Active fork ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from responsiveslides.js.