"Let’s create a simple jQuery plugin"

JavaScript
1

Hi,

I found this amazing product slider which was simple to set up. Until it came to the Javascript part “Let’s create a simple jQuery plugin”

How to Create a Simple Multi-Item Slider | Codrops

I have absolutely no idea what Im supposed to do with this part. I download the source files and uploaded the javascript files to my home folder but that no affect.

Can anyone advice what I should do with the javascript code to get that to work?

2

Could you post a link to the tutorial you’re following?

3

Hi, sorry…

4

I downloaded and unzipped the sample code and it works right out of the box for me. What are you getting when you open the page in your browser (and what browser/version are you using)?

5

Hi,

I have tried to slim it down the bare minimum. The two links to the .js files work and I have uploaded the image but there is no functionality on the page.


<head>
	<link rel="stylesheet" href="/stylesheet.css" type="text/css" />
	<script src="/products/modernizr.custom.63321.js"></script>
	</head>
	<body>
		<div class="container">	
			<div class="main">
				<div id="mi-slider" class="mi-slider">
					<ul>
						<li><a href="#"><img src="/images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
						<li><a href="#"><img src="/images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
						<li><a href="#"><img src="/images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
						<li><a href="#"><img src="/images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="/images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
						<li><a href="#"><img src="/images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
						<li><a href="#"><img src="/images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
						<li><a href="#"><img src="/images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="/images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
						<li><a href="#"><img src="/images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
						<li><a href="#"><img src="/images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
						<li><a href="#"><img src="/images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
					</ul>
					<ul>
						<li><a href="#"><img src="/images/1.jpg" alt="img01"><h4>Boots</h4></a></li>
						<li><a href="#"><img src="/images/2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
						<li><a href="#"><img src="/images/3.jpg" alt="img03"><h4>Loafers</h4></a></li>
						<li><a href="#"><img src="/images/4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
					</ul>
					<nav>
						<a href="#">Shoes</a>
						<a href="#">Accessories</a>
						<a href="#">Watches</a>
						<a href="#">Bags</a>
					</nav>
				</div>
			</div>
		</div><!-- /container -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script src="/products/jquery.catslider.js"></script>
		<script>
			$(function() {

				$( '#mi-slider' ).catslider();

			});
		</script>
	</body>
</html>
6

There is one thing I dont understand. These two divs aren’t in the CSS code but are in the source code for the demo.

	&lt;div class="container"&gt;	
		&lt;div class="main"&gt;
7

Have you tried opening your browser’s console to see if there are any errors being reported?