README

基于Tiny Slider的contao滑块插件。

功能

全局配置
图片和内容滑块的内容元素
Encore Bundle支持
将List Bundle列表显示为滑块
为List Bundle和Reader Bundle捆绑配置元素类型

使用方法

安装

使用composer或contao管理器安装插件

composer require heimrichhannot/contao-tiny-slider-bundle

调用contao安装工具并更新数据库

设置

创建一个Tiny Slider配置（系统 -> Tiny-Slider）。请参考Tiny Slider文档以获取有关不同配置选项的更多信息。
在激活“渲染为Tiny slider”后，在内容元素、读者配置元素或列表配置中选择创建的配置。

作为配置元素类型的使用（列表和读者插件）

此插件附带一个配置元素类型，已为列表和读者插件注册。

将“滑块（Tiny Slider）”作为列表或读者配置元素添加到您的配置中
您定义的模板变量有两个键，html和images。html包含完整的滑块，images仅包含准备好的图片（如果您想定义自己的包装器）。因此，输出滑块的典型模板代码如下

{% if tinySlider.html is defined %}
    {{ tinySlider.html }}
{% endif %}

Twig使用

Tiny slider附带一个tiny_slider_wrapper.html.twig，可以嵌入到您的自定义twig模板中，如下所示

{% set tinySliderConfigId = 1 %}
{% embed '@ContaoTinySlider/tiny_slider_wrapper.html.twig' with {config: tinySliderConfigId, selector: '.list-images', wrapperClass: 'overflow-hidden'} %}
    {% block slides %}
        <div class="image-container" {{ aos.default() }}>
        <ul class="list-images list-unstyled">
            {% for i, singleSRC in multiSRC %}
                <li class="image">
                    {{ singleSRC|image([240,180,'px'],{href : url, lazyload: {class: 'tns-lazy-img', src: 'data-src'}})|raw }}
                </li>
            {% endfor %}
        </ul>
        </div>
    {% endblock %}
{% endembed %}

还有两个twig扩展可用

tiny_slider_wrapper_class

返回tiny slider包装器的CSS类。

{% set tinySliderConfigId = 1 %}
{{ tinySliderConfigId|tiny_slider_wrapper_class}}

tiny_slider_container_attributes

返回包装器内部容器上的tiny slider data-tiny-slider-config属性。参数selector是可选的，应指向滑块包装器容器。

{% set tinySliderConfigId = 1 %}
{{ config|tiny_slider_container_attributes(selector|default('.tiny-slider-container'))|raw }}

自定义过渡效果

为了使用自定义过渡，例如使用animate.css，请从以下效果中选择。

淡入淡出效果

导入animate.css样式表
将tiny slider配置参数Mode设置为gallery
将tiny slider配置参数Intro animation设置为'fadeIn'
将tiny slider配置参数Outro animation设置为'fadeOut'
留空tiny slider配置参数Normal animation

资产

NPM/Yarn包

此插件的资产作为NPM/Yarn包@hundh/contao-tiny-slider-bundle提供。

您可以在src/Resources/npm-package下找到源代码。

已知问题

懒加载

如果您将 tiny-slider 与 https://github.com/heimrichhannot/contao-speed-bundle 及其启用的懒加载组件一起使用，确保在 tiny slider 的配置中也启用了 懒加载，并将 懒加载选择器 的默认值保持为 .tns-lazy-img。

如果您使用必须提供适当懒加载信息的 TwigExtension image，请确保在 data 属性中提供。

{{ singleSRC|image([240,120,'px'],{lazyload: {class: 'tns-lazy-img', src: 'data-src'} }}

heimrichhannot / contao-tiny-slider-bundle

维护者

详细信息