Solved SP Page Builder

Article Thumb Slider

Asked by donnellholness 5 years ago Last activity 4 years ago

Hi Guys.

I have created a Caribbean News Website with Newsberg Template. See https://wiredja.com.

Problem. The slider switches from one article to another too quickly. It need to extend the duration of each slide to 7 or 8 seconds before it sitches to the next slide. Some readers complain that they cannot read the titles and introduction so quickly.

I have tried the following code:
.swiper-wrapper {transition-duration: 5s !important;}, but this only changes the transistion, decreasing the slide transistion time to a slower speed.

Is there a way to increase the duration (making each slide remain longer on the page) before switching to the next?

Accepted answer

Marked as the solution

donnellholness Asked this

5 years ago

Yes it is? You see it on the homepage as soon as the site opens up.

8 more replies

Rashida Rahman Staff

5 years ago

Hi there!

Is this the first home slider?

Best Regards

donnellholness Asked this

5 years ago

yes

Rashida Rahman Staff

5 years ago

Hi,

Did you try the transition delay property, please?

You can use the following code in your custom CSS:

.sppb-addon-articles-thumb-slider .swiper-wrapper {
    transition-delay: 5s !important;
}

Hope this will serve your perpose.

Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.

https://prnt.sc/pu705g

https://prnt.sc/pu70zn

Best Regards

donnellholness Asked this

5 years ago · edited

Hi Rashida,

Thanks for your response. I tried your suggestion and it worked. The slide now stays on screen for a longer time. Take a look. https://wiredja.com.

However the sidebar (the headlines in blue on the right hand side of the slider) is no longer synchronized with the main story. First the story changes and then the sidebar changes after some seconds. Also if you click on a story on the sidebar, it takes a few seconds before the slider changes. Is there a solution for this?

Rashida Rahman Staff

5 years ago

Hi,

You can use the follwoing selector .sppb-addon-articles-thumb-slider .articles-thumb too in this case. Then the overall code should look like :

.sppb-addon-articles-thumb-slider .articles-thumb, .sppb-addon-articles-thumb-slider .swiper-wrapper {
    transition-delay: 5s !important;
}

Please use this code instead of previous.

And let me know if it fixes the issue.

Best Regards

soypia

4 years ago

Hi. i tried the above code in css. It works but not again for the first slider. It is like the first slide is faster than all the others.

Rashida Rahman Staff

4 years ago

Hi,

Sorry for the delayed response.

Unfortunately, I could not understand the last issue you have arised later on.

Thanks!

soypia

4 years ago

Thanks . If i add the code above, the slides does not work well. it skips the first slide and the next slides change only titles.