Question

I currently have a jQuery Slider in progress: http://jsfiddle.net/hQj8a/

    $(document).ready(function() {

        $('body').removeClass('no-js');

        $('#my-carousel-2').carousel({

            itemsPerPage: 3,

            itemsPerTransition: 3,

            speed: 500,

            nextPrevLinks: false

        });

    });

When the user clicks between the pagination (1,2,3) I would like different text to display next to the pagination.
So initially on page load (i.e. state 1) it should say ‘hello’ and clicking 2, it should say ‘hello again’ and 3 it says ‘goodbye’.

Can someone show me how this is possible with my current code? It doesn’t have to “animate” but just switch between the three bits of text depending on the current pagination value.

Many thanks for any pointers with this 🙂

Answer 1

http://jsfiddle.net/hQj8a/5/

Within jQuery, I added a span to hold the text “Hello” “Hello again” or “Goodbye”. I gave that span an id of “addedText”. Then I added an event listener for the pagination links (found the selector using inspect element in chrome), that looks at the text of clicked links in order to determines which link you clicked. Based on that, fill the addedText appropriately.

Added jQuery/javascript:

$('.pagination-links').append("<span id='addedText'>Hello</span>");
var addedText = document.getElementById('addedText');

$('.pagination-links a').click(function(){
    if (this.innerHTML == '1')
        addedText.innerHTML = "Hello";
    else if (this.innerHTML == '3')
        addedText.innerHTML = "Goodbye";
    else
        addedText.innerHTML = "Hello again";
});

Added CSS:

#addedText {
    float: left;
    padding-top: 12px; //copied from .carousel .pagination-links li a
}

Edit: Added “Hello” to addedText by default, so it displays on page load.