<!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>
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; }
$(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); }); });
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)