I tried different jquerry sliders from the internet. Some work but only as full background while i want the slider containend in a div "<div class="banner"> ".
Im now using unslider from unslider.com, while the sliding works the images totally leak out of the div container.How can I change this ? thx . Down youll see my html and css code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slider2</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//unslider.com/unslider.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Deine Pizzeria</h1>
</header>
<section id="underheadersection">
<div id="underheadersectionPic1"> g</div>
<div class="banner">
<ul>
<li><img alt="slideimage" src="picFold/opt111.jpg" /></li>
<li><img alt="slideimage" src="picFold/pic11.jpg" /></li>
<li><img alt="slideimage" src="picFold/pic12.jpg" /></li>
</ul>
</div>
</section>
<section id="maincontainer"><div class="resize"></div>
<section id="upleft" class="navilinks"><a href="index.html">Home</a>
</section>
<section id="upright" class="navilinks"><a href="speisen.html">Speisemenü</a>
</section>
<section id="downleft" class="navilinks"><a href="kontakt.html">Kontakt</a>
</section>
<section id="downright" class="navilinks"><a href="anfahrt.html">Anfahrt</a>
</section>
<section id="centralcontainer">
<div class="resize2">
<img src="pizzapic2.png" width="2000" height="1131" border="0" usemap="#map" />
<map name="map">
<area shape="poly" coords="635,311,706,204,879,90,1029,67,1335,157,1447,284,1499,408,1513,564,1502,830,1405,958,1243,1073,1098,1112,906,1081,768,1032,616,859,540,705,531,650,533,561,606,359" href="pizzagenerator.html" />
</map>
</div>
</section>
</section>
<script>
$(function() {
$('.banner').unslider();
});
</script>
</body>
</html>
html,body {height:100%;margin:0%;background:red;}
header{height:10%;width:100%;background:green;border:black;text-align:center;margin:0%;font-family:geneva;}
section{}
nav{}
#underheadersection{position:relative;height:30%;width:100%;background:blue;border:thick black;}
#underheadersectionPic1{height:100%;width:46%;margin-left:2%;margin-right:2%;float:left;background-image:url("picFold/opt111.jpg");background-size:contain;}
#underheadersectionPic2{height:100%;width:46%;margin-left:2%;margin-right:2%;float:left;background-image:url(pic12.jpg);background-size:contain;}
#maincontainer{position:relative;top:0%;left:0%;border:black max-height:60%;width:100%;background:yellow;clear:both;}
#centralcontainer{}
#upleft{position:absolute;top:0%;left:0%;border:black;text-align:center;margin:1% 0% 0% 1%;}
#upright{position:absolute;top:0%;right:0%;border:black;text-align:center;margin:1% 1% 0% 0%;; }
#downleft{position:absolute;bottom:0%;left:0%;border:black;text-align:center;margin:0% 0% 1% 1%;%; }
#downright{position:absolute;bottom:0%;right:0%;border:black;text-align:center;margin:0% 1% 1% 0%;%; }
.navilinks{font-size:130%;font-family:cursive;border:thick black;}
.resize img{max-width:100%; height:auto;}
.resize2 img{position:relative;top:auto;left:25%; width: 50%;height:auto;}
.banner { position:relative; overflow:scroll;background-size:contain; }
.banner li { list-style: none; }
.banner ul li { float: left; }