그누보드 5 pc 메인 슬라이드 잘되고 테마 컴뮤니티 2 모바일에서 슬라이드 안되요

채택된 답변

+20 포인트

햇살농원

2026-06-28 (일) 09:07:12

지금 증상은 배너 HTML 문제라기보다 Swiper 초기화 방식 문제로 보입니다.
현재 코드에는 자동 슬라이드 옵션이 없어서 손으로 밀 때만 넘어가거나, Swiper 버전이 맞지 않으면 아예 안 움직일 수 있습니다.

모바일 배너 부분을 아래처럼 한 번 정리해서 넣어보세요.

<!-- 모바일 메인배너 -->
<div class="main_bn_box mobile_main_bn swiper-container">
    <ul class="main_bn_ul swiper-wrapper">
        <li class="swiper-slide">
            <div class="bn_img">
                <img src="<?php echo G5_THEME_IMG_URL ?>/main_banner1.jpg" alt="메인배너">
            </div>
        </li>
        <li class="swiper-slide">
            <div class="bn_img">
                <img src="<?php echo G5_THEME_IMG_URL ?>/main_banner2.jpg" alt="메인배너">
            </div>
        </li>
        <li class="swiper-slide">
            <div class="bn_img">
                <img src="<?php echo G5_THEME_IMG_URL ?>/main_banner.png" alt="메인배너">
            </div>
        </li>
    </ul>

    <div class="swiper-pagination"></div>
</div>

<script>
$(function () {
    var mobileMainBn = new Swiper('.mobile_main_bn', {
        loop: true,
        autoplay: 3000,
        speed: 600,
        pagination: '.mobile_main_bn .swiper-pagination',
        paginationClickable: true
    });
});
</script>
<!-- 모바일 메인배너 끝 -->

CSS도 같이 넣어주세요.

.mobile_main_bn {
    width: 100%;
    overflow: hidden;
}

.mobile_main_bn .swiper-wrapper {
    width: 100%;
}

.mobile_main_bn .swiper-slide {
    width: 100%;
}

.mobile_main_bn .bn_img img {
    width: 100%;
    height: auto;
    display: block;
}

중요한 부분은 이겁니다.

autoplay: 3000

이게 있어야 자동으로 넘어갑니다.

그리고 기존처럼

new Swiper('.swiper-container', {

이렇게 잡으면 사이트 안의 다른 슬라이드와 충돌할 수 있습니다.
그래서 모바일 배너에만 mobile_main_bn 클래스를 추가해서 따로 잡는 게 안전합니다.

만약 위 코드로도 안 되면 Swiper가 신버전일 수 있으니 스크립트만 아래 코드로 교체해보세요.

<script>
document.addEventListener('DOMContentLoaded', function () {
    new Swiper('.mobile_main_bn', {
        loop: true,
        speed: 600,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false
        },
        pagination: {
            el: '.mobile_main_bn .swiper-pagination',
            clickable: true
        }
    });
});
</script>

정리하면,
구버전 Swiper는 autoplay: 3000,
신버전 Swiper는 autoplay: { delay: 3000 } 방식으로 넣어야 합니다.

답변에 대한 댓글 1개

dalong

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2026-06-28 (일) 10:23:21

햇살농원 님 정섯것 도와 주셔서 감사드림니다

애드프로

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2026-06-27 (토) 14:23:26

f12 누르셔서 개발자 탭에서 콘솔 쪽 에러 채크해보세요.

햇살농원

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2026-06-27 (토) 12:32:41

<img src="<?php echo G5_THEME_IMG_URL ?>/main_banner1.jpg" alt="메인배너" />

</div>

</li>

<img src="<?php echo G5_THEME_IMG_URL ?>/main_banner2.jpg" alt="메인배너" />

</div>

</li>

<img src="<?php echo G5_THEME_IMG_URL ?>/main_banner.png" alt="메인배너" />

</div>

</li>

<img src="<?php echo G5_THEME_IMG_URL ?>/main_banner.png" alt="메인배너" />

</div>

</li>

</ul>

</div>

document.addEventListener('DOMContentLoaded', function () {

new Swiper('.mobile_main_swiper', {

loop: true,

autoplay: {

delay: 3000,

disableOnInteraction: false

},

pagination: {

el: '.mobile_main_swiper .swiper-pagination',

clickable: true

}

});

</script>

그리고 css파일 맨 밑에
.mobile_main_swiper {

width: 100%;

overflow: hidden;

}

.mobile_main_swiper .swiper-slide {

width: 100%;

}

.mobile_main_swiper .bn_img img {

width: 100%;

height: auto;

display: block;

}
이렇게 추가해보세요

답변에 대한 댓글 2개

dalong

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2026-06-27 (토) 12:58:12

이번에는 배너 사진이 움직이 안어요 하기전에는 손으로 밀면 다음사진이 나와요

dalong

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2026-06-27 (토) 13:00:41

지금 밤 12시 내일 만나요

dalong

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2026-06-27 (토) 12:20:14

모바일

<div class="main_bn_box swiper-container">
<ul class="main_bn_ul swiper-wrapper">
<li class="swiper-slide">
<div class="bn_img">
<img src="<?php echo G5_THEME_IMG_URL ?>/main_banner1.jpg" alt="메인베너" />
</div>
</li>
<li class="swiper-slide">
<div class="bn_img">
<img src="<?php echo G5_THEME_IMG_URL ?>/main_banner2.jpg" alt="메인베너" />
</div>
</li>
<li class="swiper-slide">
<div class="bn_img">
<img src="<?php echo G5_THEME_IMG_URL ?>/main_banner.png" alt="메인베너" />
</div>
</li>
<li class="swiper-slide">
<div class="bn_img">
<img src="<?php echo G5_THEME_IMG_URL ?>/main_banner.png" alt="메인베너" />
</div>
</li>
</ul>

<div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true
});
</script>



pc 파일

<div id="main_bn_box">
<div id="main_bn">
<ul class="bn_ul">
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner1.jpg" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner2.jpg" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner3.jpg" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner4.jpg" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner5.jpg" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner6.jpg" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner7.jpg" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner8.jpg" alt="메인베너" /></a></div>
</li>


</ul>
</div>
</div>

<script>
$(function() {
$("#main_bn").unslider({
speed: 700, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];

// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
});
</script>

<div class="lt">
<div style="display: flex; gap: 18px; align-items: center;">

<a href="tel:7702710519">
<img alt="banner1.jpg" data-file-srl="758" editor_component="image_link" height="220" src="https://www.koreanol.com/mylifenew/theme/community2/img/banner1.jpg" width="345" style="display: block;"/>
</a>

<a href="https://www.sugarhillgolfclub.com/tee-times/">
<img alt="banner2.jpg" data-file-srl="758" editor_component="image_link" height="220" src="https://www.koreanol.com/mylifenew/theme/community2/img/banner2.jpg" width="345" style="display: block;"/>
</a>

</div>
</div>

햇살농원

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2026-06-27 (토) 11:16:46

그누보드5는 모바일 접속 시 보통 아래 파일을 따로 사용합니다.

/theme/테마명/mobile/index.php

/theme/테마명/mobile/head.php

/theme/테마명/mobile/tail.php
PC 메인 슬라이드가 들어간 파일만 수정되어 있고, 모바일용 mobile/index.php 쪽에는 슬라이드 HTML이나 초기화 스크립트가 빠져 있으면 모바일에서는 동작하지 않습니다.

우선 아래 순서로 확인해보세요.

모바일 페이지 소스에 슬라이드 HTML이 실제로 출력되는지 확인

모바일에서 slick.js, swiper.js 같은 슬라이드 JS 파일이 로드되는지 확인

jQuery가 슬라이드 스크립트보다 먼저 로드되는지 확인

모바일용 CSS에서 슬라이드 영역 높이가 0으로 잡히지 않았는지 확인

캐시 삭제 후 다시 확인
결론적으로 PC용 메인 슬라이드 파일이 아니라 모바일 테마 파일 쪽에도 슬라이드 소스와 JS 초기화가 들어가 있는지 먼저 확인하시면 됩니다.

가능하면 모바일 메인 파일과 슬라이드 관련 JS/CSS 소스를 같이 올려주시면 어느 부분이 빠졌는지 정확히 확인할 수 있습니다.

블랙캣77

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2026-06-27 (토) 11:12:59

해당만으로는 이유를 알 수 없습니다. 아마 스크립트 에러가 날텐데 해당을 체크해보셔야 합니다.
아니면 도메인을 남기시면 도움 받기 쉬우실거 같습니다.

답변 6개 / 댓글 3개

답변에 대한 댓글 1개

답변에 대한 댓글 2개

공유하기