이미지슬라이드 페이드 구현시 자동으로 넘어가도록 설정 질문 부탁드려 봅니다.
본문
메인에 제이쿼리를 이용해서 슬라이드가 되는 기능을 첨부 할려고 하거든요.
페이드로 처리 중인데 각4장의 파일이 있는데 자동으로 넘어가도록 해야 하는데
밑에 넥스트를 클릭시켜야만 넘어가네요. 여기저기다가 auto부분을 추가를 시켜도 당췌 먹지를 않아서
질문란에 질문을 한번 드려 봅니다.
그리고 넥스트 하고 1 2 3 4 를 없애고도 싶은데 이래저래 손대봐도 잘 모르겠네요.
아래와 같은 소스가 있구요. js파일은 jquery.slides.min.js 파일을 사용했습니다.
http://slidesjs.com/ 여기에서 소스는 받아서 사용할려고 합니다. 페이드 되는 부분으로 적용을 시켜 볼려고 하구요. 페이드 된 샘플이 있는데 그대로 사용하기에는 오토 기능도 안되고 하여 질문을 올려 봅니다
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SlidesJS Basic Code Example</title>
<meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
<meta name="author" content="Nathan Searles">
<!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
<meta name="viewport" content="width=device-width">
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
<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;
}
/* Media quires for a responsive layout */
/* For tablets & smart phones */
@media (max-width: 767px) {
body {
padding-left: 10px;
padding-right: 10px;
}
.container {
width: auto
}
}
/* For smartphones */
@media (max-width: 480px) {
.container {
width: auto
}
}
/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
.container {
width: 724px
}
}
/* For larger displays */
@media (min-width: 1200px) {
.container {
width: 1170px
}
}
</style>
<!-- SlidesJS Required: -->
</head>
<body>
<!-- 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>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 990,
height: 400,
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 500
}
}
});
});
</script>
<!-- End SlidesJS Required -->
</body>
</html>
이 부분에서 자동으로 할려고 auto: true, 값을 먹였는데 잘안되네요~
소스 한번만 보시고 도움 주시면 감사하겠습니다~
답변 3
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true,
pauseOnHover: true,
restartDelay: 2500
}
});
});
</script>
auto를 할것인가? true 네
돼지코구녕님 답변 감사드립니다. 올려주신 거는 페이드 기능이 빠진 슬라이드네요~^^
그냥 슬라이드 소스에서는 오토 기능 추가하니 바로 되던데 현재는 페이드 기능으로 슬라이드가 되는 부분을
추가 하고 싶어서요~
아래의 소스에서 오토부분을 추가를 시키니 컨텐츠가 아예 사라져 버리더군요.
답변 감사드립니다~~
<script>
$(function() {
$('#slides').slidesjs({
width: 990,
height: 400,
navigation: {
effect: "fade"
},
pagination: {
effect: "fade"
},
effect: {
fade: {
speed: 500
}
}
});
});
</script>
아 해결했습니다. jquery.slides.min.js 파일에서 슬라이드 부분을 페이드로 처리하니 변경이 되었습니다.
답변 감사합니다.
