javascript - How do i show a specific slide in Flexslider when someone clicked on sub nav item using jQuery? -

javascript - How do i show a specific slide in Flexslider when someone clicked on sub nav item using jQuery? -

i'm trying specific flexslider slide show when sub-menu-item clicked.

i have added data-attributes slider , slide should active receive jquery (at to the lowest degree plan):

<div id="main-nav" class=""> <ul> <li class="item1"> <a href="#" class="scroll-link" data-id="whatever">whatever</a> <ul id="sub-nav1"> <li><a href="#" data-slider="1" data-slide="0">action</a></li> <li><a href="#" data-slider="1" data-slide="1">another</a></li> <li><a href="#" data-slider="1" data-slide="2">something</a></li> </ul> </li> <li> <a href="#" class="scroll-link" data-id="whatever1">whatever1</a> <ul id="sub-nav2"> <li><a href="#" data-slider="2" data-slide="0">action</a></li> <li><a href="#" data-slider="2" data-slide="1">another</a></li> <li><a href="#" data-slider="2" data-slide="2">something</a></li> </ul> </li> <li> <a href="#" class="scroll-link" data-id="whatever2">whatever2</a> <ul id="sub-nav3"> <li><a href="#" data-slider="3" data-slide="0">action</a></li> <li><a href="#" data-slider="3" data-slide="1">another</a></li> <li><a href="#" data-slider="3" data-slide="2">something</a></li> </ul> </li> </ul>

let's first flexislider:

<div class="flexslider" id="flexslider1"> <ul class="slides"> <li> <h3>flexslider slide 1</h3> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit. tempora provident velit quidem veniam temporibus, ipsa molestias rem dicta rerum et eveniet consequuntur nobis aliquid sed corporis exercitationem iusto impedit dolorem.</p> </li> <li> <h3>flexslider slide 2</h3> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit. doloremque natus vel aliquid omnis iusto ullam rerum commodi, quia ex illo libero odit laborum delectus sapiente pariatur sequi adipisci incidunt deleniti!</p> </li> <li> <h3>flexslider slide 3</h3> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit. magnam, repudiandae qui vitae nesciunt culpa aperiam amet beatae laborum excepturi eos, quos ex illum distinctio quo. fugiat ut ullam, sapiente sed.</p> </li> </ul> </div>

all of flexsliders initiated in head:

<script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); }); </script>

and jquery code trying manipulate sliders based on sub-menu-item they've clicked on:

$('#sub-nav li a').on('click', function(event) { event.preventdefault(event); var $sliderno = $(this).attr('data-slider'); var $slide = $(this).attr('data-slide'); var $slider = "#flexslider" + $sliderno; $($slider).flexslider($slide); });

what had was.

$('#sub-nav li a').on('click', function(event) { event.preventdefault(event); //use info instead of attr var $sliderno = $(this).data('slider'); var $slider = "#flexslider" + $sliderno; var $slide = $(this).data('slide'); $($slider).flexslider($slide); // won't run! - why? });

javascript jquery flexslider