이미지 슬라이드를 사용하더라도 세로스크롤은 지원하지 않습니다.

이미지를 세로로 나열해서 한번에 가로로 스크롤 되는 것은 가능합니다.

 

 

 

@ 원본소스

<div id="owl__61875_" class="owl-carousel pm-banner_slide_responsive__61875_" cond="count($new_banner)">
    <!--@foreach($new_banner as $k=>$v)-->
    {@
    $main_img = ($v[main_img]) ? thum_img($v[main_img],$farm_skin_set[img_width],$farm_skin_set[img_height],1) : '';
    @}
    <div class="item" data-hash="_61875__item{$k}">
        <!--@if($v[link_url])-->
        <a href="{$v[link_url]}" target="{$v[url_target]}"|cond="$v[url_target]">
        <!--@end-->
            <img src="{$main_img}" alt="{$v[subject]}" cond="$v[main_img]">
        <!--@if($v[link_url])-->
        </a>
        <!--@end-->
    </div>
    <!--@end-->
</div>

<script>
jQuery(function($) {
    $('#owl__61875_').owlCarousel({
        margin: {$farm_skin_set[margin]},                    // 이미지 간격
        loop: true,                                    // 무한 반복
        center: false,                                // 액티브 슬라이드 가운데 정렬
        mouseDrag: true,                            // 마우스 드레그 사용
        touchDrag: true,                            // 터치 드레그 사용
        stagePadding: 0,                            // 스테이지 여백 (좌우 슬라이드 노출)
        nav: {$farm_skin_set[nav]},                        // 방향 네비게이션
        dots: {$farm_skin_set[dots]},                        // 하단 네비게이션
        dotsEach: false,                            // 하단 네비게이션 (페이지별 출력,항목별 출력)
        autoplay: true,                                // 자동 재생
        autoplayTimeout: 5000,                        // 자동 재생 속도
        smartSpeed: 250,                            // 슬라이드 속도
        responsiveRefreshRate: 200,                    // 반응형 체크 시간
        startPosition: 0,                            // 시작 슬라이드 번호
        URLhashListener: false,                        // #URL 로 액티브 슬라이드 동작
        autoplayHoverPause: false,                    // 마우스 오버시 일시정지
        responsiveClass: false,                        // 반응형 class명 사용 (owl-reponsive-0)
        navContainer: false,                        // 방향 네비게이션 커스터마이징
        dotsContainer: false,                        // 하단 네비게이션 커스터마이징
        responsive: {                                // 반응형
            0: {
                items:{$farm_skin_set[items_mobile]},        // 한 화면 출력수 (모바일)
                       slideBy:1/*{$farm_skin_set[items_mobile]}*/    // 한번에 슬라이드 되는 수 (모바일)
            },
            768: {
                items:{$farm_skin_set[items_tablet]},        // 한 화면 출력수 (태블릿)
                       slideBy:1/*{$farm_skin_set[items_tablet]}*/    // 한번에 슬라이드 되는 수 (태블릿)
            },
            102*: {
                items:{$farm_skin_set[items_pc]},            // 한 화면 출력수 (PC)
                       slideBy:1/*{$farm_skin_set[items_pc]}*/        // 한번에 슬라이드 되는 수 (PC)
            }
        }
    })
});
</script>

 

 

 

@ 수정된소스

<div id="owl__61875_" class="owl-carousel pm-banner_slide_responsive__61875_" cond="count($new_banner)">
    <!--@foreach($new_banner as $k=>$v)-->
    {@
    $main_img = ($v[main_img]) ? thum_img($v[main_img],$farm_skin_set[img_width],$farm_skin_set[img_height],1) : '';
    @}
        <!--@if($k%3==0)-->
        <div class="item">
        <!--@end-->
            <!--@if($v[link_url])-->
            <a href="{$v[link_url]}" target="{$v[url_target]}"|cond="$v[url_target]">
            <!--@end-->
                <img src="{$main_img}" alt="{$v[subject]}" cond="$v[main_img]">
            <!--@if($v[link_url])-->
            </a>
            <!--@end-->
        <!--@if($k%3==2 || $k==count($new_banner)-1)-->
        </div>
        <!--@end-->
    <!--@end-->
</div>

<script>
jQuery(function($) {
    $('#owl__61875_').owlCarousel({
        margin: {$farm_skin_set[margin]},                    // 이미지 간격
        loop: true,                                    // 무한 반복
        center: false,                                // 액티브 슬라이드 가운데 정렬
        mouseDrag: true,                            // 마우스 드레그 사용
        touchDrag: true,                            // 터치 드레그 사용
        stagePadding: 0,                            // 스테이지 여백 (좌우 슬라이드 노출)
        nav: {$farm_skin_set[nav]},                        // 방향 네비게이션
        dots: {$farm_skin_set[dots]},                        // 하단 네비게이션
        dotsEach: false,                            // 하단 네비게이션 (페이지별 출력,항목별 출력)
        autoplay: true,                                // 자동 재생
        autoplayTimeout: 5000,                        // 자동 재생 속도
        smartSpeed: 250,                            // 슬라이드 속도
        responsiveRefreshRate: 200,                    // 반응형 체크 시간
        startPosition: 0,                            // 시작 슬라이드 번호
        URLhashListener: false,                        // #URL 로 액티브 슬라이드 동작
        autoplayHoverPause: false,                    // 마우스 오버시 일시정지
        responsiveClass: false,                        // 반응형 class명 사용 (owl-reponsive-0)
        navContainer: false,                        // 방향 네비게이션 커스터마이징
        dotsContainer: false,                        // 하단 네비게이션 커스터마이징
        responsive: {                                // 반응형
            0: {
                items:1,        // 한 화면 출력수 (모바일)
                slideBy:1        // 한번에 슬라이드 되는 수 (모바일)
            },
            768: {
                items:1,        // 한 화면 출력수 (태블릿)
                slideBy:1        // 한번에 슬라이드 되는 수 (태블릿)
            },
            102*: {
                items:1,            // 한 화면 출력수 (PC)
                slideBy:1            // 한번에 슬라이드 되는 수 (PC)
            }
        }
    })
});
</script>

 

 

 

@ 2개씩 출력하려면 다음과 같이 수정해주세요

 

 

        <!--@if($k%2==0)-->
        <div class="item">
        <!--@end-->
            <!--@if($v[link_url])-->
            <a href="{$v[link_url]}" target="{$v[url_target]}"|cond="$v[url_target]">
            <!--@end-->
                <img src="{$main_img}" alt="{$v[subject]}" cond="$v[main_img]">
            <!--@if($v[link_url])-->
            </a>
            <!--@end-->
        <!--@if($k%2==1 || $k==count($new_banner)-1)-->
        </div>
        <!--@end-->