I built a quick just-image slider for a presentation about Hungary.
Desktop version is fine, tested on iPhone 4 it's fine, but when we
test it on iPhone 6 the swipe function won't work.
This is only happening on first attempt, if we rotate the device and rotate back, the swiping is back in business. But it will be viewed by customers, so if they can't use it properly on first attempt, they might just close it and won't try again.
I'm using Swiper for this slider.
link to my slider
It is because you init Swiper when it is "display:none" (in mobile Portrait mode). Don't do that, or call it's ".update(true)" method when you make it visible again
Related
The Problem is when I swipe the carousel at that time the whole website is moving down.This issue only for IOS mobile(EX iPhone 5,6,7,8,10,11 etc).Please help me I can't figure out.
Website link:https://www.dubairent.com/property/-1-bed-high-floor-szr-view-vacant-spacious-470012
Please check-in iPhone
I am constructing a web-site from scratch and I am using the following code from W3 to implement an image comparison slider : https://www.w3schools.com/howto/howto_js_image_comparison.asp
I implemented it in my web-site succesfully, and it works just fine on desktop browsers.
But unfortunately, it does not work too well on some mobile devices.
If you try it on a samsung tab 3 or any other samsung device (even other brands as well), once you "touch" the slider, it does not move, unless you "touch" again in a different position, the slider will move to that position.
It is more of a click here and there rather than a slider.
I tried debugging with javascript (not an expert here) but I didnt manage to actually find something conclusive.
I saw that both "mouse" and "touch" events are managed...
You can test it directly by going to above link and go to developer tools / as galaxy tab 3
I'm developing a website that heavily uses FullpageJS:
http://dev.oxplore.surge.online/
On the very first section, I've got a horizontal scrolling section with six slides. I can scroll between them all the way to the last-but-one slide. After that, the plugin loops back to the first slide, despite loopHorizontal being set to false.
The issue is most likely caused by a problem in my own CSS/JS, since making a from-scratch demo of Fullpage horizontal scrolling works fine. But I can't figure out what's interfering, so I thought I'd ask here for help.
*Note: a lot of JS re-arrangement of the page structure happens before Fullpage is called. However, the HTML is definitely in the right structure when Fullpage is called, so it should work.
*Note: the site is developed on a Drupal back-end (not my choice), but that shouldn't be affecting the plugin.
Steps to reproduce it
Scroll horizontally through the slides in the first section
After reaching slide 5, press right-arrow again.
Instead of advancing to slide 6, we loop back to slide 1 again.
Versions
Chrome, Firefox, IE, Mobile, etc
Testing this current project I'm working on (http://hp1.icorp.net/datatv/mwc/index.html) and it's fine on desktop but on my iPhone 6, the page loads but I can't seem to swipe downwards for more content. I'm wondering if it's because I'm using the Skrollr JS scripts to add parallax and other animated effects to the site.
The good news is that the navigation does work, so it does point down to the right portions of my one pager, but because there are animation opacity effects added, I can't see my content without swiping.
Never mind. I found out to make it work on iOS, you have to add another div or section tag with the class of 'skrollr-body' to make that work. Sneaky!
I am developing a website that will have a carousel on a page using iScroll 4. I noticed a strange problem on Android 2.2 and 2.3 devices. I did not notice it on Android 2.1 or Android 3 or any non-Android device. This problem happens whether I use iScroll 3 or iScroll 4.
When I press the back or forward buttons, the carousel does not properly update. The images don't scroll, or they only scroll partway. If I press the forward button enough times, it may disappear as if I have reached the end of the list (as a result of my style on the "disabled" class), and likewise with the back button.
If I scroll the page up or down, then the carousel will update and work fine for a while. Does anyone know why this is happening or what to do about it?
You can see an example at http://jsfiddle.net/R4NWE/. If you want to access the example directly using a mobile browser, you can do so at http://fiddle.jshell.net/R4NWE/show/.
I figured out a solution. I put this in the "scroll" option that I am passing to CarouFredSel:
onAfter: function() {
var transform = $("#scroller").css("-webkit-transform");
$carousel.closest("#scroller").css("-webkit-transform", transform);
}