---
title: "Inserting an image slider in Moodle"
description: "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..."
url: https://www.inmotionhosting.com/support/edu/moodle/image-slider-moodle-jquery/
date: 2013-02-15
modified: 2023-06-19
author: "InMotion Hosting Contributor"
categories: ["Moodle"]
type: post
lang: en
---

# 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](https://basic-slider.com/). 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. [Upload the slider zip file](/support/website/how-to-edit-a-file/) to the theme folder. In this case the afterburner theme is in the `/theme/afterburner` directory.
2. [Extract the .zip file](/support/edu/cpanel/compressing-uncompressing-files/) so the files are in the directory like the snapshot to the right.
3. [Edit](/support/website/how-to-edit-a-file/) 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. [![Edit HTML in Moodle](https://www.inmotionhosting.com/support/wp-content/uploads/2013/02/edu_moodle_301_add-slider-jquery-3-edit-html.gif)](/support/wp-content/uploads/2013/02/edu_moodle_301_add-slider-jquery-3-edit-html.gif) [Log into Moodle.](/support/edu/moodle/moodle-login-administrator/) 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 page](https://www.inmotionhosting.com/support/wp-content/uploads/2013/02/edu_moodle_301_add-slider-jquery-4-add-html.gif)](/support/wp-content/uploads/2013/02/edu_moodle_301_add-slider-jquery-4-add-html.gif) 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.   [![View of image slider in Moodle](https://www.inmotionhosting.com/support/wp-content/uploads/2013/02/edu_moodle_301_add-slider-jquery-6-final-view.gif)](/support/wp-content/uploads/2013/02/edu_moodle_301_add-slider-jquery-6-final-view.gif) Now your Moodle will have a slider with your images on it.