问题：

FlexSlider 2 w/缩略图滑块-主图像的Prev Next无效

萧明贤

2023-03-14

我正在使用FlexSlider2和缩略图滑块。然而，问题是mainimage没有响应。如果我按下Next/Prev按钮，它不会滑动/淡入到Next/Prev图像。即使我点击其中一个缩略图，它也不会改变。但是缩略图滑块的Prev/Next按钮工作很好。我就是找不到问题所在。我没有碰FlexSlider.js，而是碰了FlexSlider.css。我改变了一些东西来摆脱bordershadow等等。但我也使用了未接触的FlexSlider.css，但它也不起作用。代码如下：

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="css/flexslider.css" type="text/css">
  <link rel="stylesheet" href="css/default.css" type="text/css">
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.flexslider.js"></script>
  <script type="text/javascript">
    $(window).load(function() {
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        directionNav: false,
        slideshow: false,
        touch: true,
        itemWidth: 160,
        itemMargin: 3,
        asNavFor: '#slider'
      });

      $('#slider').flexslider({
        start: function(slider) {
          $('html').removeClass('no-js');
          slider.removeClass('loading');
        },
        animation: "fade",
        slideshow: false,
        directionNav: false,
        controlNav: true,
        touch: true,
        useCSS: false,
        slideshowSpeed: 3000,
        animationSpeed: 300,
        sync: "#carousel"

      });
    });
  </script>
  <script>
    function launchFullScreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
      $('.slide_text').css('bottom', '5%');
      $('.slide_text').css('zoom', '1.5');
      $('.flex-fullscreen-launch').css('visibility', 'hidden');
      $('.flex-fullscreen-cancel').css('visibility', 'visible');
      $('.flex-fullscreen-cancel').css('top', '20%');
      $('.flex-play-button').css('top', '20%');
      $('.flex-pause-button').css('top', '20%');
      $('.flex-next-button').css('bottom', '30%');
      $('.flex-prev-button').css('bottom', '30%');
      $('.flex-control-thumbs').css('position', 'static');
    }

    function cancelFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      $('.slide_text').css('bottom', '2%');
      $('.slide_text').css('zoom', '1');
      $('.flex-fullscreen-launch').css('visibility', 'visible');
      $('.flex-fullscreen-cancel').css('visibility', 'hidden');
      $('.flex-fullscreen-launch').css('top', '6%');
      $('.flex-play-button').css('top', '6%');
      $('.flex-pause-button').css('top', '6%');
      $('.flex-next-button').css('bottom', '54%');
      $('.flex-prev-button').css('bottom', '54%');
      $('.flex-control-thumbs').css('position', 'absolute');
    }
  </script>
</head>

<body>
  <div id="container">
    <div id="div_left">
      <input class="button active" type="button" value="Button 1" />
      <input class="button" type="button" value="Button 2" />
      <input class="button" type="button" value="Button 3" />
      <div id="slider" class="flexslider">
        <ul class="slides">
          <li>
            <img alt="asdf" src="img/1.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/2.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/3.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/4.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/5.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/6.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/7.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/8.jpg" />
          </li>
        </ul>
        <a class="flex-fullscreen-launch" href="#" onclick="launchFullScreen(document.getElementById('slider'))"></a>
        <a class="flex-fullscreen-cancel" href="#" onclick="cancelFullScreen(document.getElementById('slider'))"></a>
        <a class="flex-play-button" href="#" onclick="$('#carousel').flexslider('play'); $('.flex-play-button').css('visibility', 'hidden'); $('.flex-pause-button').css('visibility', 'visible');"></a>
        <a class="flex-pause-button" href="#" onclick="$('#carousel').flexslider('pause'); $('.flex-pause-button').css('visibility', 'hidden'); $('.flex-play-button').css('visibility', 'visible');"></a>
        <a class="flex-next-button" href="#" onclick="$('#slider').flexslider('next');"></a>
        <a class="flex-prev-button" href="#" onclick="$('#slider').flexslider('prev');"></a>
      </div>
      <div id="carousel" class="flexslider">
        <ul class="slides">
          <li>
            <img alt="asdf" src="img/1-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/2-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/3-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/4-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/5-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/6-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/7-small.jpg" />
          </li>
          <li>
            <img alt="asdf" src="img/8-small.jpg" />
          </li>
        </ul>
        <a class="flex-next-button" href="#" onclick="$('#carousel').flexslider('next');"></a>
        <a class="flex-prev-button" href="#" onclick="$('#carousel').flexslider('prev');"></a>
      </div>
      </section>

    </div>
  </div>
</body>

</html>

共有1个答案

徐高懿

2023-03-14

在这个jsFiddle中，它起作用

JsFiddle

Hope this helps

类似资料：

滑块图像id

我有一个小问题，一个小jQuery脚本，我的幻灯片图像。该脚本本身工作得非常好，其目的是在图像之间滚动，实际上是“淡入淡出”，这是一部经典之作。问题是，如果我想将它用于页面上的另一个块，那么它将不再正常工作。。问题当然出在id上，但无法解决。这是脚本：有什么想法吗？谢谢大家：）
jQuery / Ajax：图像滑块

问题内容：有一行可以一次只容纳三个图像，但是我在服务器中有几个图像，我想全部取走。所以在这种情况下，我需要图像滑块。让说，有10幅图像，例如和行和它包含只有三个非常久远。我想要的是？单击slider_button时，图像应沿按钮方向一一向前。假设，如果我点击则应该行，而不是。因此，有一幅图像被转发到左方向，而另一幅新图像被提取为请给我一些提示。我想从服务器获取图像会更有用，对吗？问题答案：
使jfilechooser显示图像缩略图

问题内容：我想创建一个带有缩略图的图像文件视图，所以我将FileView子类化，并在创建方法中进行了一些缩放，以便显示缩略图图像。但是，总体效果是，该小部件在打开目录并显示缩略图之前需要花费一些时间。在下面的createImageIcon（）中，我需要两次调用new ImageIcon（）两次，分别使用图像文件路径和下一次调整大小的图像作为构造函数参数。我认为这是使小部件变慢的原因。有没有更
裁剪缩略图特色图像

出于某种原因，当我使用WordPress 3.6.1媒体库GUI功能裁剪缩略图时，它似乎不会影响公文包页面上显示的缩略图？即使缩略图在后端显示为裁剪，但在公文包页面上仍然显示不正确？下面是公文包页面的代码摘录。正如您所看到的，它使用中等大小的缩略图。 functions.php我有以下几点：为什么我不能通过WordPress GUI将上传到媒体库的肖像图像裁剪成横向格式？
滑块内的背景图像

上面有一个包含滑块的内容框。内容框的纵横比为1/.52。我的目标是在每张幻灯片上有一个不同的背景图像，内容覆盖在图像上。背景图像还必须通过web访问，所以设置背景图像css属性似乎不起作用。#LargeCarouselContent中的每个div都是一个幻灯片。当前的解决方案不起作用，因为canvas1.jpeg覆盖所有幻灯片。我被难住了，有什么主意吗？
jQuery图像滑块-控件

我需要帮助。我有一个简单的jQuery滑块，它工作得很好，但我无法弄清楚这种情况：例如，如果我有4个图像，当我到达第四个图像时，我希望能够通过单击'Next'按钮从第四个图像转到第一个图像。我怎么能那样做？ null null

FlexSlider 2 w/缩略图滑块-主图像的Prev Next无效

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档