Get started with jquery.caroufredsel CDN

(MIT OR GPL-2.0) licensed

JQuery.carouFredSel: Responsive, touch-friendly slideshow plugin with multiple effects and customizable options.

Tags:
  • carousel
  • responsive
  • jquery

Stable version

Copied!

How to start using jquery.caroufredsel CDN


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/caroufredsel/6.2.1/caroufredsel.min.css" referrerpolicy="no-referrer" />
    <script src="https://cdn.cdnhub.io/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.cdnhub.io/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>
    <style>
        #carousel { width: 500px; height: 300px; }
        #carousel img { width: 100%; }
    </style>
</head>
<body>
    <div id="carousel">
        <ul>
            <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() {
            $('#carousel').carouFredSel({
                width: '100%',
                height: '100%',
                circular: true,
                auto: { play: 2000, pauseOnHover: true },
                scroll: { items: 1 }
            });
        });
    </script>
</body>
</html>
Copied!

All versions