Slider next and previous images instead of text

Question

Can somebody please explain to me why this is not working. I am trying to souce to images in javascript for a slider instead of just using text that used to say previous and next as buttons.

options = jQuery.extend({
    animationSpeed: 1000,
    navigation: true,
    easing: '',
    timeout: 5000,
    pause: true,
    pauseOnNavHover: true,
    prevText: img src='arrowleft.png'         used to be         prevText: 'Previous',
    nextText: img src='arrowright.png         used to be         nextText: 'Next',
    css3pieFix: false,
    currentClass: 'current',
    onLoad: function(){},
    onStart: function(){},
    onComplete: function(){}
}, options);

I am fairly new to all this so please help

Answer 1

It's because the prevText and nextText expects a string, but in your case you are providing it as img src = 'image-name' which is incorrect in many ways. If you want to pass the image src instead of text then you should use img.attr('src') to get the image source, provided you have image selector in img variable. Your javascript breaks on img src='arrowleft.png' because of incorrect syntax. It should be:

options = jQuery.extend({
                animationSpeed: 1000,
                navigation: true,
                easing: '',
                timeout: 5000,
                pause: true,
                pauseOnNavHover: true,
                prevText: img.attr('src'),
                nextText: img.attr('src'),
                css3pieFix: false,
                currentClass: 'current',
                onLoad: function () {},
                onStart: function () {},
                onComplete: function () {}
            }, options);

Note : this will work only if you have the image selector assigned to img variable. If img is undefined then it will again result in error. That's all I can help you on this issue unless you provide more code.