Carousel in More theme - how to make it advance automatically

Carousel in More theme - how to make it advance automatically

by Mia Musolino -
Number of replies: 9

I implemented Mary's carousel in our test site and it works but will only start advancing after I've clicked to advance past the first image. Is that normal? 

Here is my code: 

<!-- COPY AND PASTE THIS CODE TO YOUR SITE TOPIC OR COURSE TOPIC -->

<div class="carousel slide" id="myslider"><!-- class of slide for animation -->

<div class="carousel-inner">

<div class="item active"><!-- class of active since it's the first item --> <img width="1200" class="img-responsive" src="image1.png" />

<div class="carousel-caption">

<p>Friends of the National Zoo</p>

</div>

</div>

<div class="item"><img width="1200" class="img-responsive" src="image2.png" />

<div class="carousel-caption">

<p>National Museum of African American History and Culture</p>

</div>

</div>

<div class="item"><img width="1200" class="img-responsive" src="image3.png" />

<div class="carousel-caption">

<p>National Museum of American History</p>

</div>

</div>

<div class="item"><img width="1200" class="image4.png" />

<div class="carousel-caption">

<p>National Museum of Natural History</p>

</div>

</div>

</div>

<!-- /.carousel-inner --> <!-- Next and Previous controls below

href values must reference the id for this carousel --> <a class="carousel-control left" href="#myslider" data-slide="prev">‹</a> <a class="carousel-control right" href="#myslider" data-slide="next">›</a></div>

<!-- / END -->

(Edited by Mary Evans - original submission Tuesday, 28 November 2017, 8:35 PM)

Average of ratings: -
In reply to Mia Musolino

Re: Carousel in More theme - how to make it advance automatically

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

Oh great! So glad it works. 

It should work Automatically, but for some reason it doesn't.

All that is missing is a small file that you need to add to the More theme.

Ill get the file and upload it here.

Alternatively you could use the Morecandy theme which is based on the More theme, as the Carousel code works fine in the Morecandy theme.

Ill be back shortly with the code you need.

Mary

Average of ratings: -
In reply to Mary Evans

Re: Carousel in More theme - how to make it advance automatically

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

The file you need is here...

https://github.com/lazydaisy/moodle-theme_morecandy/blob/master/javascript/morecandy.js

All you or your site's iT guys need to do is:

  1. create a 'javascript' directory. In the More theme folder.
  2. copy and paste the contents of the file in the above link into Notepad or a Text editor.
  3. rename instances of 'Morecandy' to 'More' making sure to keep text in upper or lower case as written originally.
  4. save this file as 'more.js' to the new 'javascript' directory.
  5. add the following line to the end of the More theme's config.php
  6. $THEME->javascripts_footer = array('more');

That done clear theme cache in Theme selector > Clear theme caches button

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Carousel in More theme - how to make it advance automatically

by Mia Musolino -

I did all of the steps and there is no change. 

Don't I need to call javascript someplace in the topic on the front page where the rest of the carousel code is? 

Average of ratings: -
In reply to Mia Musolino

Re: Carousel in More theme - how to make it advance automatically

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

You need to purge all caches then the code can be recognised.

That is assuming you added the $THEME->javascripts_footer = array('more'); into the config?

This adds the JS to the page footer.

Moodle has jQuery so it should pick up.

Average of ratings: -
In reply to Mary Evans

RESOLVED Re: Carousel in More theme - how to make it advance automatically

by Mia Musolino -

it was a permissions error for the javascript folder -- woops! Working now!

I'm trying to put indicators on the bottom, but they are showing up top right and interfering with the next and previous controls. I guess I need some custom css to position the indicators if I want them at the bottom center.

Average of ratings: -
In reply to Mia Musolino

Re: RESOLVED Re: Carousel in More theme - how to make it advance automatically

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

What version of Moodle are you currently using? As this may have a baring on the positioning?

Average of ratings: -
In reply to Mary Evans

Re: RESOLVED Re: Carousel in More theme - how to make it advance automatically

by Mia Musolino -

Moodle 3.3.1 for one of our sites and 3.3.3 for the other.

Average of ratings: -
In reply to Mia Musolino

Re: RESOLVED Re: Carousel in More theme - how to make it advance automatically

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

Hi Mia,

I found this page on the Bootstrap site which explains how you can add various bit of code to the HTML using data values. This means you can alter the way in which it works can be adjusted via the HTML using the Text Editor.

This first link is for Bootstrap 2.3.2 which is what More theme uses.

http://bootstrapdocs.com/v2.3.2/docs/javascript.html#carousel

This next link uses similar layout but is for Bootstrap 4 Alpha which is what Boost theme uses

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

Hope this helps?

Mary

Average of ratings: -
In reply to Mia Musolino

Re: RESOLVED Re: Carousel in More theme - how to make it advance automatically

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

I guess the code you are using is this...which should be just underneath the top line where id="myslider>

Liks so...

<div id="myslider" class="carousel slide"><!-- class of slide for animation -->

class="carousel-indicators">
<li data-target="#myslider" data-slide-to="0" class="active"></li>
<li data-target="#myslider" data-slide-to="1"></li>
<li data-target="#myslider" data-slide-to="2"></li>
<li data-target="#myslider" data-slide-to="3"></li>
</ol>

The CSS for this and the carousel comes from Bootstrapbase which adds this into the center of the caption bar which is under the slides. It may need some adjusting to make it drop below that black bar.

To move it down you could try adding this to the Custom CSS area in the More settings page.

.carousel-indicators { top: 200px; } .

This is another time where you need to Clear Theme Cache which is a button at the top of the theme selector page.

Site Administration > Appearance > Themes > Theme selector --> Clear theme cache

Average of ratings: -