Reputation: 445
I'm trying to add Fade-In Fade-out effects to the homepage of this page but it doesn't seem to take effect, it rather stops working. I'd like only the fade effect.
The function code is as shown below
script>
$(function(){
$('#slides').slides({
fadeOut: true,
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 4000,
hoverPause: true,
});
});
</script>
and the HTML is below
<div id="slides">
<div class="slides_container">
<a href="#" target="" ><img src="images/wire2.jpg"width="570" height="270" alt="Slide 1"></a>
<a href="#" title="" ><img src="images/wire1.jpg"width="570" height="270" alt="Slide 1"></a>
<a href="#" title="" ><img src="images/wire3.jpg"width="570" height="270" alt="Slide 1"></a>
<a href="#" title="" ><img src="images/wire4.jpg"width="570" height="270" alt="Slide 1"></a>
<a href="#" title="" ><img src="images/wire5.jpg"width="570" height="270" alt="Slide 1"></a>
<a href="#" title=""><img src="images/wire6.jpg"width="570" height="270" alt="Slide 1"></a>
<a href="#" title=""><img src="images/wire7.jpg"width="570" height="270" alt="Slide 1"></a>
</div>
</div>
Upvotes: 0
Views: 313
Reputation: 1404
These are the options slide has:
preload: !1,
preloadImage: "/img/loading.gif",
container: "slides_container",
generateNextPrev: !1,
next: "next",
prev: "prev",
pagination: !0,
generatePagination: !0,
prependPagination: !1,
paginationClass: "pagination",
currentClass: "current",
fadeSpeed: 350,
fadeEasing: "",
slideSpeed: 350,
slideEasing: "",
start: 1,
effect: "slide",
crossfade: !1,
randomize: !1,
play: 0,
pause: 0,
hoverPause: !1,
autoHeight: !1,
autoHeightSpeed: 350,
bigTarget: !1,
animationStart: function () {},
animationComplete: function () {},
slidesLoaded: function () {}
I don't think slide by it self has fade in and out effect.
Here is the website: http://slidesjs.com/
Upvotes: 1