【问题标题】:flexslider with centered current image具有居中当前图像的 flexslider
【发布时间】:2013-08-20 16:41:54
【问题描述】:

我正在尝试构建一个 Flexslider 轮播 - 它有多个图像,但当前图像居中,任一侧的下一个/上一个图像都在屏幕外 - 就像这个网站 http://www.ncad.ie/

到目前为止,我只有一张图片: http://jsfiddle.net/Y3kx5/

看看这个声称可以解决它的其他问题,但我无法让它工作: FlexSlider: Center current image

曾尝试过其他的 flexslider JS,例如:

$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
itemWidth: 800,
minItems: 3,
maxItems: 3
});

但屏幕上显示 3 张图像 - 而我只希望当前一张完全显示在屏幕上,而下一张/上一张仅显示窗口允许的数量。

提前致谢 .ben.

【问题讨论】:

    标签: jquery flexslider


    【解决方案1】:

    其实刚刚解决了:-)

    这是最后一段: http://jsfiddle.net/Y3kx5/2/

    用 CSS 完成:

    .container {overflow: hidden; width: 100%}
    .flexslider {max-width: 800px; width: 800px; margin: 0 auto}
    .content {background: #f2f2f2; max-width: 800px; display: block; margin: 0 auto}
    .flex-viewport {overflow: visible !important}
    

    【讨论】:

      【解决方案2】:

      您可以添加一些 CSS 规则来更改滑块的外观并将导航器移动到滑块图像的边界之外。

      代码:

      .content {
          background: #f2f2f2;
          max-width: 800px;
          display: block;
          margin: 0 auto
      }
      .flex-direction-nav .flex-next {
          right: 0 !important;
          margin-right: -30px;
          opacity: 1 !important;
      }
      .flex-direction-nav .flex-prev {
          left: 0 !important;
          opacity: 1 !important;
          margin-left: -30px;
      }
      .flexslider {
          width: 90%;
          margin: 0 auto;
      }
      

      演示:http://jsfiddle.net/IrvinDominin/899SD/

      【讨论】:

      • 嗨 - 感谢您的回答 - 但我想要的是在当前图像旁边显示下一个/上一个图像(不是箭头),但只显示屏幕上的空间 -如:ncad.ie
      • 不知道这个插件能不能用,我看看。最终你可以转移到另一个插件吗?
      • 可能会移动到另一个,但 Flexslider 在滑动/响应大小等方面是最好的,并且有一个 Drupal 模块。就解决方案而言,Flexslider 的作者在这里提到了一个我尝试过的解决方案,它有点工作,只是它会创建水平滚动:github.com/woothemes/FlexSlider/issues/212
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-04-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-06-30
      相关资源
      最近更新 更多