Announcement

Collapse
No announcement yet.

Carousel: Captions

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Carousel: Captions

    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.

  • #2
    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
    TheCartDesigner.com
    Not 3dcart Owned or Operated
    100% Independent 3dcart Expert


    Follow Us on Twitter

    Comment


    • #3
      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?

      Comment


      • #4
        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.
        TheCartDesigner.com
        Not 3dcart Owned or Operated
        100% Independent 3dcart Expert


        Follow Us on Twitter

        Comment


        • #5
          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?

          Comment


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

            Comment


            • #7
              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)
              TheCartDesigner.com
              Not 3dcart Owned or Operated
              100% Independent 3dcart Expert


              Follow Us on Twitter

              Comment


              • #8
                Awesome, thanks Shaun!

                Comment


                • #9
                  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?

                  Comment

                  Working...
                  X