Startseite Skripte für das Wintersemester 2018/19 Webdesign Responsive Images, Transitions & Javascript FlexSlider Bildershow

FlexSlider Bildershow

flexslider

Sehr praktisches Plugin für Bilder-Gallerien, das auch auf mobilen Endgeräten funktioniert und dort sogar „Swipe-Event“ unterstützt …

Online-Demo

Hier die Demo dazu und das ganze Paket zum Download

HTML

<head>
    <!-- das Flexslider-CSS -->
    <link rel="stylesheet" href="c/flexslider.css">

    <!-- eigenes CSS -->
    <link rel="stylesheet" href="c/style.css">
</head>

<body>
    <!--
        ACHTUNG: Die Namen "flexslider" und "slides" müssen so bleiben
        sonst funktioniert das Plugin nicht!
    -->
    <div class="flexslider">
        <ul class="slides">
            <li>
                <figure>
                    <img src="p/Blue-flower.jpg" alt="Blue-flower">
                    <figcaption>Bilddetails</figcaption>
                </figure>
            </li>

            <!-- weitere Listen-Elemente -->
        </ul>
    </div>

    <!-- jQuery, hier ältere Version, sonst geht der Flexslider nicht! -->
    <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>

    <!-- FlexSlider Plugin -->
    <script defer src="js/jquery.flexslider-min.js"></script>

    <!-- hier die Angaben zur Slideshow-Animation -->
    <script type="text/javascript">
        $(window).load(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                // Schleife läuft endlos
                animationLoop: true,
                // Befindet sich der Cursor über den Bilder, hält die Animation an
                pauseOnHover: true,
                // das jeweilige Bild bleibt 3 sek (3000 Mili-Sekunden) stehen
                slideshowSpeed: 3000
            });
        });
    </script>

</body>
</html>

→ Begriff suchen