Antworten auf deine Fragen:
Neues Thema erstellen

Hilfe, wie bekomme ich den Unslider zum Laufen?

dn3d_fanboy

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:
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

undefined

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...
 
Zuletzt bearbeitet:

dn3d_fanboy

Aktives Mitglied

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.
 

Pixelaner

Der Pixelaner

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

Aktives Mitglied

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

Posting-Frequenz: 14µHz

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
 
Zuletzt bearbeitet:

Pixelaner

Der Pixelaner

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

Aktives Mitglied

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

Der Pixelaner

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.526
Neuestes Mitglied
Winfriedtesmer
Oben