Support Forums

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

Your Time: Our Time:

Make homepage slideshow loop

Featured Lock Resolved Task
Hi,

The slideshow on the homepage just runs to the end slide then stops.

Is it possible to make it start again and loop back to slide 1 and continuously loop like this?

Thanks,

Chris

10 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
right now I can offer you only two ways:
1) Slideshow code customization (but this is beyond support)
2) Using alternative slidershow module

n3t

More than a month ago #Permalink
Hello,

any news on this? In SP Page Builder version 2.4.9 the Thumb slider element (used in Revibe for frontpage slideshow) still does not seem to have any settings for this. Just pass the loop once and stops completely.

Would be great to have option "Loop" in slider element...

Pavel

Paul Frankowski - Staff

More than a month ago #Permalink
Update of this template should be in August, in next week(s).

AverageJoe

More than a month ago #Permalink
Hi, any update on this? Slider is not looping. Thanks

pepperstreet

More than a month ago #Permalink

Is it possible to make it start again and loop back to slide 1 and continuously loop like this?
Chris


You could modify the main.js file, and change an option in the carousel/slider functions. Headsup: Edits get lost on Helix updates!

So, try to add changes in the template style settings -> custom code -> custom javascript
Or create an external custom.js file!

According to the Woo FlexSlider docs you have to set "animationLoop" option to "true".
As far as I can tell, the option can be set on the carousel AND/OR slider functions...
even 1 of them should work! The result seem to be the same.
Summary: The combinations true/true true/false false/true seem to work. At least 1 true is required. Probably related to the dependencies between carousel/slider. So, you might delete 1 of the 2 function below...

FYI – I have seen 1 glitch or a feature-bug: (even in latest FlexSlider 2.6.4)
If not all thumbs are visible, and the carousel reached the last one...
there is no prompt jump to the 1st thumb... however the slider works though,
but the active thumb does not catch up immediately. It needs to reach the 3rd image, and everything goes to normal.

Try and play with the following custom JS script:


jQuery(function($) {
$(window).load(function(){

$('#carousel').flexslider({
animationLoop: true
});

$('#slider').flexslider({
animationLoop: true
});

});
});

AverageJoe

More than a month ago #Permalink
Hi Pepperstreet, Thanks for the help, but it did not work when I applied it the custom JS code input in the helix options. You referred to it as the Woo Flexsldier; isn't this actually the Owl Carousel used in the Revibe template? There is a JS file in the js directory titled addon.sliderowl.js.

Here's the default settings for the controllers in addon.sliderowl.js

// controllers
var $controllers = $spslideowl.attr('data-sppb-slide-controllers');
if ($controllers == 'true') { var $controllers = true; } else { var $controllers = false};


$spslideowl.owlCarousel({
loop: true,
margin:0,
touchDrag : false,
mouseDrag : false,
autoplay: $autoplay,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
items:2,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 2
}
},
dots: $controllers,
});


$('.sppbSlidePrev').click(function(){
$spslideowl.trigger('prev.owl.carousel', [400]);
});

$('.sppbSlideNext').click(function(){
$spslideowl.trigger('next.owl.carousel',[400]);
});

});

pepperstreet

More than a month ago #Permalink
You referred to it as the Woo Flexslider; isn't this actually the Owl Carousel used in the Revibe template?


Nope. I was surprised, too. The Homepage Slider is based on Woo FlexSlider.

Rifat Wahid Alif - Staff

More than a month ago #Permalink
HI,
Open the following file templates/shaper_revibe/js/main.js on 73 no line you will get:



$('#carousel').flexslider({
animation: 'slide',
controlNav: false,
directionNav: $arrows,
animationLoop: false, // make it true
slideshow: $autoplay,
itemWidth: 160,
itemMargin: 30,
asNavFor: '#slider',
});

$('#slider').flexslider({
animation: "fade",
controlNav: false,
directionNav: $arrows,
animationLoop: false, // make it true
slideshow: $autoplay,
sync: "#carousel"
});


From here change the animationLoop value false to true

- Thanks

AverageJoe

More than a month ago #Permalink
Hi Rifat, That fixed the loop problem! Since this is a setting in main.js, can this be overridden in a custom.js file as to not lose the 'true" value on the next template update? Or better yet, could the default template setting for loop be "true"? I imagine there would be more interest in the slider looping than not.

Also, one other thing I noticed is that the current slide indicator stops on slide 2, and doesn't move from there. Not the biggest of deals for me, but would be nice if this indicator stayed current with the current slide. You can see it here --> https://www.cbtakron.com

Thanks!

joomlaprofessionals

More than a month ago #Permalink
Joomla 3.8.6 Revibe template - SP PageBuilder Pro 3 ??
I have changed templates/shaper_revibe/js/main.js and set animationLoop: true

But still slideshow stops after last slide.
How can I get this working?
I will send URL by PM as requested.


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 207
Sifat

Sifat

Total Accepted Answers: 129
Toufiq

Toufiq

Total Accepted Answers: 86
Pavel

Pavel

Total Accepted Answers: 6
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 4

100+

Templates

200,000+

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