fullpage오류
본문
$(function(){
//메인 풀 페이지
var cf = false;
$(document).ready(function () {
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
$(window).scrollTop(0);
if ($(window).width() < 1201) {
$('#fullpage').removeAttr('id');
}
$('#fullpage').fullpage({
responsiveWidth: 1201,
menu: '.scrollMenu > #pageMenu',
anchors: ['intro', 'news', 'sports_f', 'culture', 'tour_f'],
navigationTooltips: ['가평군시설관리공단', '공단 소식', '체육시설', '문화복지', '관광지시설'],
navigation: false,
scrollOverflow:true,
//접근성
keyboardScrolling: true,
animateAnchor: true,
recordHistory: false,
scrollOverflow: true,
css3: true,
sectionSelector: '.section',
fitToSectionDelay: 100,
fitToSection:true,
scrollingSpeed: 500,
/*20251119 수정*/
/*afterRender: function () {
$('#fullpage').css('visibility', 'visible');
},
*/
/*20251119 수정*/
//슬라이드 이동 후
afterLoad: function (index, anchorLink) {
var windowWidth = $(window).width();
// if (windowWidth > 1200) {
// var showTarget = $('section[data-anchor=' + index + ']').find(
// '.inner-contents');
// var showTarget02 = $('section[data-anchor=' + index + ']').find(
// '.inner-contents02');
// $('.inner-contents').hide();
// $('.inner-contents02').hide();
// if (showTarget) {
// showTarget.show().addClass("fadeup");
// }
// if (showTarget02) {
// showTarget02.show().addClass("slide");
// }
// if (index === 'CALENDAR' || index === 'INTRO') {
// // console.log('test');
// $("#pageMenu").addClass("white");
// } else {
// $("#pageMenu").removeClass("white");
// }
// } else {
// $('.inner-contents').show();
// }
}
})
$(document).on('keyup',function(e){
if(e.keyCode == "9") { // tab키
if(!cf){
$.fn.fullpage.destroy();
cf = true;
$('.full_content').css('visibility','visible').show();
$('.scrollMenu li a').on('click',function(){
if($(this).parent("li").attr('id') == 'page1'){
$('.page').removeClass('active');
$(this).parent("li").addClass('active');
$('.fp-section').removeClass('active');
$('#section01').addClass('active');
$('#section01 .slider_list li:first-of-type a').focus();
}else if($(this).parent("li").attr('id') == 'page2'){
$('.page').removeClass('active');
$(this).parent("li").addClass('active');
$('.fp-section').removeClass('active');
$('#section02').addClass('active');
$('#section02 h2').attr('tabindex','0').focus();
}else if($(this).parent("li").attr('id') == 'page3'){
$('.page').removeClass('active');
$(this).parent("li").addClass('active');
$('.fp-section').removeClass('active');
$('#section03').addClass('active');
$('#section03 h2').attr('tabindex','0').focus();
}else if($(this).parent("li").attr('id') == 'page4'){
$('.page').removeClass('active');
$(this).parent("li").addClass('active');
$('.fp-section').removeClass('active');
$('#section04').addClass('active');
$('#section04 h2').attr('tabindex','0').focus();
}else if($(this).parent("li").attr('id') == 'page5'){
$('.page').removeClass('active');
$(this).parent("li").addClass('active');
$('.fp-section').removeClass('active');
$('#section05').addClass('active');
$('#section05 h2').attr('tabindex','0').focus();
}
})
}
}
});
});
});
$(function(){
//메인 배너 슬라이드
var swiper1 = new Swiper('#mainSlider', {
freeMode : false,
watchOverflow : true ,
slidesPerView: 1,
loop: true,
speed: 1000,
loopedSlides: 1,
observer: true,
observeParents: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '#mainSlider .mainpage',
clickable: true,
},
navigation: {
prevEl: '#mainSlider .mainBtnPrev',
nextEl: '#mainSlider .mainBtnNext',
}
})
$("#mainSlider .mainBtnplay").css('display', 'none');
$('#mainSlider .mainBtnstop').click(function () {
swiper1.autoplay.stop();
});
$('#mainSlider .mainBtnplay').click(function () {
swiper1.autoplay.start();
});
$('#mainSlider .mainBtnps').click(function (e) {
if ($(this).hasClass('mainBtnstop')) {
$(this).css('display', 'none');
$("#mainSlider .mainBtnplay").css('display', 'inline-block');
} else {
$(this).css('display', 'none');
$("#mainSlider .mainBtnstop").css('display', 'inline-block');
}
})
//메인 팝업배너 슬라이드
var swiper2_1 = new Swiper('#popupSlider2_1', {
freeMode : false,
watchOverflow : true ,
slidesPerView: 1,
loop: false,
speed: 200,
loopedSlides: 1,
observer: true,
observeParents: true,
spaceBetween:0,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '#popupSlider2_1 .mainpage',
clickable: true,
},
navigation: {
prevEl: '#popupSlider2_1 .mainBtnPrev',
nextEl: '#popupSlider2_1 .mainBtnNext',
},
touchRatio: 0,
breakpoints: {
1025:{
autoplay:false,
slidesPerView:4,
},
769:{
autoplay:false,
slidesPerView:3,
spaceBetween:0,
loopedSlides: 1,
},
426:{
autoplay:false,
slidesPerView:2,
spaceBetween:0,
loopedSlides: 1,
},
}
})
$("#popupSlider2_1 .mainBtnplay").css('display', 'none');
$("#popupSlider2_1 .mainBtnstop").click(function () {
swiper2_1.autoplay.stop();
});
$('#popupSlider2_1 .mainBtnplay').click(function () {
swiper2_1.autoplay.start();
});
$('#popupSlider2_1 .mainBtnps').click(function (e) {
if ($(this).hasClass('mainBtnstop')) {
$(this).css('display', 'none');
$("#popupSlider2_1 .mainBtnplay").css('display', 'inline-block');
} else {
$(this).css('display', 'none');
$("#popupSlider2_1 .mainBtnstop").css('display', 'inline-block');
}
})
//메인 팝업배너 슬라이드
var swiper2_2 = new Swiper('#popupSlider2_2', {
freeMode : false,
watchOverflow : true ,
slidesPerView: 1,
loop: true,
speed: 200,
loopedSlides: 1,
observer: true,
observeParents: true,
spaceBetween:20,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: '#popupSlider2_2 .mainpage',
clickable: true,
},
navigation: {
prevEl: '#popupSlider2_2 .mainBtnPrev',
nextEl: '#popupSlider2_2 .mainBtnNext',
},
breakpoints: {
1200:{
slidesPerView:1,
},
764:{
slidesPerView:3,
spaceBetween:20
},
325:{
slidesPerView:2,
spaceBetween:20,
loopedSlides: 1,
loop: true,
},
}
})
$("#popupSlider2_2 .mainBtnplay").css('display', 'none');
$("#popupSlider2_2 .mainBtnstop").click(function () {
swiper2_2.autoplay.stop();
});
$('#popupSlider2_2 .mainBtnplay').click(function () {
swiper2_2.autoplay.start();
});
$('#popupSlider2_2 .mainBtnps').click(function (e) {
if ($(this).hasClass('mainBtnstop')) {
$(this).css('display', 'none');
$("#popupSlider2_2 .mainBtnplay").css('display', 'inline-block');
} else {
$(this).css('display', 'none');
$("#popupSlider2_2 .mainBtnstop").css('display', 'inline-block');
}
})
//메인 푸터배너 슬라이드
var swiper3 = new Swiper('#footerswiper', {
freeMode : false,
watchOverflow : true ,
slidesPerView: 1,
spaceBetween:20,
//loop: true,
speed: 2000,
spaceBetween: 50,
loopedSlides: 1,
observer: true,
observeParents: true,
autoplay: {
delay: 500,
disableOnInteraction: false,
},
navigation: {
prevEl: '.footer_swiper .mainBtnPrev',
nextEl: '.footer_swiper .mainBtnNext',
},
breakpoints: {
1300:{
slidesPerView:5,
spaceBetween:100
},
764:{
slidesPerView:4,
spaceBetween:100
},
320:{
slidesPerView:2,
spaceBetween:100
},
}
});
var $footerSwiper = $('.footer_swiper');
var revealFooterSwiper = function(){
$footerSwiper.removeClass('footer_swiper--loading').addClass('footer_swiper--ready');
};
if (swiper3.initialized) {
revealFooterSwiper();
} else {
swiper3.on('afterInit', revealFooterSwiper);
}
$(".footer_swiper .mainBtnplay").css('display', 'none');
$(".footer_swiper .mainBtnstop").click(function () {
swiper3.autoplay.stop();
});
$('.footer_swiper .mainBtnplay').click(function () {
swiper3.autoplay.start();
});
$('.footer_swiper .mainBtnps').click(function (e) {
if ($(this).hasClass('mainBtnstop')) {
$(this).css('display', 'none');
$(".footer_swiper .mainBtnplay").css('display', 'inline-block');
} else {
$(this).css('display', 'none');
$(".footer_swiper .mainBtnstop").css('display', 'inline-block');
}
})
})
스크립트를 통째로 올리는게 더 나을것같아서요
메인에서는 큰 이상이 없는데 다른 페이지를 갔다가 나오면
#footerswiper가 잠깐 나왔다가 로딩됩니다.
fullpage에 관한 오류인지 궁금합니다.
스크립트만 보고 알수 있을지요,,?
$(document).ready(function () {
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
$(window).scrollTop(0);
이 부분은 제가 혹시나해서 넣어본 스크립트인데 이걸 넣어도 해결은 안됩니다.
항상 질문이 많은데 다들 감사합니다.
답변 3
CSS에 다음 코드를 추가해 보시면 좋을 것 같습니다.
현재 스크립트에서 클래스 전환은 하고 있지만, CSS에 실제 숨김 처리가 없어 깜빡이는 현상이 발생하는 것으로 보입니다.
.footer_swiper--loading {
opacity: 0;
visibility: hidden;
}
.footer_swiper--ready {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
아래의 코드를 한번 참고해보시겠어요..
var $footerSwiper = $('.footer_swiper');
var revealFooterSwiper = function(){
$footerSwiper.removeClass('footer_swiper--loading').addClass('footer_swiper--ready');
};
// 여기부터 수정 시작
if (swiper3.initialized) {
revealFooterSwiper();
} else {
swiper3.on('afterInit', revealFooterSwiper);
}
// 추가: fullpage 페이지 이동 시 footer swiper 상태 복구
$.fn.fullpage.afterLoad = function(index, nextIndex, direction){
// footer swiper 상태 강제로 ready로 설정
$('.footer_swiper').addClass('footer_swiper--ready');
};
// 여기까지 수정 끝
$(".footer_swiper .mainBtnplay").css('display', 'none');
$(".footer_swiper .mainBtnstop").click(function () {
swiper3.autoplay.stop();
});
// ...나머지 코드
f12 누르셔서 콘솔탭에서 다른오류때문에 지연되는건 아닌지 채크해보세요.
포커싱이라던가.. 위 코드만의 오류는 아닌것 같습니다.
