Inserting an image slider in Moodle

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 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. 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./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="bjqs.css">
<!-- some pretty fonts for this demo page - not required for the slider -->
<link href='https://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="demo.css">
<!-- load jQuery and the plugin --> <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="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="bjqs.css">
   You will need to reference your files like this:
   <link rel="stylesheet" href="https://example.com/theme/afterburner/bjqs.css">

   Save the changes.

    

4. 

   Log 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 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="https://example.com/theme/afterburner/img/banner01.jpg"
title="Automatically generated caption"></li>
<li><img src="https://example.com/theme/afterburner/img/banner02.jpg"
title="Automatically generated caption"></li>
<li><img src="https://example.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="img/banner03.jpg"
   You will need to reference your files like this:
   src="https://example.com/theme/afterburner/img/banner03.jpg"
   If not the images will not load.

   Save the files.

    

   

   Now your Moodle will have a slider with your images on it.