flexslider

How to reinitialize flexslider for a dynamic loading

▼魔方 西西 提交于 2019-12-21 12:01:08
问题 I got a problem with flexslider, I need to download my picture in base64 from a webservice. After the download is complete, I make an .append() to add my slide... But sometimes, everything is added perfectly but the slider doesn't reload correctly So I get code like this : instead of code like this : How can I reinitiate my slider in this case ? 回答1: Solution found ! Just add this line of code to remove the old slider ref if exists $('#flexslider').removeData("flexslider"); 回答2: When the

FlexSlider: Center current image

一个人想着一个人 提交于 2019-12-21 06:18:10
问题 I switched from using the bjqs slider (it's responsiveness was subpar) to using the popular FlexSlider. I had modified the bjqs slider to display the "current" image centered on the screen, with the previous and next images displayed (partially) before and after the current image. You can see my implementation using the bjqs slider here to get an idea for what I'm after. Now with the FlexSlider, I can't quite figure out a way to do this. The images are floated left, so the "current" image

FlexSlider: Center current image

跟風遠走 提交于 2019-12-21 06:17:06
问题 I switched from using the bjqs slider (it's responsiveness was subpar) to using the popular FlexSlider. I had modified the bjqs slider to display the "current" image centered on the screen, with the previous and next images displayed (partially) before and after the current image. You can see my implementation using the bjqs slider here to get an idea for what I'm after. Now with the FlexSlider, I can't quite figure out a way to do this. The images are floated left, so the "current" image

OSX inertia scrolling causing mousewheel.js to register multiple mousewheel events with the slightest scroll motion

泄露秘密 提交于 2019-12-21 05:21:27
问题 I have a pretty standard Flexslider instance I'm working on. Flexslider incorporates well with the jquery.mousewheel.js plugin, allowing slides to move on mousewheel events. However, Mac OSX and others employ 'intertia' to scrolling effects, making it virtually impossible to scroll only one slide left or right. The general effect is that even the slightest scroll motion in these situations triggers multiple mousewheel events and scrolls the slider multiple images left or right. Obviously,

Webkit border radius combined with css3 translate3D bleeding

微笑、不失礼 提交于 2019-12-20 12:38:42
问题 I'm struggling with a problem on Webkit based browsers where if I add a border radius to a div and then apply -moz-translate3d to a ul inside (this is because on the original example I'm using flexslider slideshow), the border radius does not apply and bleeds through the container. To clearly understand what I'm talking about here's a fiddle example about the problem. If I remove the translate3d property, the border radius is applied. HTML: <div class="wrapper"> <ul> <li> <div class="caption"

Pause Flexslider when overlay is open

我只是一个虾纸丫 提交于 2019-12-19 03:37:18
问题 We are currently working on a project that utilizes the Flexslider plugin (recently acquired by Woo Themes). We have multiple pop ups on this page and we want the slider to pause when the pop ups are active and resume when the pop ups close. The pause only works the first go 'round and the resuming the slider does not work. Below is the code we are using for the slider. I have tried switching out the "start" function with all available calls except the "end" call. $w('#slider-frame')

Why is width: 100% not working on div {display: table-cell}?

爷,独闯天下 提交于 2019-12-18 10:58:11
问题 I'm trying to vertically and horizontally center some content overlaying an image slide (flexslider). There were some similar questions to this one, but I couldn't find a satisfactory solution that applied directly to my specific problem. Because of the limitations of FlexSlider, I cannot use position: absolute; on the img tag in my implementation. I almost have workaround below working. The only problem is I cannot get the width & height declarations to work on inner-wrapper div with the

jQuery FlexSlider hide Slider but retain visibility of Manual Controls

删除回忆录丶 提交于 2019-12-13 05:49:13
问题 I'm effectively trying to have the FlexSlider be hidden, except for some controlling thumbnails. When the thumbnails are clicked, the FlexSlider fades in and slides to the appropriate corresponding slide. The main problem I'm having is that when the FlexSlider is hidden, the controls are hidden as well. Is there a way to separate the two, so that I can have the controls (represented by a series of dots in the FlexSlider demo) by permanently visible? I could then attach an onClick / fadeIn

Flexslider is not working in IE

怎甘沉沦 提交于 2019-12-13 02:51:15
问题 I am trying to implement the basic flexslider on our website. It works well with chrome, Firefox and safari. But in all versions of IE, it just blows out the entire width and height of the page. Here is the link. Please advise 回答1: I tried this one it work for me. Add following line in the header tags to force IE to render in the latest document mode. <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 回答2: Had similar problem in ie9 - solved by setting fixed width for div, containing

Slider does not work in the jQuery Tabs

孤者浪人 提交于 2019-12-12 15:08:31
问题 I want to use 2 jQuery Flexsliders in the jQuery tabs. The slider on the tab 1 works fine, but it does not work in the tab 2. Here is the full demo of the code on JSFiddle: Demo: http://jsfiddle.net/vH5DT/ jQuery Code: $(document).ready(function() { $('#tabvanilla').tabs({ hide: "heightFade", show: "heightFade", collapsible: true }); $('#flexslider1').flexslider({ animation: "slide", slideshow: true, controlsContainer: ".flex-container1", directionNav: true, controlNav: true }); $('