We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

carousel - change transition to fade

Featured Lock Resolved Issue
Hi,
is there a way to change the default sliding transition of the SP page Builder carousel addon to a fade transition?
Is perhaps also a way to control the duration parameters of the transition?
I am using Helix 3 with joomla 3.6

Thank you for your assistance

6 Answers

Eddy

More than a month ago #Permalink
The solution.. add in your custom css this code:


.sppb-carousel-inner > .sppb-item {
opacity: 0;
transition-property: opacity;
transition-duration: 4s;
transition-timing-function:linear;
}

.sppb-carousel-inner .active {
opacity: 1;
}

.sppb-carousel-inner .active.left,
.sppb-carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}

.sppb-carousel-inner .next.left,
.sppb-carousel-inner .prev.right {
opacity: 1;
}

.carousel-fade .carousel-control {
z-index: 2;
}


@media all and (transform-3d), (-webkit-transform-3d) {
.sppb-carousel-inner > .item.next,
.sppb-carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sppb-carousel-inner > .item.prev,
.sppb-carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sppb-carousel-inner > .item.next.left,
.sppb-carousel-inner > .item.prev.right,
.sppb-carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

Amjad Rana

More than a month ago #Permalink
Hello Marco Ferracuti,

Thanks for your query. But, it's not possible with our carousel addon. :)

Thanks
Amjad

Marco Ferracuti

More than a month ago #Permalink
Thank you,

it just seems a bit odd that your reply, after 4 days, is a mere "it's not possible with our carousel addon".
Is it really all that you can tell me after four days?
It just gives me a hint on the level of joomshaper support.
Too bad, because the framework and extensions are very good!

Bye

Filipe

More than a month ago #Permalink
The solution.. add in your custom css this code:


.sppb-carousel-inner > .sppb-item {
opacity: 0;
transition-property: opacity;
transition-duration: 4s;
transition-timing-function:linear;
}

.sppb-carousel-inner .active {
opacity: 1;
}

.sppb-carousel-inner .active.left,
.sppb-carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}

.sppb-carousel-inner .next.left,
.sppb-carousel-inner .prev.right {
opacity: 1;
}

.carousel-fade .carousel-control {
z-index: 2;
}


@media all and (transform-3d), (-webkit-transform-3d) {
.sppb-carousel-inner > .item.next,
.sppb-carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sppb-carousel-inner > .item.prev,
.sppb-carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sppb-carousel-inner > .item.next.left,
.sppb-carousel-inner > .item.prev.right,
.sppb-carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}




Thank you very much Eddy! I was also looking for a solution for this.

Christine Astin

More than a month ago #Permalink
Hi -

The custom code helped me... thanks... Is there a way to get the slides to fade into each other, like a dissolve, rather than the first slide fading out completely... then next slide fading in?


There are no replies made for this post yet.
Be one of the first to reply to this post!

123

Templates

327411

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us