Using the IOSSlider plugin with JQUery UI is causing the slider to not load images when clicking away to another tab then clicking back to the tab where the slider is present.
<html>
<head id="head">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src = "/jquery.iosslider.min.js"></script>
<link href="/iosSlider.css" media="all" rel="Stylesheet" type="text/css" />
<style>
.ui-tabs .ui-tabs-hide {display: none !important; }
</style>
<script>
$(document).ready(function () {
$("#col").tabs({
fx: { opacity: 'toggle' }
});
$('.iosSlider').iosSlider({
scrollbar: true,
snapToChildren: true,
desktopClickDrag: true,
infiniteSlider: true,
autoSlide: true,
autoSlideTimer: 2500,
navSlideSelector: $('.iosSliderThumbs .thumb'),
scrollbarHeight: '2',
scrollbarBorderRadius: '0',
scrollbarOpacity: '0.5',
onSlideChange: slideContentChange,
onSliderLoaded: slideContentChange,
keyboardControls: true
});
function slideContentChange(args) {
/* indicator */
$('.iosSliderThumbs .thumb').removeClass('selected');
$('.iosSliderThumbs .thumb:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
}
});
</script>
</head>
<body>
<div id="col">
<div id="tabMenu">
<ul>
<li><a href="#tabs-1">tab 1</a></li>
<li><a href="#tabs-2">tab 2</a></li>
<li><a href="#tabs-3">tab 3</a></li>
</ul>
</div>
<div id="tabs-1">
<div class = 'iosSlider'>
<div class = 'slider'>
<div class = 'item' id = 'item1' style="background: url(/1.jpg) no-repeat 0 0;"></div>
<div class = 'item' id = 'item2' style="background: url(/2.jpg) no-repeat 0 0;"></div>
<div class = 'item' id = 'item3' style="background: url(/3.jpg) no-repeat 0 0;"></div>
</div>
</div>
<div class = 'iosSliderThumbs'>
<div class = 'thumb' id = 'item1' style="background: url(/1thumb.jpg) no-repeat 0 0;"></div>
<div class = 'thumb' id = 'item2' style="background: url(/2thumb.jpg) no-repeat 0 0;"></div>
<div class = 'thumb' id = 'item3' style="background: url(/3thumb.jpg) no-repeat 0 0;"></div>
</div>
</div>
<div id="tabs-2">
tab 2 text
</div>
<div id="tabs-3">
tab 3 text
</div>
</div>
</body>
</html>
Using the IOSSlider plugin with JQUery UI is causing the slider to not load images when clicking away to another tab then clicking back to the tab where the slider is present.
Here is the code:
Is there a setting to fix this or any other solution?