SIR
목록으로

모바일페이지 swiper 배너 작동안함

블블루베리수학
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 1,699
답변 3
목록

https://theme.sir.kr/gnuboard55/demo/community?device=pc

테마를 사용하고 있습니다.

PC는 정상적으로 슬라이드가 되는데 모바일페이지로 접속하면 아예 움직이지 않아서요..

 

[CODE]

<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 ?>/img01.jpg" alt="메인베너" />

            </div>

        </li>

        <li class="swiper-slide">

            <div class="bn_img">

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

            </div>

        </li>

        <li class="swiper-slide">

            <div class="bn_img">

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

            </div>

        </li>

        <li class="swiper-slide">

            <div class="bn_img">

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

            </div>

        </li>

    </ul>  

    <!-- Add Pagination -->

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

</div>

[/CODE]

 

Copy 
<script>

var swiper = new Swiper('.swiper-container', {

    pagination: '.swiper-pagination',

    paginationClickable: true

});

</script>

 

소스는 이거입니다.. 뭐가 문제일까요

초보질문 죄송합니다

#그누보드5

답변 3개

감사합니다

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

아마 이부분 같은데

Copy 
<!--메인배너 {-->
<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="https://theme.sir.kr/gnuboard55/theme/community/img/main_banner.png" alt="메인베너" /></a></div>
            </li>
            <li class="bn_bg1">
                <div class="bn_wr"><a href="#none"><img src="https://theme.sir.kr/gnuboard55/theme/community/img/main_banner.png" alt="메인베너" /></a></div>
            </li>
            <li class="bn_bg1">
                <div class="bn_wr"><a href="#none"><img src="https://theme.sir.kr/gnuboard55/theme/community/img/main_banner.png" alt="메인베너" /></a></div>
            </li>
            <li class="bn_bg1">
                <div class="bn_wr"><a href="#none"><img src="https://theme.sir.kr/gnuboard55/theme/community/img/main_banner.png" 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>

 

unslider 관련 선언부나 정의부가

pc 버전엔 있고

mobile 버전엔 없는것 같습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Copy 
autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },

추가해보세요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고