I would like to use a horizontal slider which include one vertical slider in one or several of it's slides (it will be dynamically built). I tested it whith the following piece of code but I would like to add vertical arrows to the vertical slider(s) and till now I couldn't succeed.
I tried by using AppendForwardTo and AppendBackwardTo but it seems working only on the first horizontal slider. So I'm wondering if somebody already got this requirement and problem...
<body>
<div>
<div style="height: 450px;">
<div id="Div2">
</div>
<ul id="slider">
<li> <h2> H1 First Slide of the master horizontal slider</h2></li>
<li> <h2> H2 Second Slide of the master horizontal slider</h2> </li>
<li> <h2> H3 Third Slide of the master horizontal slider</h2> </li>
<li>
<div style="height: 350px;">
<div id="arrow-up">
</div>
<ul id="slider2">
<li> <h2> V1 First Slide of the secondary vertical slider in slide H4</h2></li>
<li> <h2> V2 Second Slide of the secondary vertical slider in slide H4</h2> </li>
<li> <h2> V3 Third Slide of the secondary vertical slider in slide H4</h2> </li>
</ul>
<div id="arrow-down">
</div>
</div>
</li>
<li> <h2> H5 Fifth Slide of the master horizontal slider</h2> </li>
</ul>
<div id="Div1">
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#slider').anythingSlider({
theme: 'minimalist-square',
buildArrows: true,
expand: true,
infiniteSlides: false,
stopAtEnd: true,
// appendForwardTo: $('#Div1'),
// appendBackTo: $('#Div2'),
autoPlay: false
});
$('#slider2').anythingSlider({
theme: 'minimalist-square',
buildArrows: true,
expand: true,
vertical: true,
// appendForwardTo: $('#arrow-down'),
// appendBackTo: $('#arrow-up'),
autoPlay: false
});
}); // end ready
</script>
</body>
Try this code for vertical slides.
});