I am trying to use the iosSlider for multiple pages.
For example, to swipe from page1.html to page2.html to page3.html, and so on.
The example just shows how to go from one div to another (and I guess the DIVs have either images or text). Does anyone know how to manipulated this to go pull up a new html page?
This is the code on the iosSlider page:
jQuery:
<!-- jQuery library -->
<script type = 'text/javascript' src = '/iosSlider/jquery-1.7.min.js'></script>
<!-- iosSlider plugin -->
<script type = 'text/javascript' src = '/iosSlider/jquery.iosslider.js'></script>
HTML:
<!-- slider container -->
<div class = 'iosSlider'>
<!-- slider -->
<div class = 'slider'>
<!-- slides -->
<div class = 'slide'>...</div>
<div class = 'slide'>...</div>
<div class = 'slide'>...</div>
</div>
</div>
CSS:
/* slider container */
.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;
width: <slider width>px;
height: <slider height>px;
}
/* slider */
.iosSlider .slider {
/* required */
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .slider .slide {
/* required */
float: left;
width: <slide width>px;
height: <slide height>px;
}
JavaScript:
$(document).ready(function() {
/* basic - default settings */
$('.iosSlider').iosSlider();
/* some custom settings */
$('.iosSlider').iosSlider({
snapToChildren: true,
scrollbar: true,
scrollbarHide: false,
desktopClickDrag: true,
scrollbarLocation: 'bottom',
scrollbarHeight: '6px',
scrollbarBackground: 'url(_img/some-img.png) repeat 0 0',
scrollbarBorder: '1px solid #000',
scrollbarMargin: '0 30px 16px 30px',
scrollbarOpacity: '0.75',
onSlideChange: changeSlideIdentifier
});
});
Or if you know of another plugin or code to swipe from one page to the next, I’d accept that answer as well.
Thanks!
no code available for this yet.