福托拉马 4.滑动 1 张以上的图像

Fotorama 4. Slide more than 1 image

本文关键字:图像 滑动      更新时间:2023-09-26

我正在使用Fotorama.jsfotorama.io

如何使用fotorama.js在视图中添加多个图像?我想用这个插件制作轮播。

    <div class="fotorama">
       <div data-img="images/main/slider/big.jpg">
                <div class="slide-text">
                    <div class="slide-header">
                       Heading
                    </div>
                    <div class="slide-description">
                       Description
                    </div>
                </div>
            </div>
       <div data-img="images/main/slider/big2.jpg">
                <div class="slide-text">
                    <div class="slide-header">
                       Heading
                    </div>
                    <div class="slide-description">
                       Description
                    </div>
                </div>
            </div>
    </div>

https://i.stack.imgur.com/U2zrh.png

尝试下载最新版本的fotorama并检查css和js的路径,就像它在 fotorama.io 上声明的那样:

<!-- 1. Link to jQuery (1.8 or later), -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- 32 KB -->
<!-- fotorama.css & fotorama.js. -->
<link  href="http://fotorama.s3.amazonaws.com/4.4.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://fotorama.s3.amazonaws.com/4.4.4/fotorama.js"></script> <!-- 13 KB -->

因为你的例子对我来说非常有效:例子