SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    "Letís create a simple jQuery plugin"

    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. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Could you post a link to the tutorial you're following?

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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. #6
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    <div class="container">
    <div class="main">

  7. #7
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Have you tried opening your browser's console to see if there are any errors being reported?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •