How to toggle a section of a page so goes from one passage of text to another passage of text?

Question

I would like to create a section of my page (a passage of text) that toggles through all the passages of text that I have without reloading the page or loading another page. Ideally, I would like to use left and right arrows.

So, suppose I have ten passages of text, Passage A, Passage B, and so on, if someone clicks the right arrow, I want it to move from Passage A to Passage B, then if they click the right arrow again, I want it to move from Passage B to Passage C. The left arrow would be used to go back to previous passages.

How can I do this?

I am comfortable with using CSS, HTML, JavaScript, jQuery, and Bootstrap.

Answer 1

I cannot take credit for this:

I googled "Bootstrap text slider" and wa-la this link popped up http://jsfiddle.net/technotarek/gXN2u/

javascript

setCarouselHeight('#carousel-example');

    function setCarouselHeight(id)
    {
        var slideHeight = [];
        $(id+' .item').each(function()
        {
            // add all slide heights to an array
            slideHeight.push($(this).height());
        });

        // find the tallest item
        max = Math.max.apply(null, slideHeight);

        // set the slide's height
        $(id+' .carousel-content').each(function()
        {
            $(this).css('height',max+'px');
        });
    }