좌우 슬라이딩 버튼 문제 제발 해결하고 싶어요. 채택완료
누구도 해결하지 못하고 있는 문제네요. ㅜㅜ
현재 부족한 실력으로 여기까지 만들었습니다.
http://www.namandong.co.kr/" rel="nofollow noreferrer noopener" target="_blank">http://www.namandong.co.kr
http://sir.kr/data/editor/2402/2038260588_1707793253.7809.png" />
여기서 위와같이 이미지 좌우에 검은색 화살표로 되어있는 수동으로 옮길 수 있는 버튼을 만들고 싶은데 불가능할까요?
현재 http://www.namandong.co.kr/" rel="nofollow noreferrer noopener" target="_blank">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; }
답변에 대한 댓글 3개
===================================*/
/** 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;
}
개발자모드에서 해보니 잘 되는데요?
댓글을 작성하려면 로그인이 필요합니다.
다음을 참고하셔서 원하시는 형식으로 적용하시면 가능하지 않을까 합니다.
/js/swiper/swiper/swiper.min.js
</p>
<p> <div id="slideshow"></p>
<p> <ul id="slides"></p>
<p> <li><a href="/wm_page/wm_price.php"><img src="/wm_img/index/main_banner/main_banner_01.png" alt="" /></a></li></p>
<p> <li><a href="/wm_page/wm_mobile.php"><img src="/wm_img/index/main_banner/main_banner_02.png" alt="" /></a></li></p>
<p> <li><a href="/wm_page/wm_rapid.php"><img src="/wm_img/index/main_banner/main_banner_03.png" alt="" /></a></li></p>
<p> </p>
<p> </ul></p>
<p> </p>
<p> <span class="prev" onclick="slideshow.move(-1)"></span></p>
<p> <span class="next" onclick="slideshow.move(1)"></span></p>
<p> <ul id="pagination" class="pagination"></p>
<p> <li onclick="slideshow.pos(0)"></li></p>
<p> <li onclick="slideshow.pos(1)"></li></p>
<p> <li onclick="slideshow.pos(2)"></li></p>
<p> </p>
<p> </ul></p>
<p> </p>
<p> </div></p>
<p>답변에 대한 댓글 1개
매번 배너게시판에서 이미지를 게시하고 변화시키기 떄문에
고정할 수 없어서요.
메인 테마를 만드시분이 어떻게 만드셨는지 가늠이 안가네요 ㅜㅜ
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
누가 저를 구해줄까요.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 2개
해당소스는 이미 알고 있답니다.
해당 메인 배너는 배너게시판에서 이미지를 올리면 돌아가게 되어있습니다.
그리고 메인 배너에는
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
js 파일을 참조하는 것 같습니다.
js 파일 안에 다 지정이 되어 있는 것 같거든요.
그리고 좌우 버튼이 배너 왼쪽 중앙끝부분에 나란이 붙어서 투명으로 달려있는 것 같아요.
손모양이 나오고 동작을 하고 있거든요.
저는 해당 js에서 어떻게 하면 버튼이 나타나게 될지 고민하고 있답니다.
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 이부분을 로드하지 못하고 있습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
그대로 카피해서 넣었는데요.
변화가 없습니다.
사진 크기때문은 아니겠지요.