bxslider 질문드립니다.

bxslider 질문드립니다.

QA

bxslider 질문드립니다.

본문

bxslider 에서 pagerCustom으로 해서 작은 이미지 클릭시

큰이미지가 변하게 작업해놓았는데

pagerCustom를 사용하게 되면 일반 pager는 출력이 안되더라구요.

작은이미지와 블릿을 함께 사용하고 싶은데 아시는분 계신가요.?ㅠ

검색도 해보았으나 원하는 답변을 찾지 못하여 질문드립니다. 

 


<script src="<?php echo G5_JS_PLUS_URL ?>/jquery.bxslider.min.js"></script>
<link href="<?php echo G5_THEME_URL ?>/css/jquery.bxslider.css" rel="stylesheet" />
 
<style type="text/css">
.bx-wrapper { -moz-box-shadow: 0;  -webkit-box-shadow: 0;  box-shadow: 0;  border: 0; background: #fff; margin-bottom:0; text-align:center;}
.bx-wrapper img {max-width: 1920px; min-width: 1920px;}
 
#main_slide{ position:relative;}
#small{position:absolute; left:50%; margin-left:-600px; width:240px; margin-top:111px; z-index:98;}
#small a{position:relative; display:block; background:url(<?php echo G5_THEME_URL ?>/images/main_line.png) left top repeat-x; width:px; padding:17px 0 15px; width:240px;}
#small a:last-child{background:url(<?php echo G5_THEME_URL ?>/images/main_line.png) left top repeat-x, url(<?php echo G5_THEME_URL ?>/images/main_line.png) left bottom repeat-x; padding:17px 0;}
#small a:after{ display:block; visibility:hidden; clear:both; content:""}
#small > a .images{float:left; width:60px; height:60px; border:1px solid #888; background:#000;}
#small > a .images img{ width:58px; height:58px; opacity:0.5;}
#small > a .text{float:left; margin-left:15px; text-shadow:1px 1px 1px #444; color:#ddd; font-size:14px; font-weight:bold; line-height:24px;}
#small > a .text span{ display:block; font-size:18px;}
#small a:hover > .images, #small a.active > .images, #small a:focus > .images {border:1px solid #fff;}
#small a:hover > .images img, #small a.active > .images img, #small a:focus > .images img { opacity:1;}
#small a:hover > .text, #small a.active > .text, #small a:focus > .text {color:#fff;}
.big_box{ position:absolute; left:50%; margin-left:-260px; text-align:left; width:740px; margin-top:140px;}
.big_box > .title{font-size:44px; font-weight:bold; text-shadow:1px 1px 1px #000; color:#fff; margin-bottom:15px;}
.big_box > .subtitle{font-size:26px; font-weight:bold; text-shadow:1px 1px 1px #000; color:#fff;margin-bottom:15px;}
.big_box > .more{border:2px solid #fff; box-shadow:1px 1px 1px  #000; display:inline-block;}
.big_box > .more a{color:#fff; font-size:14px; font-weight:bold; text-shadow:1px 1px 1px #000; padding:10px; display:block;}
</style>
   
<div id="main_slide">
   
    <div id="small">
        <a data-slide-index="0" href="">
            <div class="images"><img src="<?php echo G5_THEME_URL ?>/images/small1.jpg"/></div>
            <div class="text">간략내용</span></div>
        </a>
        <a data-slide-index="1" href="">
            <div class="images"><img src="<?php echo G5_THEME_URL ?>/images/small2.jpg"/></div>
            <div class="text">간략내용</span></div>
        </a>
        <a data-slide-index="2" href="">
            <div class="images"><img src="<?php echo G5_THEME_URL ?>/images/small3.jpg"/></div>
            <div class="text">간략내용</div>
        </a>
    </div>
   
    <ul class="bxslider">
        <li>
            <div class="big_box">
               <div class="title">타이틀</div>
               <div class="subtitle">내용</div>
               <div class="more"><a href="#">MORE VIEW</a></div>
            </div>
            <img src="<?php echo G5_THEME_URL ?>/images/main_bg1.jpg" width="1920" height="550">
        </li>
        <li>
            <div class="big_box">
               <div class="title">타이틀</div>
               <div class="subtitle">내용</div>
               <div class="more"><a href="#">MORE VIEW</a></div>
            </div>
            <img src="<?php echo G5_THEME_URL ?>/images/main_bg1.jpg" width="1920" height="550">
        </li>
        <li>
            <div class="big_box">
               <div class="title">타이틀</div>
               <div class="subtitle">내용</div>
               <div class="more"><a href="#">MORE VIEW</a></div>
            </div>
            <img src="<?php echo G5_THEME_URL ?>/images/main_bg1.jpg" width="1920" height="550">
        </li>                                              
    </ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
  speed : 500, 
  pause : 5000, 
  mode :'fade', 
  auto : true,  
  autoControls : true, 
  autoHover : true, 
  infiniteLoop : true, 
  pager: true, 
  pagerType : 'full', 
  pagerCustom : '#small',
  });
});
</script>
<!-- } 메인슬라이드 끝 -->

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 17
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT