테스트 사이트 - 개발 중인 베타 버전입니다

이미지 자동으로 돌아가게 하고 싶은데.. 채택완료

다조아해 10년 전 조회 6,330

상단 이미지하고 하단 배너 이미지를 자동으로 돌아가게 하고싶은데..

지금은 클릭해야지만 하나씩 돌아가거든요.

 

소스 좀 봐주실래요.

 

http://dajoahe.x-y.net/board/bbs/main1.php">http://dajoahe.x-y.net/board/bbs/main1.php

 

</P>
<P>/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * <A href="<a href="http://bxslider.com/" target="_blank" rel="noopener noreferrer">http://bxslider.com/</a>"><a href="http://bxslider.com" target="_blank" rel="noopener noreferrer">http://bxslider.com</a></A>
 *
 * Written by: Steven Wanderski, 2014
 * <A href="<a href="http://stevenwanderski.com/" target="_blank" rel="noopener noreferrer">http://stevenwanderski.com/</a>"><a href="http://stevenwanderski.com" target="_blank" rel="noopener noreferrer">http://stevenwanderski.com</a></A>
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * <A href="<a href="http://bxcreative.com/" target="_blank" rel="noopener noreferrer">http://bxcreative.com/</a>"><a href="http://bxcreative.com" target="_blank" rel="noopener noreferrer">http://bxcreative.com</a></A>
 */</P>
<P>
/** RESET AND LAYOUT
===================================*/</P>
<P>.bx-wrapper {
 position: relative;
 margin: 0 auto 60px;
 padding: 0;
 *zoom: 1;
}</P>
<P>.bx-wrapper img {
 max-width: 100%;
 display: block;
}</P>
<P>/** THEME
===================================*/</P>
<P>.bx-wrapper .bx-viewport {
 border:  0px solid #fff;
 
 background: #fff;
 
 /*fix other elements on the page moving (on Chrome)*/
 -webkit-transform: translatez(0);
 -moz-transform: translatez(0);
     -ms-transform: translatez(0);
     -o-transform: translatez(0);
     transform: translatez(0);
}</P>
<P>.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
 position: absolute;
 bottom: -30px;
 width: 100%;
}</P>
<P>/* LOADER */</P>
<P>.bx-wrapper .bx-loading {
 min-height: 50px;
 background: url(../images/bx_loader.gif) center center no-repeat #fff;
 height: 100%;
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2000;
}</P>
<P>/* PAGER */</P>
<P>.bx-wrapper .bx-pager {
 text-align: center;
 font-size: .85em;
 font-family: Arial;
 font-weight: bold;
 color: #666;
 padding-top: 20px;
}</P>
<P>.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
 display: inline-block;
 *zoom: 1;
 *display: inline;
}</P>
<P>.bx-wrapper .bx-pager.bx-default-pager a {
 background: #666;
 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;
}</P>
<P>.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
 background: #000;
}</P>
<P>/* DIRECTION CONTROLS (NEXT / PREV) */</P>
<P>.bx-wrapper .bx-prev {
 left: 10px;
 background: url(../images/controls.png) no-repeat 0 -32px;
}</P>
<P>.bx-wrapper .bx-next {
 right: 10px;
 background: url(../images/controls.png) no-repeat -43px -32px;
}</P>
<P>.bx-wrapper .bx-prev:hover {
 background-position: 0 0;
}</P>
<P>.bx-wrapper .bx-next:hover {
 background-position: -43px 0;
}</P>
<P>.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;
}</P>
<P>.bx-wrapper .bx-controls-direction a.disabled {
 display: none;
}</P>
<P>/* AUTO CONTROLS (START / STOP) */</P>
<P>.bx-wrapper .bx-controls-auto {
 text-align: center;
}</P>
<P>.bx-wrapper .bx-controls-auto .bx-start {
 display: block;
 text-indent: -9999px;
 width: 10px;
 height: 11px;
 outline: 0;
 background: url(../images/controls.png) -86px -11px no-repeat;
 margin: 0 3px;
}</P>
<P>.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
 background-position: -86px 0;
}</P>
<P>.bx-wrapper .bx-controls-auto .bx-stop {
 display: block;
 text-indent: -9999px;
 width: 9px;
 height: 11px;
 outline: 0;
 background: url(../images/controls.png) -86px -44px no-repeat;
 margin: 0 3px;
}</P>
<P>.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
 background-position: -86px -33px;
}</P>
<P>/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */</P>
<P>.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
 text-align: left;
 width: 80%;
}</P>
<P>.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
 right: 0;
 width: 35px;
}</P>
<P>/* IMAGE CAPTIONS */</P>
<P>.bx-wrapper .bx-caption {
 position: absolute;
 bottom: 0;
 left: 0;
 background: #666\9;
 background: rgba(80, 80, 80, 0.75);
 width: 100%;
}</P>
<P>.bx-wrapper .bx-caption span {
 color: #fff;
 font-family: Arial;
 display: block;
 font-size: .85em;
 padding: 10px;
}
​</P>
<P>
 ​

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
10년 전

적어두신 내용은 css 구요.

스크립트가 추가되어야 합니다.

 

http://bxslider.com/examples/auto-show-start-stop-controls" target="_self">http://bxslider.com/examples/auto-show-start-stop-controls 

 

위 페이지 보시면 autoplay 하시려면 아래 코드가 페이지내에 필요합니다.

</p><p><script></p><p><span id="husky_bookmark_end_1420594653997"></span>$('.bxslider').bxSlider({</p><p>  auto: true,</p><p>  autoControls: true</p><p>}); </p><p></script></p><p><span style="font-size: 13.63636302948px; line-height: 18.1818180084229px;">

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

다조아해
10년 전
감사합니다...
잘 되네요..

댓글을 작성하려면 로그인이 필요합니다.

script.js에 기본만 적어주셨네요.

 

$('.bxslider').bxSlider();

 

이렇게하면 기본 설정으로 슬라이더만 만드는거구요 여기에 옵션을 추가해주셔야해요.

 

기본적인 옵션들만 적어드릴께요.

 

speed: 1200, // 스크롤 되는 속도

pause: 4000, // 일시정지하는 시간

auto: true, // 자동스크롤

auto_controls:true // next,prev 버튼이나 페이징버튼으로 이동후 자동으로 넘길지 아닐지 선택 

 

$('.bxslider').bxSlider({

speed: 1200,

pause: 4000,

auto: true,

auto_controls:true 

});

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인