Image Carousel

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个选项；

下面的效果示意的设置是：

• 通过 Bulk Image Upload 上传了8张图片，图片的尺寸大小是一致的
• Picture Size设置为 Auto
• Hover Type设置为 Lift Up
• Auto Play / Show Navigation / Image lightbox设置为 Yes
• Maximum Columns设置为 3
• Column Spacing设置为 15
• Scroll Items设置为 1
• Mouse Scroll / Border设置为 No

适用：Avada5.2.2