Question

首先我要说：

多么神奇的软件！

精心设计，实施和记录，以及许多很酷的功能。

坦克很多就是把它作为开源来源！

现在我已经为＆＃34; Gambio GX＆＃34; -shopsystem（一个非常高级osCommerce分支）做了一个滑块实现。

您可以在此处查看：[{3}}

我使用了所有图像转换（377）和字幕动画（438），每张幻灯片都随机选择...

（导致改变幻灯片的163,618（！）种不同方式......）

根据商店数据库中的幻灯片信息，使用PHP动态生成滑块....

由于内联样式在这样的环境中非常不灵活，我已将样式移到样式表中。

它已经像魅力一样，差不多......

我遇到的两个问题：

标题区域有时会被剪裁（见本图中的第一个标题：http://marmorkamin-shop.de/Test/）

只有项目符号浏览器中的项目符号1,2和3处于活动状态，其他项目不响应。

任何想法可能是什么原因？

再次为这个伟大的软件做好准备！

编辑：

标题区域有时会被剪裁（请参阅第1个标题图片：截图）

同时为此找到了一个快速而肮脏的解决方案：

为标题元素分配clip: auto !important; CSS direktice ...

但我相信必须有更好的解决方案： - ）

Answer 1

Re：字幕被剪掉了请始终指定标题的宽度和高度。您可以在css文件中指定宽度和高度，

.slide_caption_1 {
    left: 100px; top: 200px; width: 110px; height: 29px;
}
.slide_caption_2 {
    left: 150px; top: 250px; width: 110px; height: 29px;
}
.slide_caption_3 {
    left: 200px; top: 300px; width: 110px; height: 29px;
}

您也可以指定内联样式，

<div class="jssor_slide_caption slide_caption_1" data-u="caption" t="*" style="width: 110px; height: 30px;"></div>

Re：子弹问题未指定子弹导航器的'mousedown'的样式。给定导航器项原型的类是'jssor_navigator_entry'，'active'状态的类名是'jssor_navigator_entryav'，'mousedown'状态的类名是'jssor_navigator_entrydn' 所以，请在slideshow.css文件中添加以下css代码。

.jssor_navigator_entrydn {
    padding: 5px 0px 0px; border: currentColor; border-image: none; width: 27px; height: 24px; text-align: center; color: white !important; font-weight: bold !important; text-decoration: none; margin-right: 0px; float: left; display: block; position: relative !important; z-index: 9; cursor: pointer; background-color: rgb(50, 22, 1);
}

Answer 2

以下是一个以简单方式定义子弹导航器的示例

<script>
    var jssor_options={
      ...
      $BulletNavigatorOptions: {                        //[Optional] Options to specify and enable navigator or not
        ...
        $SpacingX: 5,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
        ...
      }
      ...
    };
<script>

<!-- Bullet Navigator Begin -->
<style>
    .the_navigator{
        position: absolute;
        bottom: 0px;
    }

    .the_navigator_item, .the_navigator_itemdn, .the_navigator_itemav {
        position: absolute;
        width: 27px;
        height: 24px;
        line-height: 24px;
        color: #fff;
        font-weight: bold;
        background-color: #321601;
        text-align: center;
        cursor: pointer;
    }

    .the_navigator_item:hover, .the_navigator_itemav {
        background-color: #d1013f;
    }
</style>
<!-- bullet navigator container -->
<div class="the_navigator" data-u="navigator">
    <!-- bullet navigator item prototype -->
    <div class="the_navigator_item" data-u="prototype"><numbertemplate></numbertemplate></div>
</div>
<!-- Bullet Navigator End -->

2关于JSSOR-Slider的问题

2 个答案: