jQuery code not running in any browser

Question

0.00/5 (No votes)

See more:

I am trying to make an image carousel. But the images are not changing with time. The script part is not running. I have tried codes for many different types of carousels, but none of them are working in any browser. Please help...

full code:

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>


<style>
html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background: #def;
	min-height: 600px;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
 
#wrapper {
	width: 960px;
	height: 560px;
	margin: -280px 0 0 -480px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
}
#overlay {
	background: #def;
	width: 300px;
	height: 560px;
	overflow: hidden;
	position: absolute;
	left: -300px;
	top: 0;
	z-index: 1;
	
	-webkit-transition: left .5s ease;
	-moz-transition: left .5s ease;
	transition: left .5s ease;
}
#wrapper:hover #overlay {
	left: 0px;
}
#description {
	padding-top: 40px;
	width: 250px;
	margin-left: 450px;
 
	-webkit-transition: margin .5s ease;
	-moz-transition: margin .5s ease;
	transition: margin .5s ease;
}
#wrapper:hover #description {
	margin-left: 0px;
}
#description h3 {
	color: #69c;
	font-size: 35px;
	font-weight: normal;
	text-align: right;
	line-height: 30px;
	margin: 30px 0;
}
#description p {
	font-size: 13px;
	text-align: justify;
}
 
#wrapper .caroufredsel_wrapper {
	margin-left: 0px !important;
	
	-webkit-transition: margin .5s ease;
	-moz-transition: margin .5s ease;
	transition: margin .5s ease;
}
#wrapper:hover .caroufredsel_wrapper {
	margin-left: 150px !important;
}
#carousel img {
	display: block;
	float: left;
}
 
#pager {
	text-align: center;
	padding: 40px 20px 0 0;
}
#pager a {
	border-radius: 5px;
	background: #69c;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	float: right;
}
#pager a.selected {
	background: #333;
}
#pager span {
	display: none;
}
</style>



<script>
$(function() {
	$('#carousel').carouFredSel({
		direction: 'right',
		items: {
			visible: 1,
			start: -1
		},
		scroll: {
			duration: 1000,
			timeoutDuration: 3000
		},
		pagination: '#pager'
	});
});
</script>
</head>

<body>


<div id="wrapper">
 
<div id="carousel">
 
<img src="img/grozny1.jpg" width="960" height="560" /> <img src="img/grozny2.jpg" width="960" ¬
 
height="560" /> <img src="img/grozny3.jpg" width="960" height="560" /> <img src="img/grozny4.jpg" ¬
 
width="960" height="560" /> 

</div>
 
<div id="overlay">
 
<div id="description">
 
<h3>
 
Modest Celebration In Grozny
 
</h3>
 
<p>
 
The Chechen leader, Ramzan Kadyrov, has held a star-studded party in his capital Grozny - but denied it was anything to do with his 35th birthday.
 
</p>
 
<p>
 
Oscar-winning actor Hilary Swank and action star Jean-Claude van Damme have been criticised for attending the lavish party. Kadyrov is linked to a grim record of abuse. When stars get paid to turn up to party with him, it trivializes the suffering of countless victims of human rights abuses.
 
</p>
 
<div id="pager">
 
</div>
 
</div>
 
</div>
 
</div>
 
</body> </html>

[edit]Code block added[/edit]

Posted 17-Nov-13 22:47pm

Member 10373078

Updated 17-Nov-13 23:06pm

Nelek

v3

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Rockstar_ · Accepted Answer · 2013-11-17T22:56:00

Solution 1

Hi,

Where have you added reference for this method :

JavaScript

carouFredSel();

You need to add a javascript file for the above method.

Posted 17-Nov-13 22:56pm

Rockstar_

Updated 17-Nov-13 23:06pm

v2

Comments

Nelek 18-Nov-13 5:06am

Please don't post solutions to chat with people asking or answering. The messages are not always sorted by date, so it can be a bit difficult to follow them correctly.
The best option is to use the "Have a question or comment?" (or the tiny "reply" on another comment). Another advantage is, that the person you write to will get a notification, otherwise it could be that he/she doesn't see your additional question.

Member 10373078 18-Nov-13 7:05am

its working....thanks

Vinodh.B · Accepted Answer · 2013-11-17T23:08:00

Solution 2

XML

HI

Please refer the link .
The problem is with your script and you missed document.ready .

<a href="http://bxslider.com/">http://bxslider.com/</a>[<a href="http://bxslider.com/" target="_blank" title="New Window">^</a>]

Posted 17-Nov-13 23:08pm

Vinodh.B