Clickable and automatic image slider

I created a slider that fades images automatically but you can also click to see the next or previous image. It already works how it should. But I think my code is really heavy. I am not experienced with JavaScript / jQuery so it would be nice if someone could help me to tidy up my code.

```
// helper to change the slider background image
var changeImage = function(id, image){
$(id).css('background-image', 'url('+image+')');
};

// auto change slider elements over time
$(window).load(function() {
var images = [ 'http://mysite.com/image1',
'http://mysite.com/image2',
'http://mysite.com/image3',
'http://mysite.com/image4',
'http://mysite.com/image5',
'http://mysite.com/image6'
];
var texts = [
'Text 1',
'Text 2',
'Text 3',
'Text 4',
'Text 5',
'Text 6'
];
var hrefs = [ 'http://mysite.com/link1',
'http://mysite.com/link2',
'http://mysite.com/link3',
'http://mysite.com/link4',
'http://mysite.com/link5',
'http://mysite.com/link6'
];
var srcs = [ 'http://mysite.com/image1',
'http://mysite.com/image2',
'http://mysite.com/image3',
'http://mysite.com/image4',
'http://mysite.com/image5',
'http://mysite.com/image6'
];
// counter variables for images, texts and links
var i = 0;
var t = 0;
var h = 0;
var s = 0;

var x = 0;
var inter = "";
var again = "";

var hrefChange = document.getElementById('theHref');

// register next slide click
document.getElementById("clickablen").onclick = function()

A few thoughts :

• It's hard to see why you need four congruant arrays. Why not one array containing objects, each with properties .image, .text, .href, .src?

• Probably better to increment/decrement the indices "on demand" not in advance. That way you only ever need to adjust by +1 or -1. Currently, -2 is only necessary because +1 was previously predicted.

• Use the module operator % to acheve the "wrap-around" effect. Javascript doesn't naturally do modulo of negative numbers properly, but a simple solution is available.

• Don't hard-code 6. Use images.length etc all through.

• jQuery's .bind() is deprecated in favour of .on(), but you should probably be using .one() to prevent the build-up of event handlers.

Also :

• Similar functions changeBackground(), changeBackgroundNext() and changeBackgroundPrev() could be combined into one, with the detailed behaviour determined by parameters; it seems that direction 1|-1 and a boolean indicating manual|auto will suffice.

• Two interval vars, inter and again seem unnecessary. One should suffice.

Without seeing a demo, it's hard to visualise the interplay between #wrapper_top and #wrapper_bottom and the differences betweeen a manual and auto so those aspects may be wrong, but the general pattern might be as follows :

```
// Auto change slider elements over time
$(window).load(function() {
// Outer vars
var data = [
{
'image': 'http://p5.focus.de/img/fotos/crop3167630/6282711837-w1200-h627-o-q75-p5/Google.jpg',
'text': 'Text 1...',
'href': 'http://google.de/',
'src': 'http://p5.focus.de/img/fotos/crop3167630/6282711837-w1200-h627-o-q75-p5/Google.jpg'
},
{
'image': 'http://www.heise.de/imgs/18/1/4/9/2/9/0/1/urn-newsml-dpa-com-20090101-150420-99-02936_large_4_3-fc997534cde9c449.jpeg',
'text': 'Text 2...',
'href': 'http://google.de/',
'src': 'http://www.heise.de/imgs/18/1/4/9/2/9/0/1/urn-newsml-dpa-com-20090101-150420-99-02936_large_4_3-fc997534cde9c449.jpeg'
},
{
'image': 'http://p5.focus.de/img/fotos/crop3167630/6282711837-w1200-h627-o-q75-p5/Google.jpg',
'text': 'Text 3...',
'href': 'http://google.de/',
'src': 'http://p5.focus.de/img/fotos/crop3167630/6282711837-w1200-h627-o-q75-p5/Google.jpg'
},
{
'image': 'http://www.heise.de/imgs/18/1/4/9/2/9/0/1/urn-newsml-dpa-com-20090101-150420-99-02936_large_4_3-fc997534cde9c449.jpeg',
'text': 'Text 4...',
'href': 'http://google.de/',
'src': 'http://www.heise.de/imgs/18/1/4/9/2/9/0/1/urn-newsml-dpa-com-20090101-150420-99-02936_large_4_3-fc997534cde9c449.jpeg'
},
{
'image': 'http://p5.focus.de/img/fotos/crop3167630/6282711837-w1200-h627-o-q75-p5/Google.jpg',
'text': 'Text 5...',
'href': 'http://google.de/',
'src': 'http://p5.focus.de/img/fotos/crop3167630/6282711837-w1200-h627-o-q75-p5/Google.jpg'
},
{
'image': 'http://www.heise.de/imgs/18/1/4/9/2/9/0/1/urn-newsml-dpa-com-20090101-150420-99-02936_large_4_3-fc997534cde9c449.jpeg',
'text': 'Text 6...',
'href': 'http://google.de/',
'src': 'http://www.heise.de/imgs/18/1/4/9/2/9/0/1/urn-newsml-dpa-com-20090101-150420-99-02936_large_4_3-fc997534cde9c449.jpeg',
},
{
'image': 'http://p5.focus.de/img/fotos/crop3167630/6282711837-w1200-h627-o-q75-p5/Google.jpg',
'text': 'Text 7...',
'href': 'http://google.de/',
'src': 'http://p5.focus.de/img/fotos/crop3167630/6282711837-w1200-h627-o-q75-p5/Google.jpg'
}
];
var i = data.length - 1; // counter variable for images, texts, links and srcs
var inter;
var hrefChange = document.getElementById('theHref');
var title = document.getElementById("myspan");

// Worker functions
// Change an element's bg image
function changeImage(id, image) {
return $(id).css('background-image', 'url(' + image + ')');
}
// Initiate auto-play
function auto() {
inter = setInterval(function() {
changeBackground(1, true);
}, 10000);
}
// Slider functionality - general function
function changeBackground(dir, isAuto) {
var t1 = isAuto ? 1000 : 0;
var t2 = isAuto ? 300 : 0;
var ii = i; // remember index before incrementing/decrementing

i = (((i + dir) % data.length) + data.length) % data.length; // increment/decrement index, with wrap-around in both directions.

title.innerHTML = data[i].text;

if(isAuto) {
changeImage('#wrapper_bottom', data[ii].image).css('opacity', 1);
}

$('#wrapper_bottom').animate({'opacity': 1}, t1, function() {
hrefChange.setAttribute('href', dat

StackExchange Code Review Q#121375, answer score: 2