Ergebnis 1 bis 3 von 3

Thema: Flexslider soll nicht <li> sondern <div class="slide_ele"> verarbeiten

  1. #1
    Neuer Benutzer
    Registriert seit
    04.12.2013
    Beiträge
    10

    Flexslider soll nicht <li> sondern <div class="slide_ele"> verarbeiten

    Hallo Leute,

    wie meine Überschrift schon sagt, soll der Flexslider (V.2.2.2.) <div>-Boxen verarbeiten und nicht Listenelemente in denen die Bilder stecken. Leider finde ich im CODE des Flexsliders nicht die Stelle die aussagt, dass ein <li> element genutzt werden soll. Was offensichtlich ist: dem "aktiven" <li>-Element wird die Klasse "flex-active-slide" gegeben. das scheint an dieser Stelle zu passieren:

    Code:
    slider.slides.removeClass(namespace + "active-slide").eq(target).addClass(namespace + "active-slide");
    also scheint das Element (Die Bezeichnung / die Variable) "slider.slides" damit zu tun haben.

    Kann mir von euch jemand helfen die Stelle zu finden in der festgelegt wird, dass <li> benutzt wird?

    Vielen Dank,
    ich wünsche euch einen schönen Sonntag,
    Grille.

  2. #2
    Neuer Benutzer
    Registriert seit
    04.12.2013
    Beiträge
    10
    Ich habe jetzt diese Zeile bei den Einstellungen gefunden:

    Code:
    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
    und habe die so geändert:

    Code:
    selector: ".slides > div.slider_ele",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
    meine HTML sieht so aus:

    Code:
    <section class="slider">
            <div class="flexslider">
              <div class="slides">
                <div class="slider_ele"><img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /></div>
      	    	<div class="slider_ele"><img src="images/kitchen_adventurer_lemon.jpg" /></div>
      	    	<div class="slider_ele"><img src="images/kitchen_adventurer_donut.jpg" /></div>
      	    	<div class="slider_ele"><img src="images/kitchen_adventurer_caramel.jpg" /></div>
              </div>
            </div>
          </section>
    vorher sah die so aus:

    Code:
          <section class="slider">
            <div class="flexslider">
              <ul class="slides">
                <li><img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /></li>
      	    <li><img src="images/kitchen_adventurer_lemon.jpg" /></li>
      	    <li><img src="images/kitchen_adventurer_donut.jpg" /></li>
      	    <li><img src="images/kitchen_adventurer_caramel.jpg" /></li>
              </ul>
            </div>
          </section>
    leider werden die Bilder alle untereinander gestapelt und es funktioniert nicht .... ich glaube aber, dass dort der "Hase im Pfeffer liegt"

  3. #3
    Neuer Benutzer
    Registriert seit
    04.12.2013
    Beiträge
    10
    Also der Flexslider scheint schon so angelegt zu sein, dass man auch div-elemente sliden kassen kann:

    und richtig: der Schalter liegt dort beim "selector: '.slides > div'," nur dass man besser diesen "Schalter" in der HTML-Datei bedient, und nicht im CODE der Flexslider-js-Datei.

    wenn ich diesen HTML-Code benutze funktioniert das mit dem sliden von DIV-Boxen:

    Code:
    <!DOCTYPE html>
    <html class="no-js" lang="en">
    <head>
    	<meta content="charset=utf-8">
    	<title>FlexSlider 2 DIV-Version</title>
    </head>
    <body class="loading">
    
      <div id="container" class="cf">
    	<div id="main" role="main">
    		
          <section class="slider">
            <div class="flexslider">
              <div class="slides">
                <div><img src="bilder/kitchen_adventurer_cheesecake_brownie.jpg" /></div>
      	    	<div><img src="bilder/kitchen_adventurer_lemon.jpg" /></div>
      	    	<div><img src="bilder/kitchen_adventurer_donut.jpg" /></div>
      	    	<div><img src="bilder/kitchen_adventurer_caramel.jpg" /></div>
              </div>
            </div>
          </section>
    
        </div>
      
      </div>
      
      <!-- jQuery -->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
      
      <!-- FlexSlider -->
      <script defer src="jquery.flexslider.js"></script>
      
      <script type="text/javascript">
        $(window).load(function(){
          $('.flexslider').flexslider({
            animation: 'slide',
            controlsContainer: '.flexslider',
            selector: '.slides > div',
            useCSS: false
          });
        });
      </script>
     
    </body>
    </html>

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •