Delay slide transition on Header Carousel

  • Hi all, I’m a bit stumped again, I was hoping I could pick your brains!

    I need to delay the transition time between images on my Header Carousel I am updating the images to contain tag lines and I need the visitors to be able to read the text before it changes. I can’t find out what it is currently set at but I count about 3s and I need it to be 5 or 6s.

    I’ve recently been provided with some Custom CSS to change the opacity/overlay of the banner images
    .banner .banner-images .banner-images-image:before {
    content: “”;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    , so I was hoping to find my answer in the same area, but the only code I can see that relates to transition is:

    Transition: opacity 1000ms cubic-bezier ( 0, 0, 0.04, 0.98) 0s – I’m not entirely sure this is what I need to adjust.

    Would this Custom CSS relate to the .banner .banner-images .banner-images-image too?

    TIA

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator t-p

    (@t-p)

    Are you using a plugin for this Header Carousel? Yes? What’s the full name of this plugin? Where did you download it from?

    Or, is this a feature of your active theme? Yes? What’s the full name of this theme? Where did you download it from?

    Thread Starter chattynoir

    (@chattynoir)

    Thank you for your response @t-p

    I have just taken on the management of the website, mainly to update content, but if I can to make minor adjustments to the code, I’m not an expert but have edited WordPress themes and confident to make changes, if I know where to look. Mainly to try and save the business some pennies due to COVID!

    So in answer to your questions, there is no plugin, it’s a feature of the theme, that was created specifically for the business – We can ask the creators to adjust it, but it will cost – so I’m hoping to be able to do it myself as the only thing that needs to be edited now is this ‘transition’.

    The carousel is Slick.JS from Ken wheeler, and I can see the type of code that I need to change the transition is the [autoplaySpeed] currently set to a default of 3000, so I need the default set to 5000 or 6000 – I just don’t know what custom CSS – any ideas?

    • This reply was modified 4 years, 5 months ago by chattynoir.
    Thread Starter chattynoir

    (@chattynoir)

    So I think I have found out the code I need (Taken from https://github.com/kenwheeler/slick):

    Example

    Change the speed with:

    $(element).slick(‘slickSetOption’, ‘speed’, 5000, true);

    I’m guessing I change the ‘speed’ to ‘autoPlaySpeed’, my main question is where do I put the code? I’m guessing it’s not in Custom CSS – tried and it didn’t like it!

    Moderator t-p

    (@t-p)

    So I think I have found out the code I need (Taken from https://github.com/kenwheeler/slick)

    Please ask the code author at github.

    it’s a feature of the theme, that was created specifically for the business – We can ask the creators to adjust it, but it will cost

    If this was a custom theme, you may have to go back to your developer team and ask them to make the necessary change(s) to the theme.

    Forum volunteers are also not given access to commercial products, so they would not know why your commercial theme or plugin is not working properly. Commercial products are not supported in these forums.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Delay slide transition on Header Carousel’ is closed to new replies.

Tags