jssor.slider.mini 参数调整,间隔时间,切换方式

配置参数

Jssor Slider的可用配置参数如下:

参数是否必须默认值描述
$FillMode可选0slide中填充图片的模式:0表示stretch(拉伸),1表示contain(保持比例并全部放入slide中),2表示cover(保持比例边覆盖整个slide),4表示实际尺寸,5表示包含一个大图和一个实际尺寸的小图。
$LazyLoading可选1图片懒加载模式,默认图片在slide到来时才加载,可以设置一个整数(1,2,3等)表示距离该图片多少张图片间隔时就加载图片。
$StartIndex可选0初始化时显示的图片的序号。
$AutoPlay可选false是否自动播放,对于slideshow,该参数必须设置为true。
$AutoPlaySteps可选1自动播放的步长,可以为正数或负数。
$Loop可选1旋转木马是否无限循环。0表示停止,1表示循环,2表示rewind
$Idle可选3000自动播放模式下从前一张图片停止到下一张图片播放的时间间隔,单位毫秒。
$PauseOnHover可选1是否自动播放模式下鼠标经过图片时停止播放。0表示不暂停,1表示在桌面设备中暂停,2表示在移动触摸设置中暂停,3表示在桌面和移动设置中都暂停,4表示在桌面设备中冻结(freeze),8表示在移动设置中冻结,12表示在桌面和移动设置中都冻结。
$ArrowKeyNavigation可选1点击箭头导航按钮时slide移动的步长。
$SlideDuration可选500指定从左到右的动画的持续时间,单位毫秒。
$SlideEasing可选$JssorEasing$.$EaseOutQuad指定从左到右的easing动画。
$MinDragOffsetToSlide可选20触发slide的最小拖拽距离。
$SlideWidth可选 每一个slide的宽度,单位像素。默认是'slides'容器的宽度。
$SlideHeight可选 每一个slide的高度,单位像素。默认是'slides'容器的高度。
$SlideSpacing可选0每一个slide之间的距离,单位像素。
$Cols可选1在'slides'容器中显示的slide数量。如果值大于1slideshow将不可用。
$Align可选0在'slides'容器中来移动位置对齐当前的slide,
$UISearchMode可选1The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$PlayOrientation可选1slide的方向。1表示水平,2表示垂直。
$DragOrientation可选1拖动slide的方向。0表示不拖动,1表示水平,2表示垂直,3表示两个方向。
{$BulletNavigatorOptions}可选null指定是否启用导航按钮。
{$ArrowNavigatorOptions}可选null指定是否启用箭头导航按钮。
{$ThumbnailNavigatorOptions}可选null指定是否启用缩略图导航。
{$SlideshowOptions}可选null指定是否启用slideshow。
{$CaptionSliderOptions}可选null指定是否启用动画标题。

{$BulletNavigatorOptions}的可用配置参数如下:

参数是否必须默认值描述
$Class必须$JssorBulletNavigator$navigator实例的class类。
$ChanceToShow必须20: Never, 1: Mouse Over, 2: Always
$ActionMode可选10: None, 1: act by click, 2: act by mouse hover, 3: both
$AutoCenter可选0自动在父元素内居中。0: None, 1: Horizontal, 2: Vertical, 3: Both
$Steps可选1移动到下一个slide的步长。
$Rows可选1圆点导航的行数。
$SpacingX可选10每一个项之间的水平距离,单位像素。
$SpacingY可选10每一个项之间的垂直距离,单位像素。
$Orientation可选1navigator的方向,1表示水平,2表示垂直。
$Scale可选true当slider缩放时是否缩放圆点导航按钮。

{$ArrowNavigatorOptions}的可用配置参数如下:

参数是否必须默认值描述
$Class必须$JssorArrowNavigator$创建箭头导航实例的class类。
$ChanceToShow必须20: Never, 1: Mouse Over, 2: Always
$AutoCenter可选0箭头自动在父容器中居中。0: None, 1: Horizontal, 2: Vertical, 3: Both
$Steps可选1移动到下一个slide的步长。
$Scale可选true当slider缩放时是否缩放箭头导航按钮。

{$ThumbnailNavigatorOptions}的可用配置参数如下:

参数是否必须默认值描述
$Class必须$JssorThumbnailNavigator$创建缩略图导航实例的class类。
$ChanceToShow必须20: Never, 1: Mouse Over, 2: Always
$ActionMode可选10: None, 1: act by click, 2: act by mouse hover, 3: both
$Loop可选1允许旋转木马无限循环。0: stop, 1: loop, 2 rewind
$AutoCenter可选3缩略图自动在父容器中居中。0: None, 1: Horizontal, 2: Vertical, 3: Both
$Cols可选1显示缩略图的行数。
Rows可选1显示缩略图的列数。
$SpacingX可选0缩略图之间的水平间距。
$SpacingY可选0缩略图之间的垂直间距。
$ParkingPosition可选0The offset position to park thumbnail
$Orientation可选1缩略图的布局方向,1表示水平,2表示垂直。
$Scale可选true当slider缩放时是否缩放缩略图。
$NoDrag可选false是否禁止拖动。

{$SlideshowOptions}的可用配置参数如下:

参数是否必须默认值描述
$Class必须$JssorSlideshowRunner$创建slideshow实例的class类。
$Transitions必须 一个slideshow过渡动画的数组。
$TransitionsOrder可选0slideshow过渡动画的方式。1: Sequence, 0: Random。
$ShowLink可选falseWhether to bring slide link on top of the slider when slideshow is running

{$SlideshowOptions}的可用配置参数如下:

参数是否必须默认值描述
$Class必须$JssorCaptionSlider$创建动画标题实例的class类。
$CaptionTransitions必须 标题过渡动画的数组。
$PlayInMode可选1标题进入的方式。0: None (no play), 1: Chain (goes after main slide), 3: Chain Flatten (goes after main slide and flatten all caption animations)
$PlayOutMode可选1标题离开的方式。0: None (no play), 1: Chain (goes before main slide), 3: Chain Flatten (goes before main slide and flatten all caption animations)

更多的jssor内容:https://www.jssor.com/development/index.html 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: `.slider:before` 是一个 CSS 伪元素选择器,它选择了一个元素的前一个伪元素。在这种情况下,`.slider:before` 可以用于创建一个滑块的样式。例如,在一个滑块控件中,使用 `.slider:before` 可以设置滑块的起始值。具体实现方式可能会因为具体的 HTML 和 CSS 代码而有所不同。 ### 回答2: .slider:before 是 CSS 伪元素之一,它通常用于在轮播图或幻灯片中添加箭头或其他装饰性图标。在使用 .slider:before 时,我们需要先在 CSS 中通过 .slider 类来定义一个基本的容器,然后使用 .slider:before 选择器来添加伪元素。 例如,我们可以通过以下 CSS 代码来实现一个简单的箭头装饰效果: .slider { position: relative; width: 300px; height: 200px; } .slider:before { content: ''; position: absolute; top: 50%; left: 10px; transform: translate(0, -50%); width: 20px; height: 20px; background-color: black; /* 在这里可以添加其他样式,如 border-radius、box-shadow 等 */ } 在上面的代码中,.slider 类设置了容器的基本样式,包括宽度、高度和定位方式。而 .slider:before 则定义了伪元素的样式,包括定位、大小、背景颜色等。通过设置 top 和 left 属性,可以将箭头装饰元素定位在容器的左边。而 transform 属性可以用来垂直居中箭头元素。 需要注意的是,.slider:before 是一个行内元素,可以通过设置 content 属性来为其添加内容,也可以使用 background-image 属性来添加背景图像。此外,我们还可以在样式中为 .slider:before 添加其他样式,如 border-radius、box-shadow 等,以实现更多的装饰效果。 总之,.slider:before 是 CSS 中的一个伪元素,通过它可以为容器添加箭头或其他装饰性图标,并通过设置样式属性来控制其位置、大小和外观。 ### 回答3: .slider:before是一种CSS伪元素,它通常用于在轮播图(slider)的前面添加一些视觉效果或装饰性元素。 一般情况下,.slider:before会被用来创建一个在轮播图前面的额外元素。可以通过设置其content属性来插入文本内容,也可以通过设置其background属性来插入背景图片。通常。slider:before会设置绝对定位,同时通过设置top、left、right和bottom等属性来控制其位置。 例如,假设我们有一个带有class为slider的轮播图容器,可以通过如下的CSS代码为它添加.slider:before样式: .slider:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /*设置其他样式属性,比如背景图片、颜色、透明度等*/ } 在上述的例子中,.slider:before会创建一个覆盖整个轮播图容器的绝对定位的元素。我们可以在其中设置background属性,为其添加背景图片,或者设置其他样式属性,比如颜色、透明度等,来达到我们想要的效果。 总结来说,.slider:before是一种CSS伪元素,用于在轮播图前面插入额外的视觉效果或装饰性元素。可以通过设置其content、background以及其他样式属性来实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值