Carousel: Captions

[markber]

I have a background image on my homepage, and I'd like to use the carousel (flexslider) to show three captions. I tried creating the captions on a transparent background in PhotoShop, but for some reason when the carousel loads them, they appear to render with a white background, which covers up my background.
Since I'm only showing text, is there a way to programatically render just text captions with links?
I've looked at other ecommerce sites that make use of the flexslider and this appears to be an option.

[thecartdesigner]

Add this to your primary active css file:

.flexslider { background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;}

save go to settings, clear cache and refresh the front end. That should do it. Hope this helps

Thanks,
Shaun

[markber]

Awesome, thanks Shaun ... that works like a charm!
For my own understanding, what do the values "none, repeat 0 0 !important" do?
Is there a way to get left and right arrows to show and dots at the bottom of the image to reflect the count of slides?
For captions, is a transparent image the right way to go ... or is there a caption option similar to other woocommerce implementations?

[thecartdesigner]

rgba(0,0,0,0) = transparent

So this rule is actually the exact same thing, I just got use to writing out the rgb string:
.flexslider { background: transparent !important;}

Arrows should show (on hover) as long as you have more than one image in the carousel module

What your doing is the best way to implement it in regards to how 3dcart uses the flexslider. Nothing is set in the slider by GUI settings as if you were in WP. They could have the option for captions, but don't have it in the homepage carousel settings as of yet. Maybe someday since it would be fairly simple to add I would think.

[markber]

Thanks for the clarification, transparent works instead of the rgb values ... and you're right that the arrows do show when more than one image is used.
Any idea how to change the location of the arrows? In my scenario since i'm using captions, the arrows are nowhere near the captions.
Is there a way to control the scroll delay between image in css?
Any idea what "none, repeat 0 0 !important" do?

[markber]

Also, what are the animation options available via CSS? I'm looking for a fade-in or just appear as opposed to slide.

[thecartdesigner]

I will find the nav arrow css when I get a chance,

Delay and transition are under the "Advance Settings" for the homepage carousel
- delay is in milli so 4500 would be 4.5 sec, you do not need to enter a height or a width. They can remain blank

none = (repeat option)
0 0 = (Background positions vertical and horizontal in px)
!important = (Forces the css rule above any other same rule)

[markber]

Awesome, thanks Shaun!

[markber]

Looks like the slider by default stretches the images, even though I specified small values in the width and height e.g. 320 x 240.
I tried setting these values in the .flexslider class, but that didn't seem to make a difference.
Is there a way to force the slider's width and height?