이미지 자동으로 돌아가게 하고 싶은데.. 채택완료
상단 이미지하고 하단 배너 이미지를 자동으로 돌아가게 하고싶은데..
지금은 클릭해야지만 하나씩 돌아가거든요.
소스 좀 봐주실래요.
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개
적어두신 내용은 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개
댓글을 작성하려면 로그인이 필요합니다.
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
});
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
잘 되네요..