좌우 슬라이딩 버튼 문제 제발 해결하고 싶어요.

좌우 슬라이딩 버튼 문제 제발 해결하고 싶어요.

QA

좌우 슬라이딩 버튼 문제 제발 해결하고 싶어요.

본문

누구도 해결하지 못하고 있는 문제네요. ㅜㅜ 

 

현재 부족한 실력으로 여기까지 만들었습니다. 

 

http://www.namandong.co.kr

 

2038260588_1707793253.7809.png

 

여기서 위와같이 이미지 좌우에 검은색 화살표로 되어있는 수동으로 옮길 수 있는 버튼을 만들고 싶은데 불가능할까요?

 

현재 http://www.namandong.co.kr 주소입니다. 

 

메인페이지 테마가 아래 respond.min.js 스크립트를 참조했네요.

 

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

 

----> 이 스크립트를 기준으로 할 때에 어떤 명령을 치면 활성화 되는지 알고 싶습니다.

현재 메인 홈페이지 배너 왼쪽 중앙쪽에 마우스를 올려놓으면 보이지 않지만 손모양으로 끝에 앞버튼이 있고 바로뒤에 뒤로 가는 버튼이 붙어 있는 것 같습니다. 보이지 않지만 누르면 동작하거든요. 

그 버튼을 보이게 하면서 좌우로 포지션이 가게 할 수 없는지 궁금합니다. 

 

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<script>
$(document).ready(function () {
$('.bxslider').bxSlider({
pager: true
, pause: 3500
, auto: true
, controls: true
});
});
</script>
 

이 질문에 댓글 쓰기 :

답변 4

theme/mint/js/jquery.bxslider.css  98행을 수정하면 좌우 버튼 노출 됩니다

그런데 시간이 지나면 슬라이드가 작동을 멈추네요

 

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    /* text-indent: -9999px; */ /**추가**/
    z-index: 9999;
    background: rgba(0,0,0, 0.5);  /**추가**/
}

/**추가**/
.bx-wrapper .bx-controls-direction a.bx-next { right:5px; }

/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
  position: relative;
  margin: 0 auto ;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
}
/** THEME
===================================*/

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: 20px;
  width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;

  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #fff;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a.active
 {
  background: #fff;width:20px;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  x
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}

.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}



.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    /* text-indent: -9999px; */ /**추가**/
    z-index: 9999;
    background: rgba(0,0,0, 0.5);  /**추가**/
}

/**추가**/
.bx-wrapper .bx-controls-direction a.bx-next { right:5px; }

.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}

https://webeen.tistory.com/74 참고하시면됩니다.

답변감사합니다.

해당소스는 이미 알고 있답니다.

해당 메인 배너는 배너게시판에서 이미지를 올리면 돌아가게 되어있습니다.

그리고 메인 배너에는
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

js 파일을 참조하는 것 같습니다.

js 파일 안에 다 지정이 되어 있는 것 같거든요.

그리고 좌우 버튼이 배너 왼쪽 중앙끝부분에 나란이 붙어서 투명으로 달려있는 것 같아요.
손모양이 나오고 동작을 하고 있거든요.

저는 해당 js에서 어떻게 하면 버튼이 나타나게 될지 고민하고 있답니다.

bxslider 안에 swiper 가 있네요. 희안합니다.

소스를 뜯어봐야 알거같네요~

다음을 참고하셔서 원하시는 형식으로 적용하시면 가능하지 않을까 합니다.

/js/swiper/swiper/swiper.min.js


    <div id="slideshow">
        <ul id="slides">
            <li><a href="/wm_page/wm_price.php"><img src="/wm_img/index/main_banner/main_banner_01.png" alt="" /></a></li>
            <li><a href="/wm_page/wm_mobile.php"><img src="/wm_img/index/main_banner/main_banner_02.png" alt="" /></a></li>
            <li><a href="/wm_page/wm_rapid.php"><img src="/wm_img/index/main_banner/main_banner_03.png" alt="" /></a></li>
 
        </ul>
       
        <span class="prev" onclick="slideshow.move(-1)"></span>
        <span class="next" onclick="slideshow.move(1)"></span>
        <ul id="pagination" class="pagination">
            <li onclick="slideshow.pos(0)"></li>
            <li onclick="slideshow.pos(1)"></li>
            <li onclick="slideshow.pos(2)"></li>
 
        </ul>
       
    </div>

이미 다른 소스가 있는 것 같아요.


매번 배너게시판에서 이미지를 게시하고 변화시키기 떄문에
고정할 수 없어서요.

메인 테마를 만드시분이 어떻게 만드셨는지 가늠이 안가네요 ㅜㅜ

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

회원로그인

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