As a newcomer to jQuery, I am attempting to create a slider using jQuery. Here is the script I have so far:
$(function()
{
var bgCounter = 0,
text = [
'some html code here',
'some html code here',
'some html code here',
],
link = [
'LINK',
'LINK',
'LINK'
],
backgrounds = [
"img.jpg",
"img.jpg",
"img.jpg"
];
function changeBackground()
{
bgCounter = (bgCounter+1) % backgrounds.length;
$('#Main-screen').css('background', 'url('+backgrounds[bgCounter]+')');
$('#Main-screen').css('background-size','cover');
$('#example').html(text[bgCounter]);
$('a.link').attr("href", "#"+link[bgCounter]);
setTimeout(changeBackground,4000);
}
changeBackground();
})();
Here is the corresponding HTML/CSS:
#Main-screen {
position: relative;
width:100%;
height: 100%;
<div id="Main-screen" style="display:inline-block;">
<a class="link" href="#"><span id="example"></span></a>
I am unsure if it is possible to add a transition effect (such as a fade) when switching between images, as well as implementing next/previous links. If anyone has suggestions on how to achieve this, it would be greatly appreciated. I am not certain if my current script allows for these features. If not, I would appreciate examples demonstrating how to do so.
Apologies for any language errors in my English.