Skip to content

Instantly share code, notes, and snippets.

@bappi-d-great
Created July 25, 2014 16:05
Show Gist options
  • Save bappi-d-great/b8d15e14c4f8330bb89f to your computer and use it in GitHub Desktop.
Save bappi-d-great/b8d15e14c4f8330bb89f to your computer and use it in GitHub Desktop.
A very simple jQuery text slider
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#main_imag').load(function() {
setTimeout(function() {
$('#text1').animate({
left: 0
})
}, 1000);
setTimeout(function() {
$('#text2').animate({
left: 0
})
}, 2000);
setTimeout(function() {
$('#text3').animate({
left: 0
})
}, 3000);
});
});
</script>
<div id="slide-wrap">
<img id="main_imag" src="image.jpeg" width="300px">
<span id="text1">Lorem ipsum</span>
<span id="text2">Lorem ipsum</span>
<span id="text3">Lorem ipsum</span>
</div>
<style>
#slide-wrap{
width: 300px;
position: relative;
}
#text1{
position: absolute;
top: 20px;
left: -500px;
display: block;
text-align: center;
width: 100%;
}
#text2{
position: absolute;
top: 50px;
left: -500px;
display: block;
text-align: center;
width: 100%;
}
#text3{
position: absolute;
top: 80px;
left: -500px;
display: block;
text-align: center;
width: 100%;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment