I have recently started to learn jQuery and have been developing a responsive carousel to practice however I am encountering a strange problem where .show() doesn't seem to work correctly on Safari for the iPad.
The issue I am having is that when I click the left arrow I want the second slide to display however this doesn't seem to work (works in all other browsers including Chrome for the iPad), if I change the code to show the third slide rather than the second it works fine so I think the problem has something to do with displaying an immediate sibling.
Apologies for all the code I wasn't sure whether you needed to see the html and css, I also hosted a test of the carousel so if you have an iPad you can see the issue at
http://guesthouse.cf/slider_test (every now and again it will work which makes it even more confusing but most of the time the current slide will hide but slide 2 won't show).
html
<div class="wrapper">
<div class="carousel">
<div class="inner">
<div class="slide" data-index="1"></div>
<div class="slide" data-index="2"></div>
<div class="slide" data-index="3"></div>
</div>
<div class="arrow left"></div>
<div class="arrow right"></div>
</div>
</div>
css
.wrapper {
max-width: 1200px;
margin: 0 auto;
position: relative;
width: 100%;
}
.carousel {
padding-top: 40%; /*((slide-height/max-width)*100)*/
position: relative;
width: 100%;
}
.inner {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.slide {
background-size: 100%;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
overflow: auto;
}
.slide:nth-child(1) {
display: block;
}
.arrow {
border-top: 3px solid #fff;
cursor: pointer;
padding-top: 2%;
position: absolute;
top: 50%;
width: 2%;
}
.arrow.left {
-moz-transform-origin: 0 0;
-moz-transform: rotate(-45deg);
-webkit-transform-origin: 0 0;
-webkit-transform: rotate(-45deg);
border-left: 3px solid #fff;
left: 2%;
transform-origin: 0 0;
transform: rotate(-45deg);
}
.arrow.right {
-moz-transform-origin: 100% 0;
-moz-transform: rotate(45deg);
-webkit-transform-origin: 100% 0;
-webkit-transform: rotate(45deg);
border-right: 3px solid #fff;
right: 2%;
transform-origin: 100% 0;
transform: rotate(45deg);
}
jQuery
;(function ( $, window, document, undefined ) {
var pluginName = "Carousel",
defaults = {
};
function update_slides(element, options){
};
function Plugin( element, options ) {
this.element = $(element);
this.options = $.extend( {}, defaults, options) ;
var initials = {
}
$.extend( {}, initials, this.options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
this.manual_navigation(this.element, this.options)
},
manual_navigation: function( element, options ) {
element.find('.arrow.left').click(function() {
element.find('.slide[data-index="1"]').removeClass('show');
element.find('.slide[data-index="1"]').addClass('hide');
element.find('.slide[data-index="2"]').removeClass('hide');
element.find('.slide[data-index="2"]').addClass('show');
});
element.find('.arrow.right').click(function() {
element.find('.slide[data-index="3"]').show();
});
}
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName,
new Plugin( this, options ));
}
});
};
})( jQuery, window, document );
$(document).ready(function() {
$(".carousel").Carousel();
});
I think the issue might have something to do with .wrapper having a width of 100% because if I change it to 50% everything seems to work, unfortunately the website I want to use the carousel on needs the width to be 100%.
Thanks for taking a look and hopefully someone has encountered something similar before.