george burke george burke - 10 months ago 27
Javascript Question

HTML JQuery Image Slider

I am having trouble with this image slider. The images are supposed to fade in and out, each image being displayed for 5 seconds. I am relatively new to coding and this site and was wondering if anyone would help me with this problem.

At the moment I am just stuck on the first image, and the slideshow is not working at all.

I know you haven't got access to the ResponsiveSlides.js file but I believe that there is a small error that is not within that js file, but within my beginner code.

Here is the CSS and part of the HTML:

.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;

.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;

.rslides li:first-child {
position: relative;
display: block;
float: left;

.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;

<script src=""></script>
<script src="js/responsiveslides.min.js"></script>
<title>George Burke</title>
<link rel="stylesheet" href="styling.css"/>
<script type="text/javascript">

jQuery(document).ready(function() {
$(document).on("scroll", function(){
if ($(document).scrollTop() > 100) {
} else {
<script type="text/javascript" charset="utf-8">
// Trigger maximage

$(function () {
auto: true,
fade: 500,
speed: 100,




<div id="maximage">
<ul class="rslides">
<li><img src="images/turbines.jpg" alt=""></li>
<li><img src="images/london.jpg" alt=""></li>
<li><img src="images/nbauk.jpg" alt=""></li>

<header class="header">
<h1>George Burke</h1>
<li><a href="">me</a></li>
<li><a href="">photos</a></li>
<li><a href="">queries</a></li>
<li><a href="">connect</a></li>


There is an error in the code:


should be


it refers to

<ul class="rslides">

. is the selector for a class while # is the selector for an id
. and # cannot be used simultaneously as #..