Navigation for slider by checkbox

Question

Continuing experiments with my own slider. Now making nav arrows. So Im asking how to make it work? I’m using next()/prev() to make next/prev input checkbox to be checked. But next()/prev() isn’t working. Why? Here is the code.

$('.to-right').click(function(){
$('input[type="radio"]:checked').next('input[type="radio"]').prop("checked", true)
});
$('.to-left').click(function(){
$('input[type="radio"]:checked').prev('input[type="radio"]').prop("checked", true)
});

Answer 1

.next()

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

so your code $('input[type="radio"]:checked').next('input[type="radio"]') will not get the next radio button.

you can try :

$('.to-right').click(function(){
   $('input[type="radio"]:checked').next().next('input[type="radio"]').prop("checked", true);
   // first next() will get <div class="slider-content">....</div> in your code
});

same with .prev()

edit

======================================================

add class first and last to the first and last radio

<input type="radio" name="slider" id="1-1" class='first'> 
<input type="radio" name="slider" id="1-5" class='last'>

and hide the to-left nav at first

check this DEMO