Вложенные горизонтальные ползунки с кнопками управления

Question

Как получить вложенный горизонтальный слайдер для работы с элементами управления кликами, показывая / скрывая их?

Я использую Swiper, который у меня почти работает, за исключением того, что если вы нажмете / перейдете во вложенный слайдер, вы не сможете вернуться с первого слайда без первого перехода на один слайд. Если вы нажмете весь путь до конца и обратно, он работает отлично. В API Swiper доступно множество обратных вызовов.

Мой прогресс до сих пор: вложенный слайдер Fiddle

$(document).ready(function() {

  var swiperH = new Swiper('.swiper-container-h', {
    pagination: '.swiper-pagination-h',
    paginationClickable: true,
    spaceBetween: 0,
    nextButton: '.h-next',
    prevButton: '.h-prev',
    onSlideChangeStart: function() {
      if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-v')) {
        console.log('nested');
        $('.h-prev, .h-next').hide();
      } else {
        console.log('notnested');
        $('.h-prev, .h-next').show();
      }
    },
    onReachBeginning: function() {},
    onReachEnd: function() {}
  });

  var swiperV = new Swiper('.swiper-container-v', {
    pagination: '.swiper-pagination-v',
    paginationClickable: true,
    direction: 'horizontal',
    spaceBetween: 0,
    nextButton: '.v-next',
    prevButton: '.v-prev',
    nested: true,
    onReachBeginning: function() {
      $('.h-prev').show();
    },
    onReachEnd: function() {
      $('.h-next').show();
    },
    onSlideChangeStart: function(slides) {
      if (slides.activeIndex === 1) {
        console.log('slide 2');
      }
    }
  });

});

РЕДАКТИРОВАТЬ:

Убрал скрипку, используя ответ @TheOnlyError здесь и здесь:

$(document).ready(function() {

var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 0,
nextButton: '.h-next',
prevButton: '.h-prev',
onSlideChangeStart: function() {
  if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-v')) {
    $('.h-prev, .h-next').hide();
  } else {
    $('.h-prev, .h-next').show();
  }
},
onSlideNextStart: function() {
  $('.h-prev').show();
}
});

var swiperV = new Swiper('.swiper-container-v', {
  pagination: '.swiper-pagination-v', 
  paginationClickable: true,
  direction: 'horizontal',
  spaceBetween: 0,
  nextButton: '.v-next',
  prevButton: '.v-prev',
  nested: true,
  onReachBeginning: function() {
    $('.h-prev').show();
  },
  onReachEnd: function() {
    $('.h-next').show();
  },
 });
});

Edit2:

Просто столкнулся с тем, что если первый слайд является вложенным, это не работает. Чтобы решить эту проблему, вам также нужно добавить:

onInit: function(){
        if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-h-inner')) {
            $('.prev, .next').hide();
        }
},

к первому слайдеру: скрипка

Answer 1

Проблема в том, что Swiper не обнаружит переход между отдельными объектами Swiper. Решением будет проверка, когда кто-то переместился к следующему слайду с первого горизонтального, чтобы показать предыдущую кнопку.

Так что добавьте эту функцию в ваш первый объект Swiper:

onSlideNextStart: function(swiper) {
  $('.h-prev').show();
}

Проверьте скрипку.