Hilfe, wie bekomme ich den Unslider zum Laufen?

dn3d_fanboy · 10.05.2013

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:

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>

und auch das CSS:

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;
}

Wäre echt genial, wenn mir jemand weiterhelfen könnte.

Ich danke euch jedenfalls im Voraus.

cebito · 10.05.2013

AW: Hilfe, wie bekomme ich den Unslider zum Laufen?

Dein Script

PHP:

<script>         
   $(function() {     
      $('.banner').unslider(); 
   });     
</script>

kennt .banner noch gar nicht! Binde es am Ende der Seite ein oder setze es in die $document.ready(function)
Das kannst übrigens in deinen Browsertools sehen. Ansonsten wäre ein Link zur Seite sowieso besser, da muss man im Zweifelsfall niix nachbauen.

Abgesehen davon, werbung, banner oder ähnliche Bezeichnungen würd ich meiden, das gibt meist Probleme mit Blockern...

dn3d_fanboy · 10.05.2013

AW: Hilfe, wie bekomme ich den Unslider zum Laufen?

Danke cebito, aber wie setze ich es in die #document.ready(function)? Wenn ich das Script am Ende einbinde, tut sich leider auch nichts.

cebito · 10.05.2013

AW: Hilfe, wie bekomme ich den Unslider zum Laufen?

dn3d_fanboy schrieb:
Wenn ich das Script am Ende einbinde, tut sich leider auch nichts.

Was sagt denn die Fehlerkonsole?

Pixelaner · 10.05.2013

AW: Hilfe, wie bekomme ich den Unslider zum Laufen?

aber wie setze ich es in die #document.ready(function)?

Code:

[COLOR=#000000][COLOR=#007700]<[/COLOR][COLOR=#0000BB]script[/COLOR][COLOR=#007700]>         
  $(document).ready(function(){   
    $([/COLOR][COLOR=#DD0000]'.banner'[/COLOR][COLOR=#007700]).[/COLOR][COLOR=#0000BB]unslider[/COLOR][COLOR=#007700]();[/COLOR][/COLOR]
[COLOR=#000000][COLOR=#007700][COLOR=#000000][COLOR=#007700]  });
[/COLOR][/COLOR][/COLOR][COLOR=#0000BB]</script>[/COLOR] [/COLOR]

dn3d_fanboy · 18.05.2013

AW: Hilfe, wie bekomme ich den Unslider zum Laufen?

Hallo nochmal,
also ich habe es immer noch nicht zum Laufen bekommen und aus dem, was die Fehlerkonsole des Firebugs mir sagt, werde ich ebenfalls nicht schlau.

Ich habe die Seite mal hochgeladen, wenn sich jemand die mal anschauen will:

Danke für eure Hilfe.

Duddle · 18.05.2013

AW: Hilfe, wie bekomme ich den Unslider zum Laufen?

Firebug schrieb:
$(".slideshow").unslider is not a function
[Break on this error] $('.slideshow').unslider();\n

Ergo ist das PlugIn nicht korrekt geladen, ergo ist entweder jQuery oder das Script selbst nicht korrekt initialisiert. Der HTML-Quellcode verweist auf "js/unslider.min.js", aber das ist .

Du kannst mich auch mal direkt anschreiben (ICQ 86198212), dann lösen wir das zusammen.

Edit: jetzt funktioniert es hier in einem uralten Firefox und Chrome

Duddle

Pixelaner · 18.05.2013

AW: Hilfe, wie bekomme ich den Unslider zum Laufen?

Was mir noch aufgefallen ist, ist folgendes. In Zeile 31 hast du einen HTML Fehler:

Code:

<div="slider-left"></div>

tausch das mal aus gegen

Code:

<div id="slider-left"></div>

Das wird dir auch die ein oder andere Sucherei ersparen.

dn3d_fanboy · 19.05.2013

AW: Hilfe, wie bekomme ich den Unslider zum Laufen?

Duddle und Pixelaner,
ich danke euch recht herzlich. Das waren die entscheidenden Hinweise und es läuft nun alles Die Größe der einzelnen Klassen, die im Slider gezeigt werden musste noch angepasst werden, aber jetzt funktioniert alles einwandfrei. Jetzt werde ich noch das dargestellte HTML in den Slidern etwas bearbeiten und dann sollte es das gewesen sein.

Danke nochmal, manchmal bin ich einfach etwas "betriebsblind" und erkenne diese eigentlich kleinen Fehler im Markup nicht....

Pixelaner · 19.05.2013

AW: Hilfe, wie bekomme ich den Unslider zum Laufen?

Einen schönen Sonntag Abend

ach das kommt das ein oder andere Mal vor, dass man den Wald vor lauter Bäumen nicht mehr sieht. Mich freuts das du nun endlich weiter basteln und somit deine Aufgabe erledigen kannst.

Viel Spaß damit und ein schönes restliches Pfingsweekend!

MfG
Pixelaner

dn3d_fanboy · 19.05.2013

AW: Hilfe, wie bekomme ich den Unslider zum Laufen?

Danke, wünsche ich dir auch.