Flexslider上一张和下一张幻灯片的位置

TJ15

我正在使用基本的flexslider,我想显示上一个和下一个,所以如果显示幻灯片2,则您将在左侧看到幻灯片1的一部分,在右边看到幻灯片3的一部分。

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
.container {overflow: hidden; width: 100%}
.flexslider {max-width: 500px; width: 500px; margin: 0 auto}
.content {background: #f2f2f2; max-width: 500px; display: block; margin: 0 auto}
.flex-viewport {overflow: visible !important}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<body>
<div class="container">
<div class="flexslider">
    <ul class="slides">
        <li><img src="785.jpg" /></li>
        <li><img src="785.jpg" /></li>
        <li><img src="785.jpg" /></li>
        <li><img src="785.jpg" /></li>
    </ul>
 </div>
</div>


<script src="jquery.flexslider.js"></script>
<script>
jQuery(document).ready(function($) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
});
</script>

</body>
</html>

在此处输入图片说明

我将图像缩小到70%,并将其放置在页面中间。我想在主图片的两边都可以看到下一张和上一张幻灯片,但是不知道在哪里进行适当的更改(我假设在js文件中)。我以为这是一个边距问题,但是将样式设置为0并没有区别。有没有人这样做并可以提供一些建议?

风险突破者

更新您所需要的

我的天啊!我现在了解您的需求!一直以来,我一直以为您在谈论上一个/下一个箭头时,我看到您希望查看其他上/下一个幻灯片。

只是一个例子:

.container {overflow: hidden; width: 100%}
.flexslider {margin: 0 auto}
.flex-viewport {overflow: visible !important}

查看以下内容:

也:

   $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false //if you don't want it to slide auto
        });

默认是淡入淡出,因此使用default(fade)不能实现

小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

光滑-带有上一张/下一张幻灯片的名称的箭头

来自分类Dev

隐藏/禁用最后一张幻灯片上的“下一张”按钮和第一张幻灯片上的“上一张”按钮

来自分类Dev

BxSlider:最后一张幻灯片上的“下一张”->跳回到第一张幻灯片?

来自分类Dev

Flexslider-通过点击进入下一张幻灯片

来自分类Dev

Bootstrap Carousel 下一张幻灯片添加到上一张幻灯片的下方

来自分类Dev

删除上一张幻灯片上的课程

来自分类Dev

Flickity到达下一张或上一张幻灯片时的事件

来自分类Dev

滑动滑块YouTube在最后一张和第一张幻灯片上出现故障

来自分类Dev

当ViewPager移至下一张幻灯片时,上一张幻灯片应为每一步降低不透明度值

来自分类Dev

是否可以从当前幻灯片转到下一张幻灯片?

来自分类Dev

使用循环插件在下一张幻灯片上暂停youtube视频

来自分类Dev

Flexslider:单击自定义按钮后移至下一张幻灯片(有延迟)

来自分类Dev

上一张幻灯片和“自动播放Jquery”滑块,

来自分类Dev

如何将flexslider移动到最后一张幻灯片

来自分类Dev

第一张幻灯片后的字幕未显示为flexslider

来自分类Dev

全高滑块跳过一张幻灯片

来自分类Dev

我想做一张幻灯片div

来自分类Dev

bxSlider最后一张幻灯片为空

来自分类Dev

bxslider移动第一张幻灯片

来自分类Dev

在第一张幻灯片上禁用上一个控件,在最后一张幻灯片上禁用下一个控件

来自分类Dev

Bootstrap3轮播-随机挑选下一张幻灯片

来自分类Dev

在Powerpoint编辑模式下禁用滚动到下一张幻灯片

来自分类Dev

jQuery滑块不适用于下一张幻灯片(.next()错误)

来自分类Dev

如何在笔记中指出应该显示下一张幻灯片/动画?

来自分类Dev

假点击到光滑轮播中的下一张幻灯片

来自分类Dev

如何使用带有Presenter Console的LibreOffice显示笔记和下一张幻灯片?

来自分类Dev

禁用和启用轮播图标不适用于第一张和最后一张幻灯片之间的幻灯片 - Bootstrap

来自分类Dev

选择单选按钮上的 Bootstrap 轮播无法在下一张幻灯片上工作,因为它在第一张幻灯片上工作正常

来自分类Dev

离子5幻灯片ionSlideDidChange不要求最后一张幻灯片

Related 相关文章

  1. 1

    光滑-带有上一张/下一张幻灯片的名称的箭头

  2. 2

    隐藏/禁用最后一张幻灯片上的“下一张”按钮和第一张幻灯片上的“上一张”按钮

  3. 3

    BxSlider:最后一张幻灯片上的“下一张”->跳回到第一张幻灯片?

  4. 4

    Flexslider-通过点击进入下一张幻灯片

  5. 5

    Bootstrap Carousel 下一张幻灯片添加到上一张幻灯片的下方

  6. 6

    删除上一张幻灯片上的课程

  7. 7

    Flickity到达下一张或上一张幻灯片时的事件

  8. 8

    滑动滑块YouTube在最后一张和第一张幻灯片上出现故障

  9. 9

    当ViewPager移至下一张幻灯片时,上一张幻灯片应为每一步降低不透明度值

  10. 10

    是否可以从当前幻灯片转到下一张幻灯片?

  11. 11

    使用循环插件在下一张幻灯片上暂停youtube视频

  12. 12

    Flexslider:单击自定义按钮后移至下一张幻灯片(有延迟)

  13. 13

    上一张幻灯片和“自动播放Jquery”滑块,

  14. 14

    如何将flexslider移动到最后一张幻灯片

  15. 15

    第一张幻灯片后的字幕未显示为flexslider

  16. 16

    全高滑块跳过一张幻灯片

  17. 17

    我想做一张幻灯片div

  18. 18

    bxSlider最后一张幻灯片为空

  19. 19

    bxslider移动第一张幻灯片

  20. 20

    在第一张幻灯片上禁用上一个控件,在最后一张幻灯片上禁用下一个控件

  21. 21

    Bootstrap3轮播-随机挑选下一张幻灯片

  22. 22

    在Powerpoint编辑模式下禁用滚动到下一张幻灯片

  23. 23

    jQuery滑块不适用于下一张幻灯片(.next()错误)

  24. 24

    如何在笔记中指出应该显示下一张幻灯片/动画?

  25. 25

    假点击到光滑轮播中的下一张幻灯片

  26. 26

    如何使用带有Presenter Console的LibreOffice显示笔记和下一张幻灯片?

  27. 27

    禁用和启用轮播图标不适用于第一张和最后一张幻灯片之间的幻灯片 - Bootstrap

  28. 28

    选择单选按钮上的 Bootstrap 轮播无法在下一张幻灯片上工作,因为它在第一张幻灯片上工作正常

  29. 29

    离子5幻灯片ionSlideDidChange不要求最后一张幻灯片

热门标签

归档