【jQuery】背景画像とCSS3を使用してズーム効果でスライドショーを作成する Zoom Slider

jQuery

zoomslider

January 6, 2017

Zoom Sliderは背景画像とCSS3を使用してズーム効果でスライドショーを作成する

Dependencies

<head>
    <link rel="stylesheet" type="text/css" href="css/zoomslider.css" />
    <script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
</head>
<body> 
    ...
    <div data-zs-src='["img1.jpg", "img2.jpg", "img3.jpg"]'>
        <p>Sample inner content</p>
    </div>
    ...
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.zoomslider.min.js"></script>
</body>
Data attribute Default value
data-zs-src null
data-zs-speed 8000
data-zs-switchSpeed 800
data-zs-interval 4500
data-zs-autoplay true
data-zs-bullets true
data-zs-overlay ‘plain’

Latest Posts

Related Posts