Creating Custom Jquery Slider

Question

Here is what I have so far: http://jsfiddle.net/6j4cT/3/

Sorry for not pasting the code as there is too much to add into this post.

Firstly the JQuery I have so far is not selecting first LI within the "news-items" and adding the class "active".

Also, if anyone would like to rewrite my code to a cleaner format you are welcome to do so.

Many thanks!

Answer 1

Just give the class name active to the first li element:

<ul id="news-items">
    <li class="active">
        <a href="#">Node 1</a>
    </li>
    <li>
        <a href="#">Node 2</a>
    </li>
</ul>

Reference: jsFiddle

---

Status Update: jsFiddle Rev 2

You can also add the class using jQuery as such:

var periodToChangeSlide = 5000;
var pp_slideshow = undefined;
var currentPage = 0;
$('#news-items li:first').addClass('active');

---

Re-Revised via Message Request: jsFiddle Rev 4

var periodToChangeSlide = 5000;
var pp_slideshow = undefined;
var currentPage = 0;
$('#news-feature-img-wrap li').css('display','list-item').slice(1).css('display','none');
$('#news-items li:first').addClass('active');

The new addition, per your message comments, will set display:list-item for only the first item while setting display:none for the remainder of the items since that has been sliced off via jQuery .slice() method.

Answer 2

Back in SO after few days now :) Solution: Working demo - http://jsfiddle.net/qJea8/ or http://jsfiddle.net/qJea8/show

Behaviour now when you click on Node 1 it will go to first slide and so on for the next one.

Culprit was: var index = $(this).parent().index(); Change to var index = $(this).index(); because parent will return same index all the time.

Rest I hope it helps the cause. :)

Code

// News Article Slideshow
var periodToChangeSlide = 5000;
var pp_slideshow = undefined;
var currentPage = 0;
$("#news-feature-wrap #news-items li").click(function() {
    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');

    var index = $(this).index();
    var toShow = $("#news-feature-wrap #news-feature-img-wrap li").eq(index);
    toShow.show();
    toShow.siblings().hide();
    currentPage = index;
    $.stopSlideshow();
});

$.startSlideshow = function() {
    if (typeof pp_slideshow == 'undefined') {
        pp_slideshow = setInterval($.startSlideshow, periodToChangeSlide);
    } else {
        $.changePage();
    }
}

$.stopSlideshow = function() {
    clearInterval(pp_slideshow);
    pp_slideshow = undefined;
}
$.changePage = function() {
    var numSlides = $('#news-feature-wrap #news-feature-img-wrap li').length;
    currentPage = (currentPage + 1) % numSlides;
    var menu = $('#news-feature-wrap #news-items li').eq(currentPage);
    menu.addClass('active');
    menu.siblings().removeClass('active');

    var toShow = $("#news-feature-wrap #news-feature-img-wrap li").eq(currentPage);
    toShow.show();
    toShow.siblings().hide();
}

$.startSlideshow();​

Working image