질문과 답변 (구)

최근본상품
TOP
DOWN

질문과 답변 (구)

슬라이드 배너를 추가하고싶은데요.

2015.12.22 09:52 1,378 4

본문

사진보시면 상단은 이번에 나온 테마2 구요

두번째는 제작한사이트입니다.

사장님이 먼가 동적인걸 원하셔서 배너를 넣을까하는데.

빨간 부분인 슬라이스 배너를 저희 홈페이지 빨간화살표 부분에 넣을려고 하는데.

기초 html외에는 잘 몰라서요 ㅠㅠ

도와주세요 ~~

0
로그인 후 평가 가능합니다.
- VRBOXKOREA - 회원등급 : 지하계 / Level 4
포인트 4,721
경험치 1,266
[레벨 4] - 진행률 9%
- 가입일 : 2015-11-19 11:31:14
- 서명 : 미입력
- 자기소개 : 미입력

댓글목록 4

이윰EGG님의 댓글

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>


감사합니다.

축하합니다. 첫댓글 포인트 39포인트를 획득하였습니다.

VRBOXKOREA님의 댓글

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

ibug님의 댓글

ibug 2017.01.11 16:45

슬라이드배너

studyhaza님의 댓글

감사합니다

질문과 답변 (채택기능) 게시판이 신설되었습니다.
질문과 답변 (구) 게시판은 글쓰기가 제한되오니 착오 없으시길 바랍니다. (댓글 및 조회는 여전히 가능합니다.)

전체 2,800 건 - 92 페이지
제목
웅라탄 2015.12.22 489 0
짱구or빠 2015.12.22 470 0
택군 2015.12.22 619 0
레아엘 2015.12.22 787 0
VRBOXKOREA 2015.12.22 1,379 0
tenuunsalhi 2015.12.22 1,198 0
티보리 2015.12.22 3,476 0
모두디자인 2015.12.21 630 0
김이안 2015.12.21 849 0
이진호 2015.12.21 748 0
서종득 2015.12.19 816 0
서종득 2015.12.19 695 0
robell 2015.12.19 477 0
라피도스 2015.12.19 628 0
메자4 2015.12.18 576 0