페이드 구현시 자동으로 넘어가도록 설정하고 싶은데 잘 안됩니다 도와주세요 ㅠㅠ
본문
넥스트 하고 1 2 3 4 를 없애고도 싶은데 이래저래 손대봐도 잘 모르겠네요.
아래와 같은 소스가 있구요. js파일은 jquery.slides.min.js 파일을 사용했습니다.
http://slidesjs.com/ 여기에서 소스는 받아서 사용할려고 합니다. 페이드 되는 부분으로 적용을 시켜 볼려고 하구요. 페이드 된 샘플이 있는데 그대로 사용하기에는 오토 기능도 안되서 질문을 하게 되었습니다
<style>
/* Prevent the slideshow from flashing on load */
#slides {
display: none
}
/* Center the slideshow */
.container {
margin: 0 auto
}
/* Show active item in the pagination */
.slidesjs-pagination .active {
color:red;
}
</style>
<!-- SlidesJS Required: -->
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<div id="slides">
<img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
<img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
<img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
<img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
</div>
</div>
<script>
$(function() {
$('#slides').slidesjs({
width: 990,
height: 400,
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 500
}
},
play: {
auto: true,
}
});
});
</script>
답변 2
음 demo중에 playing을 수정하시는게 더 편할꺼 같긴한데...
<script>
$(function() {
$('#slides').slidesjs({
width: 990,
height: 400,
navigation: {
active: false
},
pagination: {
active: false,
effect: "fade"
},
play: {
active: true,
auto: true,
interval: 500,
swap: true,
effect: "fade",
}
});
});
</script>
아!!! 너무 감사합니다 ㅠㅠㅠㅠㅠ 그런데 밑에 stop버튼과 play버튼을 없애고 싶은데 어떡해야 할까요?~ ㅠㅠ
옵션에는 해당 부분 설정하는게 없는거 같던데요...
css로 해당영역 display:none으로 잡는방법-_-??
아 그렇군요~ ㅠㅠ 페이드 설정은 되는데 이미지 넓이를 100%으로 주고 싶은데 어떡해야 할지.. 모바일로 pc버전을 보았을때는 이상하더라구요 ㅠㅠ
