Text slideshow with effect

Question

I have an issue with text slideshow. I want to make it slide to the left side of the div and make the new text slide from the right side. I tried few examples I found here, but nothing worked, except for one that basicaly broke the look of the page. This is my setup:

<div>
    <p id="textslide"></p>
</div>

var quotes = [ "Q1", "Q2", "Q3", "Q4" ];
var i = 0;
setInterval(function() {
    $("#textslide").html(quotes[i]);
    if (i == quotes.length) {
        i = 0;
    } else {
        i++;
    }
}, 10 * 700);

Any ideas on how to make the slide effect?

Possible duplicate of [Very Simple, Very Smooth, JavaScript Marquee](http://stackoverflow.com/questions/10547797/very-simple-very-smooth-javascript-marquee) — Black Sheep, Apr 10 '16 at 10:33
or in pure css: [css3-marquee-effect](http://stackoverflow.com/questions/21233033/css3-marquee-effect) — Black Sheep, Apr 10 '16 at 10:35

score 0 · Answer 1 · answered Apr 10 '16 at 11:34

The simplest way to do this would be using a marquee

<marquee class='marquee'></marquee>

You can then write the javascript as follows.

var quotes = ["Q1", "Q2", "Q3", "Q4"];
$.each(quotes, function(i, j) {
  $("marquee.marquee").append('<span>'+j+'</span>')
})

you can even give individual elements (span in this case) style

.marquee span{
  margin:10px;
}

Text slideshow with effect

1 Answers1