george burke george burke - 4 months ago 14
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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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) {
$(".header").addClass("shrink");
} else {
$(".header").removeClass("shrink");
}
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(function(){
// Trigger maximage
jQuery('#maximage').maximage();
});


</script>
<script>
$(function () {
$("#.rslides").responsiveSlides({
auto: true,
fade: 500,
speed: 100,
});

});
</script>

</head>

<body>

<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>
</ul>
</div>

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




Answer

There is an error in the code:

$("#.rslides")

should be

$(".rslides")

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

Comments