Click here to Skip to main content
15,445,066 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have tried many many tutorials and ways to make my image slider work but it just doesn't work. I am just starting so I know I have to learn, but please help me out here.

Here is my HTML:

HTML
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>Hotel Acquabella</title>
    <link type="text/css" rel="stylesheet" href="main.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="main2.js"></script>
</head>
<body>
<div class="wholebody">
	<div class="workingarea">
    	<div class="header">
        	<div class="logo">
           		<a href="index.html"><img src="Images/logo.png" /></a>
            </div>
            <div class="menu">
            	<ul>
                	<li><a href="index.html">Home</a></li>
                    <li><a href="despre-noi.html">Despre noi</a></li>
                    <li><a href="produse.html">Produse</a></li>
                    <li><a href="noutati.html">Noutati</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
        </div>
      <div id="slider">
        	<ul class="slides">
            	<li id="1" class="slide"><img src="Images/blat_lavoar_baie.jpg" /></li>
                <li id="2" class="slide"><img src="Images/cadite_dus_acquabela.jpg" /></li>
                <li id="3" class="slide"><img src="Images/set_dus_jet_spa.jpg" /></li>
            </ul>
        </div>
        <div id="textslider">
        	<ul class="textslides">
            	<li class="textslide">Piesele și accesoriile de mobilier Acquabella preiau texturile produselor pentru duș și pot fi asortate cu acestea. Rezultatul final - armonia vizuală optimă pentru baia ta!</li>
                <li class="textslide">Acquabella îți prezintă un concept avangardist în designul băilor și o abordare ultra-creativă a unei băi cu personalitate: THE SHOWER SHOW.</li>
                <li class="textslide">Plăcile speciale Akron și cele 6 texturi principale, inspirate de aspectul gresiei, ardeziei, pielii sau pietrei, asigură designul remarcabil al produselor Acquabella.</li>
            </ul>
        </div>
        <div class="navigation">
        	<div class="previous">
            	<img src="Images/main-slider-prev.png" />
            </div>
            <div class="next">
            	<img src="Images/main-slider-next.png" />
            </div>
        </div>
  </div>
</div>
</body>
</html>


Here is my CSS:

body {
	background-color: #e9e6df;
}
.wholebody {
	width: 1180px;
	height: 2000px;
	background-color: #e9e6df;
}
.wholebody .workingarea {
	width: 1080px;
	height: 1900px;
	background-color: #ffffff;
	position: absolute;
	top: 0;
	left: 0;
}
.header {
	height: 115px;
	width: 1080px;
	display: inline-block;
}
.logo img {
	margin-left: 60px;
	margin-top: 26px;
	display: inline;
	float: left;
}
.menu ul {
	margin-top: 83px;
	margin-left: 250px;
}
.menu ul li {
	list-style-type: none;
	display: inline;
	padding: 20px;
	font-family: 'VarelaRegular', sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
}
.menu ul li a {
	color: #8f8e87;
	text-decoration: none;
}
.menu a:hover {
	color: #ccab65;
}
#slider {
	margin-top: 50px;
	width: 930px;
	height: 370px;
	overflow: hidden;
	position: absolute;
	z-index: 1;
}
#slider .slides {
	display: block;
	width: 6000px;
	height: 370px;
	margin: 0;
	padding: 0;
}
#slider .slide {
	float: left;
	list-style-type: none;
	width: 930px;
	height: 370px;
}
#textslider {
	height: 150px;
	width: 540px;
	overflow: hidden;
	z-index: 2;
	position: absolute;
	right: 0px;
	top: 325px;
	background-color: #ccab65;
}
#textslider .textslides {
	display: block;
	width: 6000px;
	height: 150px;
	margin: 0;
	padding: 0;
}
#textslider .textslide {
	float: left;
	list-style-type: none;
	width: 420px;
	height: 60px;
	color: #fff;
	font-family: serif;
	font-size: 17px;
	font-style: italic;
	font-weight: 600;
	line-height: 24px;
	padding-top: 45px;
	padding-bottom: 45px;
	padding-left: 60px;
	padding-right: 60px;
}
.navigation {
	height: 40px;
	width: 150px;
	position: absolute;
	right: 0px;
	top: 500px;
}
.previous {
	height: 40px;
	width: 74px;
	float: left;
	display: inline;
	border: none;
	border-right: 1px solid #ccab65;
}
.previous img {
	position: absolute;
	width: 5%;
	left: 40px;
	top: 12px
}
.next {
	height: 40px;
	width: 75px;
	float: right;
	display: inline;
}
.next img {
	position: absolute;
	width: 5%;
	right: 40px;
	top: 12px;
}


Here is my jQuery:

JavaScript
$(document).ready(function() {
	$('.previous').click(function(){
		var currentSlide = 1;
		$('.slides').animate({'margin-left': '-=930'}, 1000);
		$('.textslides').animate({'margin-left': '-=540'}, 1000);
	});
	$('.next').click(function(){
		$('.slides').animate({'margin-left': '+=930'}, 1000);
		$('.textslides').animate({'margin-left': '+=540'}, 1000);
	});
});
Posted
Comments
What does not work? Please debug and try to find out the problem.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900