如何在JQuery和/或CSS中创建水平文本滑块？

Question

I am trying to create a text slider to slide between 4 different sentences. I can't get it to work, and as a matter of fact, I can't get the code to function at all. I need to start fresh, but I have no idea how to create one that will switch between sentences.

Any help on creating one with CSS3 or jQuery, as I don't really have a preference, is greatly appreciated.

Answer 1

Just setup for containers (using span's in this example):

<div id="parent_container">
    <span>Sentence once</span>
    <span>Sentence two</span>
    <span>Sentence three</span>
    <span>Sentence four</span>
</div>

Now in your CSS, set them to position themselves side by side, preferably setting the span width to that of the parent_container.

In jQuery, you can now either, hide() and show() each individual <span> as necessary, or animate() the transition between the spans. Per your question, it sounds like you want to animate() with a slide.