djangocms-flexslider 1.0.0

依赖性

• django>；=1.8
• django cms>；=3.2

安装

要安装：

pip install djangocms-flexslider

然后将djangocms flexslider添加到已安装的应用程序：

INSTALLED_APPS = [
    ...
    'djangocms_flexslider',
    ...
]

如果您还没有使用django-filer、easy-thumbnails和djangocms-text-ckeditor，那么这些也需要添加到您安装的应用程序中：

INSTALLED_APPS = [
    ...
    'djangocms_text_ckeditor',
    'easy_thumbnails',
    'filer',
    ...
]

并运行迁移：

./manage.py migrate

包假定jquery已经添加到站点。因此，如果您尚未使用，请添加模板/base.html:

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

配置

默认情况下，flexslider js和css是从下面的cdn加载的。如果您想覆盖它，可以在settings.py文件中添加以下更新的url来完成。这是可选的。

DJANGOCMS_FLEXSLIDER={'JS_URL':'https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js','CSS_URL':'https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css'}

使用量

滑块插件被添加到页面，设置滑块的配置。这些设置允许您添加一个carousel缩略图滑块如果您愿意，您还可以为carousel和滑块传递json配置。

他们的站点上有许多FlexSlider examples，或者您可以查看完整的FlexSlider properties。配置json对象是可选的，因此您没有义务提供它。下面提供了一个使用旋转木马进行配置的简单示例。

设置完滑块后，将通过向滑块添加子幻灯片插件来添加幻灯片。每张幻灯片都必须有一个图像（我对图像使用了django-filer），并且可以选择有明确的高度和/或宽度、标题、url链接或页面链接。

示例json配置

滑块：

{animation:"slide",smoothHeight:true,controlNav:false,animationLoop:false,slideshow:false,sync:"#carousel"}

旋转木马：

{animation:"slide",controlNav:false,animationLoop:false,slideshow:false,itemWidth:210,itemMargin:5,asNavFor:'#slider'}