I have download the bx slider script and implemented everything, however I believe it is not working as I do not have an image in the HTML like so:

<a href="#"><img...

Instead I have the link have class name with an image background. How can I get the BXSlider to work?

Best Regards,Tim

ralphm
—
2014-06-23T05:48:42Z —
#2

Sounds like you need to set a width and height to the LIs. You really ought to include the BX code in the link you posted. But also please optimize that gigantic background image. It's not fair to ask users to download a huge file like that.

Pullo
—
2014-06-23T06:55:08Z —
#3

Lol, 5MB is hefty for a background image, especially if your users are on a mobile device.

I just used GIMP to get the file size down to 5.0MB, then used TinyPNG to further compress it to 1.42 MB without any reduction in quality.

Yes, that article gives some good tips. I normally just use the Save for Web feature in Ps, but you can do better with those tools listed, such as TinyPNG—assuming you are happy to serve the image up in that format.

MrTIMarshall
—
2014-06-23T13:20:16Z —
#8

Regarding my background image, it is not the final version but upon being complete, I'll do my best to reduce the background file size.

MrTIMarshall
—
2014-06-23T14:17:21Z —
#9

Removed the background images whilst working and whilst they are being fully made.

Pullo
—
2014-06-23T18:59:04Z —
#10

So back to your original question:

You want to implement this slider within the navigation of your site - not using images, but setting a background image on the various anchor tags.

Did I get that correct?

MrTIMarshall
—
2014-06-23T19:54:07Z —
#11

<a href="#"><img class="EntertainmentImg"></a>

I tried the above which also worked, showing the image and the images hover image. This did not get the bxslider to work. placing the <ul class="bxslider"> content </div> outside of the nav area will get it to work, I am just failing to implement it so that when you click on 'Browse Raffles' it drops down and you see the slider.

Pullo
—
2014-06-23T19:59:58Z —
#12

Ok, well I can try and help, but if it turns out to be a CSS issue, you might have to head to the CSS forum.

Can you strip all of the unnecessary CSS out of your demo page (let's just use the desktop version for the time being), as well as the unnecessary JavaScript, then let me know.

I just added the show and hide before and after the existing initialisation routine so that it gets initialised properly and works as expected (tested locally). However Pullo will probably have a more efficient way of doing that.

This was the local code I was testing which will work if tested while online.