Menu
So I'm currently working on http://coin.codeclimb.com and for some reason the owl carousel slider on the homepage is not working on iPhone safari. When I slide on iPhone it is swiping ALL the content on the whole page and breaking things. I can not replicate the problem on desktop. Therefore I can not use dev tools to identify the problem.
It's as if there are 15 slides when there is only 2, it just keeps letting you slide and the more you slide, the further it pushes all the content on the entire page, including the navigation.
Any ideas whats going on? I am using Safari on iPhone 7 Plus.
798
Use the [interval]="'0'" input. This will disable the auto-sliding feature. Here's the link to the Carousel Documentation.
Use transitionStyle option to set transtion. There are four predefined transitions: "fade" , "backSlide" , goDown and scaleUp . You can also build your own transition styles easily. For example by adding "YourName" value transitionStyle: "YourName" , owlCarousel will add .
You have a couple of issues here:
overflow-x:hidden does not work on the body element in certain versions of mobile safari. This means that your content is spilling horizontally out of its container. This confuses the browser as it does not know which element it should be scrolling. overflow:hidden from line 77 of owl.css, and added lines 1121 to 1134 of your style.css file, directly affecting the functionality of OwlCarousel.The easiest solution is to add overflow-x:hidden to the html element instead of the body element, and remove your extra lines from style.css
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With