如何在RoyalSlider中设置中心图像宽度

How to set center image width in RoyalSlider?

本文关键字：图像 设置中心 RoyalSlider      更新时间：2023-09-26

我有一个页面，其中有一个RoyalSlider，处于"附近可见图像"模式。

我想将中心图像的大小更改为1050x514，以再现此页面上看到的滑块。

以下是我对滑块的设置：

var si = $('#gallery-1').royalSlider({
   addActiveClass: true,
   imageScaleMode: 'fill',
   arrowsNav: false,
   controlNavigation: 'bullets',
   autoScaleSlider: true, 
   autoScaleSliderWidth: 940,     
   autoScaleSliderHeight: 460,
   loop: true,
   fadeinLoadedSlide: false,
   globalCaption: true,
   keyboardNavEnabled: true,
   globalCaptionInside: false,
   slidesSpacing:0,
   controlsInside : false,
   visibleNearby: {
     enabled: true,
     centerArea: 0.5708,
     center: true,
     breakpoint: 704,
     breakpointCenterArea: 1,
     navigateByCenterClick: true
   }
 }).data('royalSlider');

我似乎找不到一种方法来获得每个分辨率的固定宽度。

我使用的是RoyalSlider，因为它有"附近可见"模式，拖动滚动和可以显示视频。我愿意尝试具有相同功能的不同脚本或wordpress插件（甚至是高级插件），因此我愿意接受建议。

您可以使用类.rsActiveSlide来定位中心图像。

即：

.visibleNearby .rsActiveSlide img{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}
相关文章：