Issue with autoplay Bootsrap Carousel in Fordson

Issue with autoplay Bootsrap Carousel in Fordson

by Chris Kenniburg -
Number of replies: 4
Picture of Particularly helpful Moodlers Picture of Plugin developers

I am trying to implement the Bootstrap Carousel using the example provided here:

https://v4-alpha.getbootstrap.com/components/carousel/

I built the necessary function and mustache templates to display the carousel but it is not automatically sliding.  If anyone can help I'd like to include this in the next release of fordson.


Here is the function:

https://github.com/kennibc/moodle-theme_fordson/blob/master/classes/output/core_renderer.php#L1229-L1258

Here is the mustache file:

https://github.com/kennibc/moodle-theme_fordson/blob/master/templates/slideshow.mustache

And the settings page:

https://github.com/kennibc/moodle-theme_fordson/blob/master/settings/slideshow_settings.php


Any ideas on why it isn't automatically cycling the slides?

Thanks,

Chris

Attachment slideshow.jpg
Average of ratings: -
In reply to Chris Kenniburg

Re: Issue with autoplay Bootsrap Carousel in Fordson

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Chris,

Did you get this to work as you wanted it to?

I've just added the basic code to my website HERE

and it appears to be working OK and all I did was add to Frontpage Site Topic.

It stops as soon as it detects the cursor in the slider area. Which is easy to do when you login and mouse is gliding over the page.

The code I used is this...

<div id="FrontpageCarousel" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">First</li>
<li data-target="#carouselExampleIndicators" data-slide-to="1">Second</li>
<li data-target="#carouselExampleIndicators" data-slide-to="2">Third</li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"><img src=" " alt="First slide" width="160" height="180" /></div>
<div class="carousel-item"><img src=" " alt="Second slide" width="160" height="180" /></div>
<div class="carousel-item"><img src=" " alt="Third slide" width="160" height="180" /></div>
</div>
<a class="carousel-control-prev" href="#FrontpageCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></div>

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Issue with autoplay Bootsrap Carousel in Fordson

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I am wondering if it needs an actual IMG tag in order to automatically slide.  On my implementation I used the image as a background of a div.  

Average of ratings: -
In reply to Chris Kenniburg

Re: Issue with autoplay Bootsrap Carousel in Fordson

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I fixed it!  Apparently you need the left/right carousel-control buttons.  I added them back in and put a font-awesome icon for controls and it is working now.  Clicking the controls triggers the slideshow. 

 The indicators did not start the slideshow as I was expecting.  I should have a working version of the bootstrap slideshow with the new mustache template in the repository later today or tomorrow for the Fordson theme.

Average of ratings: -
In reply to Chris Kenniburg

Re: Issue with autoplay Bootsrap Carousel in Fordson

by Andrew Davidson -

Hi Chris,

With the latest bootstrap carousel, you can set the option of 'ride' to 'carousel', which will initialise autoplay on load, rather than on the user's first click.

You're able to set it either by a data attribute on your carousel element, or in your javascript initialiser.

Average of ratings: -