ActiveDen

Help a js Newbie coding a slider?

59 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 3-4 years
mdrd88 says

Hi, I am working on a js slider from scratch. I now I can just download a nivo slider or one of the slider on CodeCanyon, but I want to make one from scratch, with my own noggin’, and a little of your expertise :) So here is my code so far.

okay, for some reason the html isn’t showing the code but it’s just an unordered list with the first li’s class as “current”.

the css

.slideshow {
 position: relative;
 display: block;
 list-style: none;
 top: 0px;
 left: 0px;
 margin:0;
 padding:0;
 width: 570px;
 height: 270px;
}

.slideshow ul {
 position: relative;
 top: 0px;
 left: 0px;
 width: 570px;
 height: 270px;
}

.slideshow li {
 position: absolute;
 top: 0px;
 left: 0px;
 float: left;
 z-index: 100;
}

.slideshow li.current {
 position: absolute;
 top: 0px;
 left: 0px;
 float:left;
 z-index: 9999;
}

Now the javascript I was thinking of using a “window.setInterval(yourfunction, 10000);” then do something with the opacity do ”$(‘ul.slideshow li’).css({opacity: 0.0});” then ”$(‘ul.slideshow li.current’).css({opacity: 1.0}).addClass(‘show’);”

so right now it’ll look like this


    window.setInterval('gallery()', 2000);

    $('ul.slideshow li').css({opacity: 0.0});

    $('ul.slideshow li.current').css({opacity: 1.0}).addClass('show');

It’s not working though, I know I have to use a timer function that removes the “current” class and adds that class to the next image in line. But I can’t seem to figure all the stuff you gotta do so it all comes together and works properly. So that’s why I need your help. Sorry if I am not clear enough on what I am asking.

Thanks in advance!

by
by
by
by
by