Ресурсы
Я использую royalSlider как плагин. Ниже приведена быстрая ссылка на документацию и API.
На моем сайте слайдер работает как полноэкранный слайдер height: 100%; width: 100%
.
Структура содержимого
Структура моего сайта довольно проста: у меня есть слайды, которые я использую в качестве обложки, позволяет называть их .cover
, за которыми следует слайд, содержащий дополнительную информацию. Давайте назовем их .sub
.
Content Cover Nr. 1
Subslide Content Nr. 1
Content Cover Nr. 2
Subslide Content Nr. 2
Content Cover Nr. 3
Subslide Content Nr. 3
Content Cover Nr. 4
Subslide Content Nr. 4
Если это проще понять, вы можете проверить прямой сайт здесь.
Внутри функции, которая добавляет мои вспомогательные слайды, я создаю три кнопки с правой стороны для прокрутки вверх, прокрутки вниз и закрытия текущего слайда. Прокрутка работает отлично. (Проверьте здесь main.js, строка 177)
Проблема
Браузер привязывает кнопки all, выбранные с помощью $(p.sl_button)
к тому же суб слайду, вместо привязки each к его собственному родительскому объекту.
Трудно объяснить, легко попробовать. Если вы, например:
- Open Subslide Number 5
- Open Subslide Number 2
- Выделите номер 5 подписок
- Нажмите кнопку Закрыть (X с красным фоном)
система "ломается". Вместо закрытия Subslide Number 5 он закрывает номер 2 подклада (который был последним, вызывала вызываемую выше функцию.
Как я могу исправить эту проблему?
Код, который я использую для привязки кнопок на моих оглавлениях:
// Append Slides by ID and Database
function appendIt(num_id) {
var $parid = num_id.parents('.rsContent').attr('id');
var $sub_id = sliderInstance.currSlideId + 1;
// get current slide id & increase by 1
// append html slide
sliderInstance.appendSlide(eval($parid), $sub_id);
sliderInstance.next();
// close button on sub slides
$('.scrolldown').on('click', function(){
sliderInstance.next();
});
// Scroll Slide Up
$('.scrollup').on('click', function(){
sliderInstance.prev();
});
// Close Subslide
$('.close').on('click', function(){
$('#'+$parid+' p.sl_button').addClass('in');
sliderInstance.prev();
setTimeout( function(){sliderInstance.removeSlide($sub_id);} , 600 );
});
};
Если вам нужна дополнительная информация для воссоздания моей ошибки, не стесняйтесь спрашивать. Я ценю любую помощь или затруднения в отношении этой темы. Заранее благодарю всех, кто копается в моей проблеме.