flexslider

问题 I am now using this code to change the speed on each slide, but I also need to change the slide animation for some slides. Any ideas how to do this in a similar or any other way? $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: false, directionNav: false, pausePlay: true, animationSpeed: 300, start: function(slider) { clearInterval(slider.animatedSlides); slider.animatedSlides = setInterval(slider.animateSlides, YOUR_TIMEOUT_FOR_FIRST_SLIDE(ONLY FOR

问题 When we enable controlNav , we get nice paging list and some usefull class like flex-active . but the class added to the link or image(when thumbnail control enabled). like this: <ol class="flex-control-nav"> <li><a class="flex-active">1</a></li> <li><a>1</a></li> </ol> How to move flex-active class to the li element instead of a/img element to get something like this: <ol class="flex-control-nav"> <li class="flex-active"><a>1</a></li> <li><a>1</a></li> </ol> edit : here the script i used to

问题 I am using flexslider and i want to change the . . . slide navigation control to my own icons or image for each slide. like the slide on http://viber.com if not possible on flexslider in which plugin can i do that. 回答1: I think you can try this approach by tweaking with some css and js: First, hide the default navigation bullets of flexslider using css: .flex-control-nav.flex-control-paging { display:none; } Second, add your custom navigation html and design it in whatever way you want. But

问题 My mark up is <div class="slide_container"> <div class='bg_container'> <div id='bg_slider' class='flexslider' > <ul id='slide_set' class='slides'> <li>image 1</li> <li>image 2</li> <li>image 3</li> <li>image 4</li> </ul> <div id='glass_div'></div> </div> </div> <div class='tex_slide_container'> <div id='message' class='flexslider2'> <ul id='content_slide_holder' class='slides'> <li> <div class='text_holder'> <div class='text_div'>text 1</div> </div> </li> <li> <div class='text_holder'> <div

问题 In my typo3 7.6.19 Website I want to user the flexslider plugin. That works fine, my problem is that the image is a cropped one and not the original file I uploaded. How can I change it to use the original picture? Thanks in advance 回答1: The plugin sets up a TypoScript constant plugin.tx_wsflexslider.maxwidth=800px You can modify this value in your TypoScript template (Module Template > Constant Editor > select "PLUGIN.TX_WSFLEXSLIDER" About your other problem that is artifacts in the reduced

问题 I have a slider (flexslider) that dynamically adds the class "flex-active-slide" to the active <li> . I want to use jQuery to do something when a specific slide has the class "flex-active-slide." I tried the following, but it doesn't work because the .flex-active-class is added on the fly after this has already run: if ( $('#slider li.about').is('.flex-active-slide') ){ $('.nav li.about').show(); } In my research, it seems I want to use on(), but all the examples I see relate it to an event

问题 I have a flexslider working on the first Jquery UI tab, but when I place on the second one its a nogo....anyone know what else you have to add to make this function work? I included a Jfiddle of the one thats not working: $('#slider').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false }); $('#slider2').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false }); JFIDDLE That link had answers but nothing proof working...

问题 I am using the flexslider plugin which is triggered by the following code: $(window).on('load', function () { $('.flexslider').flexslider(); }); This runs once the page has loaded. Later in the application I've replaced the contents of the flexslider (the number of images in it and their sources) and need to re-load the flexslider. My code is as follows: document.getElementById('contestant1').onclick = function() { process(); } output = ""; for (num=1; num<=3; num++) { imagesource = "Week" +

问题 Why can't I have Flexslider's "selector" property to work properly when targeting slides that are not the very one after the other in DOM order? Basically, I found that targeting .testA would work whereas targeting .testB , .testC , or .testD would fail . <ul class="slides"> <li class="testA testB"><img/></li> <li class="testA testC"><img/></li> <li class="testB testD"><img/></li> <li class="testC testD"><img/></li> </ul> Failing here actually means that it displays properly at first, but

问题 I've encountered a problem with Flexslider on iOS devices that seems similar to the problem reported in this unanswered question. Slideshows with images of different aspect ratios display properly on OSX Safari and all other browsers I've tried (even IE8), but not on iOS 5 or 6 using Safari or Chrome. The problem occurs on both iPhone and iPad. I first noticed this in a large responsive portfolio site I'm building for a client and thought it might be related to the unusual configuration