Get started with jquery.flipster CDN

MIT licensed

JQuery Flipster is a lightweight plugin for creating horizontally or vertically flipping image galleries.

Tags:
  • coverflow
  • jquery
  • carousel
  • flipster
  • jquery-plugin
  • ecosystem:jquery

Stable version

Copied!

How to start using jquery.flipster CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jquery.flipster CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.min.css" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.cdnhub.io/jquery.flipster/1.1.6/jquery.flipster.min.js" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" referrerpolicy="no-referrer"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="container">
        <ul id="flipster">
            <li><img src="image1.jpg" alt="Image 1" /></li>
            <li><img src="image2.jpg" alt="Image 2" /></li>
            <li><img src="image3.jpg" alt="Image 3" /></li>
            <li><img src="image4.jpg" alt="Image 4" /></li>
        </ul>
    </div>

    <script>
        $(function() {
            $("#flipster").flipster({
                width: 300,
                height: 400,
                animation: "fade",
                autoPlay: 3000
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!

All versions