Hi, I’m hoping I can find some help on how to tackle a nested slideshow that just isn’t working for me.
Here is a pic of what I’m trying to do:
I’m currently attempting to accomplish this using Jquery and slider.js.
What I ideally would like to do is have the top navigation rotate through the clients (which would change the child slideshow, objective paragraph and what we cultivated paragraph). Then on each client I would like the child slideshow (the one with grey arrows on each side) to rotate through some images (currently I’m just using some dummy text in place of images)
So far I have been able to make the middle slideshow work but I can not get the top container slideshow to rotate everything (the child slideshow, Objective and What we cultivated) without causing all kinds of problems.
Does anyone have any suggestions? I’m stuck.
Here is the code I’m using for the slideshow:
<div id="slides_two" class="container_24 slider_clients">
<!-- Top Slider Navigation to rotate clients -->
<div class="grid_1 prefix_4">
<a id="mainlf_slidenav" class="prev"></a>
</div>
<div class="grid_12 prefix_1 slider_headertxt">
<p>Nspire Software - Web</p>
</div>
<div class="grid_1 prefix_1">
<a id="mainrt_slidenav" class="next"></a>
</div>
<!-- END Top Slider Navigation to rotate clients -->
<div id="slides" class="slider_group alpha">
<div class="clear_left">
<div class="grid_2 clear_left">
<!-- "previous slide" button -->
<a class="prev" id="sublf_slidenav"></a> <!-- Affects the <li> for each image in slider_background -->
</div>
<div class="grid_20 slider_background slides_container"> <!-- DIV FOR PHOTOS OF EACH CLIENT -->
<div>
<li><img src="#" alt="Client Image 1" />test 1 </li>
<li><img src="#" alt="Client Image 2" />test 2 </li>
<li><img src="#" alt="Client Image 3" />test 3 </li>
<li><img src="#" alt="Client Image 4" />test 4 </li>
</div>
<div>
another test
</div>
</div> <!-- END slider_background -->
<div class="grid_2">
<!-- "next slide" button -->
<a id="subrt_slidenav" class="next"></a> <!-- Affects the <li> for each image in slider_background -->
</div>
<div class="clear_left">
<div id="slider_objective" class="grid_9 prefix_2">
<h2>Objective:</h2>
<p>Design a website that engages visitors with a fun, yet professional, tone while drawing interest in the array of products offered by Nspire and connecting visitors tot he people who make up the company through the use of social media.</p>
</div> <!-- END slider_objective -->
<div id="slider_cultivated" class="grid_11 prefix_1">
<h2>What We Cultivated:</h2>
<ul>
<li>Fun & Professional tone by using strategic copywriting</li>
<li>Latest blog posts widget that dynamically pulled posts</li>
<li>Twitter integration showing the most recent tweet</li>
<li>Salesforce CRM integration with forms</li>
<li>Interactive product descriptions</li>
</ul>
</div> <!-- END slider_cultivated -->
</div> <!-- END clear_left -->
</div> <!-- END slider_box -->
</div> <!-- END slider_group -->
</div> <!-- END div container_24 -->
<script language="javascript">
$(function(){
$("#slides").slides({
next: 'next'
});
});
</script>