Get started with jquery-nivoslider CDN

MIT licensed

Free, popular jQuery Nivo Slider: customizable image plugin.

Tags:
  • slider
  • jquery
  • image
  • slideshow

Stable version

Copied!

How to start using jquery-nivoslider CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jquery-nivoslider CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nivo-slider/3.2/css/nivo-slider.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/jquery-nivoslider/3.2/jquery.nivo.slider.pack.min.js"></script>
    <style>
        #slider {
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="slider">
        <ul class="slides">
            <li>
                <img src="image1.jpg" alt="Image 1">
                <h2>Slide 1</h2>
                <p>Description for Slide 1</p>
            </li>
            <li>
                <img src="image2.jpg" alt="Image 2">
                <h2>Slide 2</h2>
                <p>Description for Slide 2</p>
            </li>
            <li>
                <img src="image3.jpg" alt="Image 3">
                <h2>Slide 3</h2>
                <p>Description for Slide 3</p>
            </li>
        </ul>
    </div>
    <script>
        $(document).ready(function() {
            $('#slider').nivoSlider({
                effect: 'fade',
                slices: 15,
                boxCols: 8,
                boxRows: 4,
                animSpeed: 500,
                pauseOnHover: true,
                pauseOnAction: true,
                prevText: 'Prev',
                nextText: 'Next',
                manualAdvance: false,
                controlNav: true,
                controlNavThumbs: false
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions