Liebe Leser,
Wenn dies Ihr erster Besuch hier ist, lesen Sie bitte zuerst die Hilfe - Häufig gestellte Fragen durch. Sie müssen sich vermutlich registrieren, bevor Sie Beiträge verfassen können. Klicken Sie rechts auf 'Jetzt registrieren.', um den Registrierungsprozess zu starten.
Ergebnis 1 bis 3 von 3
  1. #1
    Registriert seit
    04.2011
    Beiträge
    2

    jCarousel mit 2 Slidern aber einer Navigation

    Hallo,
    ich hoffe jemand kennt den jQuery Slider jCarousel (http://sorgalla.com/jcarousel/) und kann mir bei meinem Problem weiterhelfen.

    Ich hatte vor 2 - eigentlich voneinander unabhängige Slider durch eine Navigation zu steuern.
    Der Sinn ist dabei, einen Slider für Bilder und einen für den dazugehörenden Text, gleichzeitig mit den selben Buttons zu navigieren.

    Ich komme leider nicht weiter und frage deswegen euch um Rat.
    Vielen Dank.

  2. #2
    Registriert seit
    04.2011
    Beiträge
    4
    Hi, habe selber noch nicht damit gearbeitet, aber was hast du denn schon?
    Wie genau soll der Text aussehen? (Direkt unterm Bild...?)

    Habe hier mal ein Beispiel der Seite:

    HTML-Code:
    <div style="position: relative; display: block;" class="jcarousel-container jcarousel-container-horizontal"><div style="position: relative;" class="jcarousel-clip jcarousel-clip-horizontal"><ul style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: -340px; width: 950px;" id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
        <li jcarouselindex="1" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" height="75" width="75"></li>
        <li jcarouselindex="2" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" height="75" width="75"></li>
        <li jcarouselindex="3" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" height="75" width="75"></li>
        <li jcarouselindex="4" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" height="75" width="75"></li>
        <li jcarouselindex="5" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" height="75" width="75"></li>
        <li jcarouselindex="6" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" height="75" width="75"></li>
        <li jcarouselindex="7" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-7 jcarousel-item-7-horizontal"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" height="75" width="75"></li>
        <li jcarouselindex="8" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" height="75" width="75"></li>
    
        <li jcarouselindex="9" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-9 jcarousel-item-9-horizontal"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" height="75" width="75"></li>
        <li jcarouselindex="10" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-10 jcarousel-item-10-horizontal"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" height="75" width="75"></li>
      </ul></div><div disabled="false" style="display: block;" class="jcarousel-prev jcarousel-prev-horizontal"></div><div disabled="false" style="display: block;" class="jcarousel-next jcarousel-next-horizontal"></div></div>
    http://sorgalla.com/projects/jcarous..._circular.html

    Kannst du dort nicht einfach hinter den IMG-Tags dein Text (bzw. eine weitere Divbox) hinzufügen?


    Hier mal ein Beispiel:
    HTML-Code:
      <ul id="mycarousel" class="jcarousel-skin-tango">
        <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /> Dies ist mein 1. Bild </li>
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /> Dies ist mein 2. Bild </li>
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /> Dies ist mein 3. Bild </li>
        <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /> Dies ist mein 4. Bild </li>
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /> Dies ist mein 5. Bild </li>
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /> Dies ist mein 6. Bild </li>
    
      </ul>
    Nun werden die Beschreibungen unter jedem Bild angezeigt...
    Geändert von Mainclain (25.04.2011 um 17:47 Uhr)

  3. #3
    Registriert seit
    04.2011
    Beiträge
    2
    Danke für deine Beispiele...
    würde auch super funktionieren, das Problem dabei ist nur, dass der Bilder-Slider und der Text-Slider diagonal versetzt sind.

    Ungefähr so:



    Und ich hab leider keine Ahnung, wie ich das anstellen soll :/

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  
12
Content Management by InterRed