Aktives Mitglied
Hallo Leute,
ich hab mal wieder ein kleines Problemchen. Und zwar habe ich mir den Unslider (siehe hier: http://unslider.com heruntergeladen und versucht in meine Seite einzubauen.
Leider funktioniert das nicht wie erhofft, denn der Slider funktioniert nicht.
Veilleicht kann mir jemand helfen und mir erklären, wo ich was falsch gemacht habe.
Hier habe ich mal das Markup für euch:
und auch das CSS:
Wäre echt genial, wenn mir jemand weiterhelfen könnte.
Ich danke euch jedenfalls im Voraus.
ich hab mal wieder ein kleines Problemchen. Und zwar habe ich mir den Unslider (siehe hier: http://unslider.com heruntergeladen und versucht in meine Seite einzubauen.
Leider funktioniert das nicht wie erhofft, denn der Slider funktioniert nicht.
Veilleicht kann mir jemand helfen und mir erklären, wo ich was falsch gemacht habe.
Hier habe ich mal das Markup für euch:
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="de-de" />
<meta name="Author" content="" />
<meta name="generator" content="" />
<meta name="Robots" content="index, follow" />
<meta name="Googlebot" content="index, follow" />
<meta name="Revisit-after" content="5" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" charset="utf-8" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/unslider.min.js"></script>
</head>
<body>
<script>
$(function() {
$('.banner').unslider();
});
</script>
<div id="header-full">
<div id="header"></div>
</div>
<div id="slider-full">
<div id="slider">
<div="slider-left"></div>
<div id="slider-right">
<div class="banner">
<ul>
<li class="product1">This is a slide.</li>
<li class="product2">This is another slide.</li>
</ul>
</div>
</div>
</div>
</div>
<div id="trennlinie2" class="clearfix"></div>
<div="wrapper">
</div>
<div id="footer-full">
<div id="footer">
</div>
</div>
</body>
</html>
Code:
/* --|-----------------------------------------------------------------------
# #
-----|-------------------------------------------------------------------- */
@charset "utf-8";
/* --| simple CSS Reset |------------------------ */
* {
padding: 0;
margin: 0;
border: none;
outline: none;
list-style: none;
}
html, body {
min-width: 100px;
min-height: 100%;
}
body {
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
background: #f7f7f7 url(../images/body_bg.png);
}
/* --| Header |------------------------------- */
#header-full {
width: 100%;
height: 70px;
background: #fff url(../images/trennlinie.png);
}
#header {
width: 960px;
height: 70px;
background: url(../images/logo.png) no-repeat;
margin: 0 auto;
}
/* --| Slider |--------------------------- */
#slider-full {
width: 100%;
height: 350px;
background: #1a5074;
}
#slider {
width: 960px;
height: 350px;
background: #1a5074 url(../images/slider.jpg) no-repeat;
margin: 0 auto;}
#trennlinie2 {
width: 100%;
height: 2px;
background: #f7f7f7 url(../images/trennlinie2.png);
}
#slider-left {
width: 400px;
height: 350px;
float: left;
}
#slider-right {
width: 560px;
height: 350px;
float: right;
}
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }
.product1 {background: url(../images/produkt1.png);}
.product2 {background: url(../images/produkt2.png);}
/* --| Navigation |--------------------------- */
#nav {
width: 570px;
height: 40px;
}
#nav li {
height: 30px;
display: block;
padding-top: 10px;
float: left;
}
#nav a {
color: #a40903;
font: 18px Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 10px 15px;
}
#nav a:hover {
color: #171717;
}
/* --| Wrapper |------------------------------- */
#wrapper {
width: 960px;
margin: 0 auto;
}
/* --| Main |------------------------------- */
#content {}
/* --| Sidebar |------------------------------- */
/* --| Footer |------------------------------- */
#footer-full {
width: 100%;
height: 98px;
background: #000 url(../images/footer_bg.jpg);
margin-top: 20px;
}
#footer {
width: 960px;
height: 98px;
margin: 0 auto;
}
/* --| Clearfix |------------------------------- */
.clearfix {
clear: both;
}
Ich danke euch jedenfalls im Voraus.