JavaScript Carousel / Slideshow

Bumblebee_3rd · 7. Juni 2018

Hallo, ich habe ein Problem und bisher konnte mir keiner weiterhelfen. Mein Slider geht nicht. Seht ihr evtl den Fehler?

Das Javascript dazu:

Javascript:

var slideIndex = 0;
carousel();

function carousel() {
   var i;
   var x = document.getElementsByClassName("produkt");
   for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
   }
   slideIndex++;
   if (slideIndex > x.length) {slideIndex = 1}
   x[slideIndex-1].style.display = "block";
   setTimeout(carousel, 2000); // Change image every 2 seconds
}

Die HTML dazu:

HTML:

<div class="row">
            <div class="grid full">
                <div class="box no-height">
                
                    <h2>Angebote der Woche</h2>
                    <div class="product-list front">
                        <div class="produkt">
                            <a href="apfel.html">
                            <img src="img/small1.jpg"></a>
                            <p>Äpfel
                            <span class="preis">1,99 € <sup>*</sup></span></p>
                        </div>
                        <div class="produkt">
                            <a href="erdbeeren.html">
                            <img src="img/small2.jpg"></a>
                            <p>Erdbeeren
                            <span class="preis">1,99 € <sup>*</sup></span></p>
                        </div>
                        <div class="produkt">
                            <a href="gurke.html">
                            <img src="img/small3.jpg"></a>
                            <p>Gurken
                            <span class="preis">0,99 € <sup>*</sup></span></p>
                        </div>
                        
                        <div class="produkt">
                            <a href="fleisch.html">
                            <img src="img/small5.jpg"></a>
                            <p>Rind
                            <span class="preis">5,49 € <sup>*</sup></span></p>
                        </div>
                        
                        <div class="produkt">
                            <a href="eier.html">
                            <img src="img/small7.jpg"></a>
                            <p>Eier
                            <span class="preis">2,49 € <sup>*</sup></span></p>
                        </div>
                        <p><small>* alle Preise inkl. 19% gesetzl MwSt.</small></p>
                    </div>
                    <div style="clear:both;"></div>
                </div>
            </div>
        </div>

Alles unterhalb der Überschrift sollte automatisch durchlaufen, macht er aber nicht. Hab jetzt meine Änderungen wieder aus der HTML rausgenommen. Kann mir jemand sagen wie ich das in die HTML schreibe, damit das funktioniert? In die CSS müsste eigentlich nichts rein oder?

Defender1st · 7. Juni 2018

Also, wenn ich deinen Code ins JSFiddle reinwerf geht alles.

https://jsfiddle.net/0rbw2ekn/

DerGoblin2k · 7. Juni 2018

Ohne zu wissen, wie Du das Javascript einbindest, ist es schwer Dir zu helfen. Zeig doch mal bitte das komplette HTML File.

Bumblebee_3rd · 7. Juni 2018

Danke euch Beiden schon mal für eure Mühe.
Hier der (fast) komplette Code:

HTML:

<!DOCTYPE html>
<html>
<head>
    ...
    
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/responsiveslides.min.js"></script>
    <script src="js/scripts.js"></script>
    <script src="js/automatic_slideshow.js"></script>
    
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    
<!-- Facebook API Einbindung-->
    
<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v3.0';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="wrap">
    <header>
        <div class="logo-wrap">
            <div class="logo"><a href="index.html"><img src="img/logo.jpg" alt="Ländliche Produkte"></a></div>
        </div> <!-- / .logo-wrap -->
        <nav class="nav-wrap">
            <ul class="nav">
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="konto.html">Konto</a></li>
                <li><a href="drinks.html">Smoothies</a></li>
                <li><a href="team.html">Wir</a></li>
                <li><a href="warenkorb.html">Warenkorb</a></li>
                <li><a href="shop.html">Shop</a></li>
            </ul>
        </nav> <!-- / .nav-wrap -->
        <div class="header-grafik">
            <ul>
                <li><img src="img/slide1.jpg" alt=""></li>
                <li><img src="img/slide2.jpg" alt=""></li>
                <li><img src="img/slide3.jpg" alt=""></li>
                <li><img src="img/slide4.jpg" alt=""></li>
            </ul>
        </div> <!-- / .header-grafik -->
    </header><!-- / header -->
    
    <section id="content">
        <div class="row">
            <div class="grid full">
                <div class="box white left">
                    <h2>Facebook</h2>
                    <div class="fb-page" data-href="https://www.facebook.com/L%C3%A4ndliche-Produkte-1755041801222661/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/L%C3%A4ndliche-Produkte-1755041801222661/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/L%C3%A4ndliche-Produkte-1755041801222661/">Ländliche Produkte</a></blockquote></div>
                </div>
            </div>
            
            
        </div> <!-- / .row -->
        <!-- More Products -->
        <div class="row">
            <div class="grid full">
                <div class="box no-height">
                
                    <h2>Angebote der Woche</h2>
                    <div class="product-list front">
                        <div class="produkt">
                            <a href="apfel.html">
                            <img src="img/small1.jpg"></a>
                            <p>Äpfel
                            <span class="preis">1,99 € <sup>*</sup></span></p>
                        </div>
                        <div class="produkt">
                            <a href="erdbeeren.html">
                            <img src="img/small2.jpg"></a>
                            <p>Erdbeeren
                            <span class="preis">1,99 € <sup>*</sup></span></p>
                        </div>
                        <div class="produkt">
                            <a href="gurke.html">
                            <img src="img/small3.jpg"></a>
                            <p>Gurken
                            <span class="preis">0,99 € <sup>*</sup></span></p>
                        </div>
                        
                        <div class="produkt">
                            <a href="fleisch.html">
                            <img src="img/small5.jpg"></a>
                            <p>Rind
                            <span class="preis">5,49 € <sup>*</sup></span></p>
                        </div>
                        
                        <div class="produkt">
                            <a href="eier.html">
                            <img src="img/small7.jpg"></a>
                            <p>Eier
                            <span class="preis">2,49 € <sup>*</sup></span></p>
                        </div>
                        <p><small>* alle Preise inkl. 19% gesetzl MwSt.</small></p>
                    </div>
                    <div style="clear:both;"></div>
                </div>
            </div>
        </div>
        <!-- End More Products -->

        <div class="row">
            <div class="grid full">
                <div class="box right white">
                    <h2>Kontakt</h2>
                    <p>Ihr könnt dieses Formular nutzen, um uns eine Nachricht zu schicken.</p>
                    <form name="kontakt" id="kontakt" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
                        <p><label for="name">Name:</label>
                        <input type="text" name="name" id="name" placeholder="Max Muster" class="txt" tabindex="1" required></p>
                        <p><label for="email">E-Mail:</label>
                        <input type="email" name="email" id="email" placeholder="Max@muster.de" class="txt" tabindex="2" required></p>
                        <p><label for="tel">Telefon:</label>
                        <input type="tel" name="tel" id="tel" placeholder="0123/456" class="txt" tabindex="3" required></p>
                        <p><label for="message">Nachricht:</label>
                        <textarea name="message" id="message" class="txtarea" tabindex="4" required></textarea></p>
                        <p><label for="submit"></label>
                        <button type="submit" name="submit" id="submit" tabindex="5">Absenden</button></p>
                    </form>
                </div>
            </div>
        </div> <!-- / .row -->
                
    </section> <!-- / #content -->
    <footer class="row">
        <div class="footer-wrap grid full">
            <b><a href="impressum.html" title="Impressum">Impressum</a> &middot; <a href="datenschutz.html" title="Datenschutz">Datenschutz</a> &middot; <a href="agb.html" title="AGB">AGB</a> &middot; <a href="widerruf.html" title="Widerruf">Widerruf</a></b>
        </div> <!-- / .footer-wrap -->
    </footer> <!-- / footer -->
</div><!-- / .wrap -->

</body>
</html>

Die Produkte sind ja in einer Gridbox und darin sollten sie sich auch bewegen. Die Javascript-Datei heißt automatic_slideshow.js

DerGoblin2k · 7. Juni 2018

Lade die Scripte mal vor dem schließenden body Tag. Ich wette, das Javascript wird schon aufgerufen, obwohl der DOM noch nicht fertig ist.

Bumblebee_3rd · 7. Juni 2018

Top! Du hattest recht

Wie heißt denn der Befehl, dass meine Bilder zentriert in der Box angezeigt werden? Also das die Slideshow genau mittig ist?

Kannst du mir vielleicht bei meinem Facebook Plugin auch noch helfen?

zwantE · 9. Juni 2018

Ergänzung (9. Juni 2018)

oder noch besser du erweiterst deine class .produkt um text-align:center;

Bumblebee_3rd · 14. Juni 2018

Vielen Dank

Suche

JavaScript Carousel / Slideshow

Bumblebee_3rd

Ensign

Defender1st

Lt. Junior Grade

DerGoblin2k

Lt. Junior Grade

Bumblebee_3rd

Ensign

DerGoblin2k

Lt. Junior Grade

Bumblebee_3rd

Ensign

zwantE

Cadet 2nd Year

Bumblebee_3rd

Ensign

Ähnliche Themen