I found this interesting Js fiddle that I am currently following: http://jsfiddle.net/ryt3nu1v/10/
This is my current result:
https://i.sstatic.net/VygSy.png
My project involves creating a slider to display different ages from an array, such as 15, 25, 35, 45, 55.
The goal is to show the next age when the "next" button is clicked.
I have implemented the following code snippet from the fiddle to achieve this:
//Age slider
$('div.result-age:gt(0)').hide(); //Hide all but the first one
var $allSlides = $('div.result-age'),
traverseDefault = "first", //set the defaults
actionDefault ="arrow-next";
$('.arrow-next,.selected-arrow-left-pointer').click(function(){
var traverse = traverseDefault,
action = actionDefault;
if($(this).is('.selected-arrow-left-pointer')){ //if action is prev
traverse = "last"; //set traverse to last in case nothing is available
action = "selected-arrow-left-pointer"; //set action to prev
}
var $curr = $allSlides.filter(':visible'), //get the visible slide
$nxtTarget = $curr[action](".result-age"); //get the next target based on the action.
$curr.stop(true, true).fadeIn(1000).hide(); //hide current one
if (!$nxtTarget.length){ //if no next
$nxtTarget = $allSlides[traverse](); //based on traverse pick the next one
}
$nxtTarget.stop(true, true).fadeIn(1000); //show the target
});
//age slider end
Here is the HTML structure I am using:
<div class="result-box">
<div class="selected-arrow-left-pointer"></div>
<div class="result-age"><span><h4 v-for="(row,key,index) in ages">ALL ages here currently being display all at once</h4></span></div>
<div class="arrow-next"></div>
</div>
Currently, my design features the age displayed in the center with navigation buttons for previous and next on the sides.
What might I be overlooking in this setup?