flexslider

jquery Flexslider manual controls is not working

由 ≯℡__Kan透↙ 提交于 2019-12-05 03:13:29
I am trying to implement manual controls for the "flexslider" plugin. Here's my code: <body> <div class="container"> <div class="columns row"> <div class="flexslider"><ul class="slides"> <li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="1.jpg"></li> <li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="2.jpg"></li> <li style="width: 100%; float: left; margin-right: -100%; display: none;"><img src="3.jpg"></li> <li style="width: 100%; float: left; margin-right: -100%; display: list-item;"><img src="4.jpg"></li> </ul><ol class="flex

Can't activate select using Flexslider/SwipeJS on Android/Gingerbread

由 随声附和 提交于 2019-12-04 19:06:13
I've recently finished building a mobile site and discovered a bug that only seems to occur on Android Gingerbread. When a select input is placed on a slide within a JS slider (such as Flexslider or SwipeJS), you can no longer click it or give it focus and select the options. I'm wondering if it has to do with the use of display none/block which both these sliders use - perhaps Gingerbread cannot render the select properly under these circumstances? Interestingly, the first slide using SwipeJS is functional; the others not. I've popped a few tests online to demonstrate: http://playground

Flexslider - animation: “slide”, animationLoop: “true” - Conflict

由 点点圈 提交于 2019-12-04 05:30:28
I have an issue with Flexslider 2 under some specific circumstances. I'm using it as a content slider. What I need is to have the animation SLIDE rather than fade, and loop the slides. I have 3 slides with div content and more lists inside them to show a gallery type setup. The issue I'm running into is that when I set the options I need, the slider shows the last slide first, then slides on to slide 2, then 3, then 1. It won't show the first slide as the first slide. The startAt parameter has no effect. Everything works perfectly when I set the slider to use the following: $(".flexslider")

How to reinitialize flexslider for a dynamic loading

由 别说谁变了你拦得住时间么 提交于 2019-12-04 05:01:59
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 ? Solution found ! Just add this line of code to remove the old slider ref if exists $('#flexslider').removeData("flexslider"); When the download is complete, and after you make the append, try using the method again. $('.flexslider').flexslider(); That

How to stop or delay flexslider animation using the before() callback?

由 拈花ヽ惹草 提交于 2019-12-03 21:15:39
I'm adding a class .animate-out on all the elements of the slides before flexslider animates to the next slide, the issue is that the css animation applied won't show because flexslider moves to the next slide immediately. I'm adding the class using flexslider's before() callback function which is called inside the function that animates the slider, so it's too late to use slider.pause() to pause the slider (using it will pause the next slide). I already tested the animations using alert() inside the before() callback function which pauses the javascript execution and I can see the css

FlexSlider: Center current image

由 夙愿已清 提交于 2019-12-03 21:00: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 gets positioned to the left side of the container. Anybody know a way to accomplish this? Right now I'm

Play YouTube video in Flexslider slide and pause slideshow

由 匆匆过客 提交于 2019-12-03 16:43:43
I am using flexslider on a site and will be putting youtube videos in certain slides. However, I need the slider to stop animating while the video is playing, and resume when the video finishes. I understand that the developer has provided a solution to this exact problem using the vimeo API. Are there examples out there of an implementation using the youtube APIs? Is it possible? I am (obviously) not a javascript expert, and find that I learn best through examples/tutorials. There's an example at https://developers.google.com/youtube/iframe_api_reference#Getting_Started for embedding an

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

由 别说谁变了你拦得住时间么 提交于 2019-12-03 16:20:09
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, this can't happen! I think the solution is to use underscore.js - specifically the 'debounce' function.

Flexslider - image preloader

由 喜你入骨 提交于 2019-12-03 14:40:22
I have a problem with my responsive flexslider plugin. The plugin works fine unless you have many images in the actual slideshow. The loading behavior is then just not acceptable. I was hoping someone can help me with the following flexslider image preloader script since I can't get it to work. Here is the code I'm using: FLEXSLIDER HTML <div class="slider"> <div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; "> <ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); "> <li style="float: left;

How to hide images until AFTER jquery flexslider finishes loading

由 依然范特西╮ 提交于 2019-12-03 12:34:29
问题 I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading. When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears. I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their
订阅 flexslider