Moodle does not have a built in slider available in the Moodle plugins, so, in order to add a slider, you will need to code it into your page using jQuery. There are many free jQuery plugins you can use to get a slider working. In this tutorial we will use the Simple jQuery slider. The jQuery plugin is available at the following url.

https://github.com/jcobb/basic-jquery-slider/zipball/master

After you get the plugin zip file named jcobb-basic-jquery-slider-8ffe118.zip you will be able to upload the files necessary for the slider to work. Below are the steps to insert the Simple slider in your Moodle site.

Important! This tutorial explains how to add the jQuery slider in the AfterBurner theme. The steps are basicaly the same for the other themes as well.

Adding the Simple jQuery slider to Moodle

  1. Location of files in cPanelUpload the slider zip file to the theme folder. In this case the afterburner theme is in the /theme/afterburner directory.
  2. Extract the file to the them folderExtract the .zip file so the files are in the directory like the snapshot to the right.
  3. Add code to the head sectionsEdit the following files in your Moodle theme files.
    /theme/afterburner/layout/default.php
    /theme/afterburner/layout/embedded.php

    Paste the following code in the head section of your theme files.

    <!-- bjqs.css contains the *essential* css needed for the slider to work -->
    <link rel="stylesheet" href="/support/bjqs.css">
    <!-- some pretty fonts for this demo page - not required for the slider -->
    <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans:300' rel='stylesheet' type='text/css'> 
    <!-- demo.css contains additional styles used to set up this demo page - not required for the slider --> 
    <link rel="stylesheet" href="/support/demo.css">
    <!-- load jQuery and the plugin -->
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="/support/js/bjqs-1.3.min.js"></script>

    Important! Make sure you make the links in your code go to your server location with the URL. Instead of :
    <link rel="stylesheet" href="/support/bjqs.css">
    You will need to reference your files like this:
    <link rel="stylesheet" href="http://your-domain.com/theme/afterburner/bjqs.css">

    Save the changes.


  4. Edit HTML in MoodleLog into Moodle. Edit the page you want the slider to show up on. Click the Edit HTML Source button in the WYSIWYG editor.
  5. Paste the  code in the pagePaste the following code into your page where you want the slider to show.
    <!--  Outer wrapper for presentation only, this can be anything you like -->
    <div id="banner-fade">
      <!-- start Basic Jquery Slider -->
      <ul class="bjqs">
        <li><img src="http://your-domain.com/theme/afterburner/img/banner01.jpg" title="Automatically generated caption"></li>
        <li><img src="http://your-domain.com/theme/afterburner/img/banner02.jpg" title="Automatically generated caption"></li>
        <li><img src="http://your-domain.com/theme/afterburner/img/banner03.jpg" title="Automatically generated caption"></li>
      </ul>
        <!-- end Basic jQuery Slider -->
    </div>
    <!-- End outer wrapper -->
    <script class="secret-source">
       jQuery(document).ready(function($) {
         $('#banner-fade').bjqs({
         height      : 320,
         width       : 620,
         responsive  : true
    });
    });
    </script>

    Important! Make sure you make the links in your code go to your server location with the URL and that your images are stored in the theme/afterburner/img folder location. Instead of :
    src="/support/img/banner03.jpg"
    You will need to reference your files like this:
    src="http://your-domain.com/theme/afterburner/img/banner03.jpg"
    If not the images will not load.

    Save the files.


    View of image slider in MoodleNow your Moodle will have a slider with your images on it.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2014-03-15 9:55 am

Tanks abt this .that was really useful but...

i dont use afterburner them ,i use Binarius.

in my them files dosnt exist any file like that you say!!(Defualt.php and...)

Staff
9,162 Points
2014-03-17 8:50 am
The steps should be the same for most themes. If you do not see the files referenced, I recommend speaking the the developer of your theme for more information on how to modify it to do this.
n/a Points
2014-05-06 11:15 am

That's great. It works perfectly with my Moodle.

However I have got problems viewing it from a mobile phone. I am currently testing it from my iPhone.

Would you be able to provide some support with this?

Thanks

 

Staff
17,293 Points
2014-05-06 1:47 pm
Hello RDM,

Sorry for the problems with the slider on the iPhone. This code is based on a third-party developed solution and is provided in order to give a simple solution for a Moodle installation. It's difficult to tell how you have setup the slider and determine why it's not working on iPhone without having some specific details on your installation (and a link to the problem page). I would highly recommend that you use a different jQuery slider that is made for IOS. Here's an option that you may want to try: Swiper. If you want to keep using the one in this article, then you may want to contact the author(s) of this jquery by going to this link: Github page for the jquery.

Regards,
Arnel C.
n/a Points
2014-06-13 6:48 am

nice slider, it save my time

n/a Points
2014-08-01 7:44 am

it is not working . and i m unable to find demo.css and bjqs.css file so my css is not add to images that is in html editor

Help me

 

Staff
9,525 Points
2014-08-01 9:48 am
Hello lalit,

Thank you for your question. The demo.css, and bjqs.css files are downloaded by following the link in the top of the article:
https://github.com/jcobb/basic-jquery-slider/zipball/master

It is included in the compressed file titled jcobb-basic-jquery-slider-8ffe118.zip.

If you have any further questions, feel free to post them below.
Thank you,

-John-Paul
n/a Points
2014-09-12 9:06 am

Hello!

Thanx for slider. 

One question, how to put this slider on front page only? Is there any ways for that?

I'm using Moodle 2.6, theme "Clean".

Staff
9,525 Points
2014-09-12 10:37 am
Hello Pavel,

Thank you for your question about putting a slider on the Moodle front page. In Step 4, just edit the front page.

This should only add the slider to the front page. If it is added to every page by default, you will most likely have to use a different theme, or create a custom front page in Moodle.

Feel free to post any additional questions below.

Thank you,
John-Paul
n/a Points
2014-09-23 7:40 am

hi there, my images are shoing but not as a banner... they show with bullet points, as if they were subjects.

I've realized that, when I update the scritp into the HTLM editor, this part:

<script class="secret-source">    jQuery(document).ready(function($) {        $('#banner-fade').bjqs({            height      : 320,            width       : 620,            responsive  : true        });    });</script>

 

automatically changes to:

<script type="text/javascript">// <![CDATA[    jQuery(document).ready(function($) {        $('#banner-fade').bjqs({            height      : 320,            width       : 620,            responsive  : true        });    });// ]]></script>

What am I doing wrong?

I mean, the images do display, and I've changed everything accordingly, I belive the issue is the transformation, I don't know why the script changes automatically.

Thank you for the help.

Staff
9,525 Points
2014-09-23 10:44 am
Hello Maria,

Thank you for your question. We are happy to help, but will need some additional information.

Can you provide a link to the banner/bullet points, so we can replicate the problem.

Also, what theme/plugins are you using for Moodle ?

Thank you,
John-Paul

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

11 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!