Image Carousel Element如何设置？- Avada主题建站

更新日期: 2017-11-01

Image Carousel，旋转木马，跑马灯。比如我们需要循环滚动的展示一些客户案例、循环滚动的展示证书之类的图片，可以参考类似下面动图所示的效果：

编辑界面

设置选项

Add / Edit Items，用于新增或编辑Image，在新增/编辑界面中，有4个选项：
- Image，用于上传要展示的图片
- Image Website Link，给图片加上链接，可以链接到网页，也可以链接到图片，假如你的网站是 https://www.domain.com，如果你想在这里添加自己的about us页面的链接( /about-us/ )，你可以填相对地址 /about-us/ , 也可以填绝对地址 https://www.domian.com/about-us/ ，填写绝对地址的时候，务必不要忘了前面的 http:// 或者 https:// ，否则链接就打不开。其他可以填Link的地方也类似，要注意这个小事情
- Link Target，设置链接是在当前窗口打开，还是弹出新窗口(也就是新标签页)中打开
- Image Alt Text，图片的alt标签设置
Bulk Image Upload，如果要加好多张图片，不用在Add中一个一个加，直接使用这个设置项，批量上传。直接 Select Images -> Upload Files 的时候选择多张照片。如果图片本身已经是在上传好了的，那么在 Media Library 中进行多张的选择，选择方法是：按住Ctrl键+鼠标点选（如果要选更多，可以试试按住Shift键+鼠标点选）
Picture Size，Fixed或者Auto，建议对于使用再这里的图片的大小进行统一
- Fixed是根据固定了高度和宽度，图片都会被调整成统一的宽度和高度。其中每个图片所在的那部分区域（加了border容易看的出来）的宽度是根据Image Carousel所在的Column的宽度、Maximum Columns 设置的值、Column Spacing的值进行计算出来的；
- Auto，会根据上传的图片的保持高度和宽度的比例进行调整；
Hover Type，有3种Hover效果，Zoom In、Zoom Out、Lift Up，或者不使用交互效果，和在Image Frame中的hover设置类似
Autoplay，设置是否会自动播放
Maximum Columns，设置一行中展示几个图片
Column Spacing，每个图片之间的间隔距离
Scroll Items，每次滚动的数量，默认是设置了几个Columns，就一次过，直接翻到下一批
Show Navigation，设置左右的两个箭头，可以手动点击箭头进行滚动
Mouse Scroll，设置是否开启鼠标拖拽着滚动的效果，我一般不开启这项
Border，是否给图片加边框
Image lightbox，点击图片是否展示弹出窗口，如果给图片设置的是网页链接，那网页也是在弹出窗口中展示
Element Visibility，默认不修改，此选项和适配移动端有关系，可参考《设置移动端适配》；
CSS Class / CSS ID，默认不需填写内容，需要针对此内容进行单独的样式调整时才考虑使用这2个选项；