이윰EGG 메일보내기 아이디로 검색 2015.12.22 13:52

VRBOXKOREA님 안녕하세요.

basic2의 메인슬라이더를 사용하시기 위해서는 /basic2/plugins/owl-carousel 폴더를 사용하시는 테마 plugins폴더에 옮겨 주시고
index_bs.html 파일 원하는 위치에 아래의 소스를 넣으시면 되겠습니다.
이미지는 image폴더에 업로드 하시고 파일명에 맞게 수정하시면 되겠습니다.

<!--{* ------------- Main Banner Slider 영역 시작 // 767px 이하에서는 안보임 ------------- *}-->
<div class="main-banner-slider margin-bottom-20 hidden-xs">
    <div class="owl-navi">
        <a class="owl-btn prev-main-banner"><i class="fa fa-angle-left"></i></a>
        <a class="owl-btn next-main-banner"><i class="fa fa-angle-right"></i></a>
    </div>
	<div class="owl-slider-main-banner">
		<article class="item">
			<!--{* Main Banner Slider 첫번째 시작 // 링크 설정, 이미지와 문구를 수정하세요. *}-->
			<a href="#">
				<img src="../image/banner_slider/banner_slider_1.jpg">
				<div class="banner-slider-text">
					<h1>{config.cf_title} OPEN!</h1>
					<p>Lorem ipsum dulor sit amet, consectetur sequi ex quam sunt delectus adipisicing elft.<br>Veniam aut tempore illum, dulor nemo quae nulla.</p>
				</div>
			</a>
			<!--{* Main Banner Slider 첫번째 끝 *}-->
		</article>
		<article class="item">
			<!--{* Main Banner Slider 두번째 시작 // 링크 설정, 이미지와 문구를 수정하세요. *}-->
			<a href="#">
				<img src="../image/banner_slider/banner_slider_2.jpg">
				<div class="banner-slider-text">
					<h1>{config.cf_title} EVENT!</h1>
					<p>Lorem ipsum dulor sit amet, consectetur sequi ex quam sunt delectus adipisicing elft.<br>Veniam aut tempore illum, dulor nemo quae nulla.</p>
				</div>
			</a>
			<!--{* Main Banner Slider 두번째 끝 *}-->
		</article>
		<article class="item">
			<!--{* Main Banner Slider 세번째 시작 // 링크 설정, 이미지와 문구를 수정하세요. *}-->
			<a href="#">
				<img src="../image/banner_slider/banner_slider_3.jpg">
				<div class="banner-slider-text">
					<h1>{config.cf_title} NOTICE!</h1>
					<p>Lorem ipsum dulor sit amet, consectetur sequi ex quam sunt delectus adipisicing elft.<br>Veniam aut tempore illum, dulor nemo quae nulla.</p>
				</div>
			</a>
			<!--{* Main Banner Slider 세번째 끝 *}-->
		</article>
	</div>
</div>
<!--{* ------------- Main Banner Slider 영역 끝 ------------- *}-->
<style>
/*---------- Main Banner Slider ----------*/
.main-banner-slider {position:relative;overflow:hidden;height:100px}
.main-banner-slider .item {position:relative;overflow:hidden;background:#54545a;height:100px}
.main-banner-slider .item img {height:100px}
.main-banner-slider .item .banner-slider-text {position:absolute;top:10px;left:20px}
.main-banner-slider .item .banner-slider-text h1 {color:#000;font-size:16px;font-weight:bold;text-transform:uppercase;line-height:20px}
.main-banner-slider .item .banner-slider-text p {color:#fff;font-size:12px}
.main-banner-slider .owl-navi a.owl-btn {color:#000;width:20px;height:20px;font-size:10px;cursor:pointer;line-height:20px;text-align:center;display:inline-block;opacity:0.7;background:#fff}
.main-banner-slider .owl-navi a.owl-btn:hover {color:#fff;opacity:0.7;background:#000;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}
.main-banner-slider .owl-navi a.owl-btn.prev-main-banner {position:absolute;top:2px;right:24px;z-index:1}
.main-banner-slider .owl-navi a.owl-btn.next-main-banner {position:absolute;top:2px;right:2px;z-index:1}
</style>
<link rel="stylesheet" href="../plugins/owl-carousel/owl-carousel/owl.carousel.css" type="text/css" media="screen">
<script type="text/javascript" src="../plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
<script>
		/*Main Banner Slider Carousel*/
	
		jQuery(document).ready(function() {
			var owl = jQuery(".owl-slider-main-banner");
		    owl.owlCarousel({
		        autoPlay : 8000,
			    singleItem : true,
			    slideSpeed: 300,
		        pagination: false
		    });
		    jQuery(".next-main-banner").click(function(){
		        owl.trigger('owl.next');
		    })
		    jQuery(".prev-main-banner").click(function(){
		        owl.trigger('owl.prev');
		    })
		});
	
</script>

VRBOXKOR… 메일보내기 아이디로 검색 2016.01.13 10:07

적용을 못하고 있다가 이제 적용했네여~
잘되네여 감사합니다 ^^

슬라이드배너

감사합니다