[Resolved] Deleted Slider - Need help plaese

[Chris_St]

Hi, I thought I was in real trouble here.

I was using the standard welcome page that comes with the installation. There was a slider on it that I wanted to use so I replaced all the images with my own.

Problem was they all aligned left. I attempted to fix this by selecting all the images and then clicked justify. That did not work. I then noticed that there they were set as a bulleted list so I took the bullets off. Now the slider is gone and there are just images stacked in a list format. Putting the bullets back did not work.

I got the slider back by making another installation of Cube Cart, going to the documents and selecting / copying the source in the editor for the home page and then pasting it into my "live" page. The slider is now back but I am also back to images aligning left instead of centred.

Can someone please tell me how to get the images centred?

Regards, Chris 

https://australianartforsale.net/

[bsmither]

That positioning is hard coded into the BXSlider javascript.

There is a way to get away from float:left, and that is to have BXSlider "fade" the images.

But, getting away from float:left gets us float:none. I don't have small images to see what this does, but please let us know.

In the skin template main.php, find near the bottom:

$('.bxslider').bxSlider({auto:true,captions:true});

Change to:

$('.bxslider').bxSlider({auto:true,captions:true,mode:'fade'});

These are the options for the BXSlider: http://bxslider.com/options

[Chris_St]

Thanks for the reply.

I did as you suggest but it only changed the transition from slide to instant. Images still aligned to left so I have put it back as it was. I might need to use only panoramic images to make it look neat

[bsmither]

There is a "ticker" mode: http://bxslider.com/examples/ticker

[Chris_St]

Thanks for that.

Can you let me know which file the code needs changing in please?

https://australianartforsale.net/

[bsmither]

The file CubeCart uses is /skins/foundation/js/vendor/jquery.bxslider.min.js

However, finding and editing something specific in mini-fied javascript is incredibly difficult.

I suggest you download the BXSlider package, add the regular javascript file into this folder. Open this file in a programmer's text editor and search for the word 'float'. That code will be where you will add/edit your custom CSS rules.

Rename the existing jquery.bxslider.min.js to something else, rename the regular file to jquery.bxslider.min.js, then force your browser to reload all the page's resources (images, css, javascript -- usually by CTRL-F5) to get the new file.

 

[Chris_St]

Thanks again.

Unfortunately it looks too complex for me to follow through. Thanks anyway, Cheers Chris

[bsmither]

Try this:

In the skin's cubecart.default.css file, add:

.bx-wrapper img { margin: 0 auto; }

Save this file.

Force the browser to reload the page's resources.

[Chris_St]

In the skin's cubecart.default.css file, add:

.bx-wrapper img { margin: 0 auto; }

Tried this, but made no difference.

[bsmither]

Should have. It did for my installation.

It could be because your browser is still using the unedited cubecart.default.css file it has in its internal cache. Please confirm you have forced your browser to reload the page's resources.

 

Did you remove what was added? I don't see it in the cubecart.default.css file I fetched from your site.

[Chris_St]

I had removed it as it seemed to be doing nothing, however you were correct.

I had cleared history and used Ctrl F5 and also tested it in Opera instead of Chrome (which I normally use) but forgot I have Cloudflare installed and needed to purge the cache there. I have now done this and it all images are centered now, so problem solved.

 Thanks for all your assistance, Chris

https://australianartforsale.net