标签: flexslider

我正在使用flexslider进行一些图像旋转,现在需要使用此幻灯片实现Popup Gallery,即,当用户点击滑块内的活动幻灯片时,想要在灯箱中显示为图库.

所以我尝试合并'magnificPopup',它有效,但问题是它抓住幻灯片的所有实例,即如果我在滑块中有2个图像,我将在弹出库中获得4个,即,magnificpopup获取所有实例包括'克隆',那么如何实现这个问题,有没有其他方法,或插件或回调函数,我可以使用？下面是我试过的代码,都是基本的实现

Flex Sldier:

$('.slideTwo').flexslider({
    animation: "slide",
    controlNav: true,
    directionNav: false,
    animationLoop: true,
    slideshow: false
});

MagnificPopup:

$('.popup-link').magnificPopup({
    type: 'image',
    gallery:{enabled:true}
});

HTML:

<div class="slideTwo" id="slideTwo">
    <ul class="slides">
        <li>
            <a class="popup-link" href="img/room1.jpg"><img src="img/room1.jpg" alt="">
                <span>East Wall</span>
            </a>
        </li>
        <li>
            <a class="popup-link"href="img/room21.jpg"><img src="img/room21.jpg" alt="">
                <span>West Wall</span>
            </a>
        </li>
    </ul>
</div>

我正在构建一个使用flexslider的网站,但我想实现一些URL哈希导航.基于URL的哈希,我计划获取我想要显示的幻灯片的索引,并且我最接近的是通过查看手动导航的代码,其中被点击的元素的索引等于索引的滑动:

slider.controlNav.live(eventType, function(event) {
   event.preventDefault();
   var $this = $(this),
   target = slider.controlNav.index($this);

   if (!$this.hasClass(namespace + 'active')) {
      (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
      slider.flexAnimate(target, vars.pauseOnAction);
    }
});

所以我尝试调整原理并将其放在Flexslider的start属性中:

$('.flexslider').flexslider({   
     start: function(slider) {
         var target = 2; // Set to test integer

          (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
          slider.flexAnimate(target);
     }
});

根据URL中的哈希获取相应的整数应该不是问题,但我似乎无法获得我需要的测试整数的幻灯片.

有没有人对URL哈希和Flexslider有任何经验？

jQuery FlexSlider在这里引起水平滚动条:http://abhinavsood.com/labs/grab/ 我试过overflow-x: hiddenflex-container但它似乎没有解决它.

任何人都可以看看并建议修复？

我试图让Flexslider完成一个完整的循环,然后一旦它回到第一张幻灯片就停止或​​暂停.到目前为止,这是我的代码:

$(window).load(function(){
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: true, 
        slideshowSpeed: 5000,
        pauseOnHover: true,
        start: function(slider){
            $('body').removeClass('loading');
        }   
    });
});

实际上，这只是从对Flexslider延迟加载的回答之后开始的，这里我使用的是下面粘贴的代码。我想更改它，以便仅在真正需要时才加载图像。

我在之前和之后尝试了其他Flexslider属性：但是它们在第一张幻灯片上造成了延迟？请给我一些帮助。

$('#slider').flexslider({
start: function (slider) {
   // lazy load
   $(slider).find("img.lazy").each(function () {
      var src = $(this).attr("data-src");
      $(this).attr("src", src).removeAttr("data-src");
   });
 }
});

我有一个全宽度的FlexSlider,在每个幻灯片中都有一个图像和一些HTML内容.

<li>
  <img src="http://placehold.it/350x150">
  <div class="box"></div>
</li>

但由于某种原因,HTML内容仅在幻灯片动画之后出现.

这是一个JSFiddle:http://jsfiddle.net/39wPU/1/

我认为它可能与div上的overflow属性"flex-viewport"有关.如果你禁用它,问题就会消失(但会出现另一个问题 - 即有一个非常大的水平溢出).

无论何时放置溢出,问题都会返回:隐藏在任何包含元素上.

我在这里错过了什么？

更新:似乎问题只发生在Chrome中.Safari和Firefox都很好.

嗨,我正在尝试将Flexslider用于我的Bigcommerce网站,该网站适用于Chrome,但不适用于Safari或Firefox 27.0.1.它只是将所有图像显示在彼此之上,没有滑动.

我试过这个解决方案:

https://github.com/woothemes/FlexSlider/issues/958

但不起作用.

任何线索将不胜感激.

我在网上到处找，Flexslider 有一个众所周知的问题，无论是滑块还是轮播，当它到达滑块中的最后一个项目时，它会飞回第一个项目，而不是保持无限循环顺畅我不能相信没有人有解决方案，这是我正在使用的 flexSlider 代码：

$(document).ready(function() {
    $(window).load(function() {
        $('#carousel-two').flexslider({
            animation : "slide",
            controlNav : false,
            animationLoop : true,
            slideshow : true,
            itemWidth : 234,
            itemMargin : 20,
            minItems : 3,
            maxItems : 5
            //asNavFor : '.flexslider'
        });
    });
});

无论我做什么都行不通。当它到达最后一个项目时，它不会通过无限循环保持动画流畅。有没有人有办法解决吗？

谢谢

只是想知道是否可以将 Magnific pop-up 与滑块（例如 flexslider 或 slick）同步，以便当您更改 Magnific pop-up 上的幻灯片时，背景中的滑块也会发生变化。

编辑

$('.slick-slider').magnificPopup({
    delegate: '.slides:not(.slick-cloned) a',
    type: 'image',
    mainClass: 'mfp-fade',
    fixedContentPos: false,
    removalDelay: 350,
    pauseOnHover: false,
    gallery:{
        enabled: true,
        tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
    },
    callbacks: {
        beforeClose: function() {
            $('.slick-slider').slick('slickGoTo', parseInt(this.index - 1));

           // works better with the code bellow but sometimes gets stuck between 2 slides 
           $('.slick-slider').slick('slickGoTo', parseInt(this.index));

        }
    }
});

我有一个简单的bootstrap网格定义:jsFiddle

问题出在bootstrap中,我们定义网格就好了

<div class="row">
    <div class="col-md-4">
    ...

但是在flexslider2中我们需要包含li,例如

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>

但我希望保留使用自举网格,因为它具有响应性和位置更容易控制.那么,有可能保留我的网格但是应用flexslide吗？

即在摇篮中,我希望在开始时隐藏4和5.