flexslider

Fixed size of Flexslider

亡梦爱人 提交于 2019-12-03 09:35:08
问题 I'm using Flexslider to pull product images of varying sizes from an API. I've been throwing them into Flexslider's <ul> , but these varying image sizes don't play well. Flexslider nicely animates when images have different heights, but I want to have Flexslider have a fixed height and width to fit in my layout. I've tried putting the whole thing into a fixed-size <div> , but Flexslider ignores it completely and overflows into the rest of the layout. Is there some way to resize images to fit

AngularJS error - [$compile:multidir] Multiple directives error

匿名 (未验证) 提交于 2019-12-03 00:46:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I use these packages: An angularjs modal from angular-ui package: http://angular-ui.github.io/bootstrap/#/modal And Angular-flexslider from here: https://github.com/EnthusiasticCode/angular-flexslider Every plugin works good when they are in separate pages. but when i use them in one page, angular-flexslider causes an error: Error: [$compile:multidir] Multiple directives [flexSlider, slide] asking for transclusion on: <div class="flexslider-container ng-isolate-scope ng-scope" slide="s in slides" animation="slide"> http://errors.angularjs

Flexslider 2 vertical thumbnail navigation

纵然是瞬间 提交于 2019-12-01 23:18:23
问题 I am developing a site using the Flexslider 2. I am trying to get the thumbnail nav to work vertically instead of its default horizontal navigation. The problem at the moment is it works but I am finding there are a lot of bugs in the vertical nav working. Has anyone tried this yet? Any help would be much appreciated. Cheers, Mark 回答1: This doesn't really seem to be working in Flexslider as of 1/9/13, however I've gotten it to work for the most part. It seems that it's only designed to have 1

Hash URL navigation with a Flexslider

旧巷老猫 提交于 2019-12-01 08:57:23
I'm building a website that makes use of a flexslider, but I want to implement some URL hash navigation. Based on the hash of the URL, i plan on getting the index of the slide that i want to display and the closest I came is by looking at the code for the manual navigation, where the index of the clicked element equals the index of the slide: 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

Hash URL navigation with a Flexslider

依然范特西╮ 提交于 2019-12-01 06:58:49
问题 I'm building a website that makes use of a flexslider, but I want to implement some URL hash navigation. Based on the hash of the URL, i plan on getting the index of the slide that i want to display and the closest I came is by looking at the code for the manual navigation, where the index of the clicked element equals the index of the slide: slider.controlNav.live(eventType, function(event) { event.preventDefault(); var $this = $(this), target = slider.controlNav.index($this); if (!$this

Flexslider lazyloading - only load an image when it's truly needed

本秂侑毒 提交于 2019-12-01 06:50:31
问题 This is really only following on from an answer to Flexslider lazyloading here I am using that code which I Have pasted below. I would like to alter it so that images only loaded when truly needed. I tried the other Flexslider properties, before: and after: but they created a delay on the first slide? Please can I get some help with this. $('#slider').flexslider({ start: function (slider) { // lazy load $(slider).find("img.lazy").each(function () { var src = $(this).attr("data-src"); $(this)

Pause Flexslider when overlay is open

情到浓时终转凉″ 提交于 2019-11-30 21:57:15
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').flexslider({ animation: 'fade', directionNav: false, slideshowSpeed: 4000, controlNav: true, pauseOnHover: true

Is there a destroy method for FlexSlider

◇◆丶佛笑我妖孽 提交于 2019-11-30 14:29:14
I am trying to reinitialize FlexSlider with out page refresh when a new gallery listing is called asynchronously. I would think the routine below would work but it doesn't. It seems like the first FlexSlider persists even though the new images are successfully loaded. Is there a way to destroy, then rebuild the gallery? Thanks function flexInit() { $('.flexslider').flexslider({ animation: "slide", controlsContainer: ".paginator", manualControls: 'a', after: function(slider){ if(slider.atEnd == true) { // ??? slider.destroy; galBuild(); } } }); } function galBuild() { $.getJSON("/gallery/next/"

flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox

情到浓时终转凉″ 提交于 2019-11-30 10:01:47
I'm trying to have a porthole window look on a flexslider with the slide animation option. Basically the image would slide but be masked in a circle and I'm trying to accomplish this with border-radius and overflow:hidden on the flexslider wrapper. Check this page out in Firefox to see the desired result, cause its working there. Then see that it doesn't in Chrome or Safari. Here is the link (the slideshow is the picture of me): http://imjoeybrennan.com/about.html Any help is much appreciated! Thanks, Joey just helped you with an issue. This one is easy too. The reason it is not working in

How to set up multiple sliders with flexslider?

安稳与你 提交于 2019-11-30 07:36:26
问题 I use flexslider, when i follow instructions on their website it doesn't work for multiple sliders, this is the code: i need a controler nav on both sliders, instructions are here: http://www.woothemes.com/flexslider/ Does anyone what i'm doing wrong? <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <link rel="stylesheet" href="http://www.esens.nl/assets/templates/esens/flexslider/flexslider.css" type="text/css" media="screen" /> <script src="http://www.esens.nl/assets