InMotion Hosting Support Center

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.

After you get the plugin zip file named 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. Upload the slider zip file to the theme folder. In this case the afterburner theme is in the /theme/afterburner directory.
  2. Extract the .zip file so the files are in the directory like the snapshot to the right.
  3. Edit the following files in your Moodle theme files.

    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='|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=""></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="">

    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="" title="Automatically generated caption"></li>
        <li><img src="" title="Automatically generated caption"></li>
        <li><img src="" title="Automatically generated caption"></li>
        <!-- end Basic jQuery Slider -->
    <!-- End outer wrapper -->
    <script class="secret-source">
       jQuery(document).ready(function($) {
         height      : 320,
         width       : 620,
         responsive  : true

    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 :
    You will need to reference your files like this:
    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.

Was this article helpful?
Continued Education in Course Moodle
You are viewing Section 3: 302: Inserting an image slider in Moodle
Section 2: 301: Fixing common errors when installing Moodle
Section 4: 303: Enabling Error Reporting in Moodle

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

Forum Login

You are NOT logged in. You can still browse our Support Center.

To participate within our Community Support Forum:

n/a Points
2016-03-31 5:14 am


how to change automatically generated caption in slider??

Please tell me

10,077 Points
2016-04-01 1:29 pm
Hello Khan,

You should only have to change the image title if you are following the code above.

Best Regards,
TJ Edens
n/a Points
2015-06-16 8:41 am

Hey, tanks for your explanations.

Slider Moodle JQuery does not for me, Images are shown but as elements of list.

I have this error in Console : bjqs is not a function. How can i deal with it ?

10,077 Points
2015-06-17 12:56 am
Hello Test Moodle,

Are you sure that you are loading your jQuery before the script you are using?

Best Regards,
TJ Edens
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.

31,595 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,
n/a Points
2014-09-12 9:06 am


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".

31,595 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,
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


31,595 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:

It is included in the compressed file titled

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

n/a Points
2014-06-13 6:48 am

nice slider, it save my time

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?



42,946 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.

Arnel C.
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...)

11,186 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.

Post a Comment

Email Address:
Phone Number:

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

15 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


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:
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!