Как поменять состояние переключателя при переключении слайдов по кнопке «Следующая / Предыдущая»?

Question

Я сделал простой слайдер, но он не работает должным образом: https://jsfiddle.net/iamolivia/r1d96eyx/1/

Когда я нажимаю кнопку «Далее / Назад», радио не меняет состояние. Как я могу дополнить этот код?

 $('.controls').click(function(){
    $( ".slide" ).animate({opacity: .4});
    id = $(this).data('b');
    $('.slide').removeClass('active');
    $('#'+id).addClass('active');
    $( ".slide" ).animate({opacity: .9});
});

var i=1;
var cur = 0; 
$('.next').click(function(){
    $( ".slide" ).animate({opacity: .4});
    cur = i+1;

    if(i<3)
    {
        $('.slide').removeClass('active');
        $('#b' + cur).addClass('active');
        i++;
        $( ".slide" ).animate({opacity: .9});
    }
   else if(i==3)
    {
        i=1; cur=1;
        $('.slide').removeClass('active');
        $('#b' + cur).addClass('active');
        $( ".slide" ).animate({opacity: .9});
    }
});

$('.prev').click(function(){
    $( ".slide" ).animate({opacity: .4});
    cur = i-1;
    i--;

    $('.slide').removeClass('active');
    $('#b' + cur).addClass('active');
    $( ".slide" ).animate({opacity: .9});

    if(i<1)
    {
        i=3; cur=3;
        $('.slide').removeClass('active');
        $('#b' + cur).addClass('active');
        $( ".slide" ).animate({opacity: .9});
    } 
}); 

Answer 1

Для этого вам нужно установить свойство checked на радиостанции .control, которое соответствует индексу активного слайда. Для этого вы можете использовать eq(), index() и prop().

Однако стоит отметить, что ваша логика c намного сложнее, чем должна быть. Вы можете упростить его, удалив инкрементные переменные, которые подсчитывают индекс текущего слайда, и просто поработали с классом .active в DOM, чтобы определить, каким будет следующий показанный слайд с использованием prev() и next(). Также обратите внимание на использование атрибута data-dir для DRY логики c между обработчиками кнопок.

var $controls = $('.controls').on('change', function() {
  var $slides = $(".slide").stop().animate({ opacity: .4 });
  $slides.removeClass('active');
  id = $(this).data('b');
  $('#' + id).addClass('active');
  $slides.animate({ opacity: .9 });
});

$('.next, .prev').click(function() {
  var direction = $(this).data('dir');
  var $slides = $(".slide").stop().animate({ opacity: .4 });
  var $activeSlide = $slides.filter('.active').removeClass('active');
  var $targetSlide = $activeSlide[direction]();
  if ($targetSlide.length === 0)
    $targetSlide = $slides[direction == 'next' ? 'first' : 'last']()
  $targetSlide.addClass('active');
  $controls.eq($targetSlide.index()).prop('checked', true);
  $slides.animate({ opacity: .9 });
});

.wrapper {
  height: 250px;
  overflow: hidden;
}

.slider {
  height: 250px;
}

.slide {
  height: 100%;
  width: 100%;
  display: none;
  padding: 20px;
  color: #fff;
  font-weight: 900;
  opacity: 1;
}

.control {
  transform: translateY(-50px);
}

.slide:nth-of-type(1) {
  background: #dd2525;
}

.slide:nth-of-type(2) {
  background: #3791ee;
}

.slide:nth-of-type(3) {
  background: #df6af0;
}

.active {
  display: block;
}

.prev,
.next {
  background: white;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  opacity: 0.4;
}

.prev:hover {
  opacity: 0.6;
  transform: scale(1.1);
  transition: .5s;
}

.next:hover {
  opacity: 0.6;
  transform: scale(1.1);
  transition: .5s;
}

.control input {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="wrapper">
  <div class="slider">
    <div class="slide active" id="b1">Slide 1</div>
    <div class="slide" id="b2">Slide 2</div>
    <div class="slide" id="b3">Slide 3</div>
  </div>
  <div class="control" style="text-align:center;">
    <button id="c4" class="prev" data-dir="prev" value=""><span class="glyphicon glyphicon-chevron-left"></span></button>
    <input id="c1" class="controls" name="radio" type="radio" checked="checked" data-b="b1" />
    <input id="c2" class="controls" name="radio" type="radio" data-b="b2" />
    <input id="c3" class="controls" name="radio" type="radio" data-b="b3" />
    <button id="c5" class="next" data-dir="next" value=""><span class="glyphicon glyphicon-chevron-right"></span></button>
  </div>
</div>