9bitstudios / flexisel Goto Github PK

Hello there,
First of all, many thanks for this pretty cool jquery plugin!

I want to have easing control on the animation speed.
I try to change "linear" (l245 & l278) by another easing function but nothing happens, it still looks like a linear animation.
somebody knows how to achieve it?

thank's in advance.

How to show specific image as highlighted on page load?
Please help me out

Hello ,
first of all great work guys...

The slider works great...recently as tried to add an audio in one of the slides , obviously the audio plays...BUT when the that slide goes behind the audio stops...

I'm simply using the audio tag as

<li>
 <audio id="audio1">
     < source src="http://www.maninblack.org/demos/Bring%20It%20Down%20demo.mp3">    </source>
 </audio>
</li>

and within the script

 var audio = document.getElementById("audio1");
    audio.load();
    audio.controls = true; 

I have autoplay = true defined....
what do I need to do to make the audio play continuously when user hits the play button from controls....

OR

I tried the onClick event over li to set auto-play false but it also didn't work.
Can I simply on have click over that particular "li" tag play the audio and set auto-play to false and again clicking over same li pause the audio and reset auto-Play to true???

Hi Is this possible to add a class in right arrow when it reaches on last image and by default the class in left arrow.

I hope I am able to explain you..

Hello 9bitstudios,

i like your carousel, it is simple, but when i try it on firefox (for android) on my phone the carousel just disappear.. i think it is because the display none on the css, but still it just effect firefox, other mobile browser like chrome and android phone browser display it correctly.

i hope flexisel team can fix the bug..

thank you

When i view a page with flexisel on an ipad it does not show the correct ammount of visible items. It works on when i use a computer and resize the window. It also works with http://quirktools.com/screenfly/.

Here is my page with the bug/error.
http://www.norskboligformidling.no/beta/2/index.php

Here is the jquery code i am using to enable flexisel

$("#flexiselDemo3").flexisel({
    visibleItems: 5,
    animationSpeed: 1000,
    autoPlay: true,
    autoPlaySpeed: 3000,            
    pauseOnHover: true,
    enableResponsiveBreakpoints: true,
    responsiveBreakpoints: { 
        portrait: { 
            changePoint:480,
            visibleItems: 1
        }, 
        landscape: { 
            changePoint:640,
            visibleItems: 2
        },
        tablet: { 
            changePoint:768,
            visibleItems: 3
        }
    }
});

Any kind of problem you see with the following coffeescript?

$('#home_carousel').flexisel
visibleItems: 4
enableResponsiveBreakpoints: true
autoPlay: true
autoPlaySpeed: 10000
pauseOnHover: true
responsiveBreakpoints:
portrait:
changePoint: 2400
visibleItems: 1

Hi

Using your excellent slider on a prototype website for a client. However I have noticed that when the slider reaches the first cloned image nothing shows up except the loading .gif i have in place for the entire site for images and the like.

URL:
http://www.csaassociates.com/site_one/homepage/index.html

Any advice would be much appreciated.

Zach

Some people have asked about swipe support. While Flexisel does not support swipe functionality out of the box, it would probably be pretty easy to add it into the plugin if need be using your favorite jQuery swipe plugin. All you would have to do is load this up before loading up Flexisel and then alter the Flexisel plugin's setEventHandlers function. So, for example, if you were using the TouchSwipe plugin you would add something like the following to the setEventHandlers function in the jQuery plugin.

object.swipe({
    swipe:function(event, direction, distance, duration, fingerCount) {
        if(direction === 'left')
            methods.scrollRight();
        else
            methods.scrollLeft();
    }
});

You could also look at jQuery Mobile's swipe. That's essentially how you could modify Flexisel to include swipe support.

Can I set a hyperlink (to a external url) on each image ???? Congratulations for the script thanks!!!

How do we install this? I uploaded the Javascript to the site but when I use the code given, it does not create the slider, it just shows bullet points of images

Hello
I want to infinite scrolling flexisel. please let me know how can i do this.
My code is

 $("#flexiselDemo3").flexisel({
        visibleItems: 3,
        animationSpeed: 1000,
        autoPlay: true,
        autoPlaySpeed: 3000,            
        pauseOnHover: true,
        clone:false,
        enableResponsiveBreakpoints: true,
        responsiveBreakpoints: { 
            portrait: { 
                changePoint:480,
                visibleItems: 1
            }, 
            landscape: { 
                changePoint:640,
                visibleItems: 2
            },
            tablet: { 
                changePoint:768,
                visibleItems: 3
            }
        }
    });

Hi, I was trying to minify the stylesheet to test it and got an error on line 38. There's an additional closing bracket on the first color-stop.

color-stop(0%,#fcfcfc)), color-stop(100%,#eee)); /* Chrome,Safari4+ */

Should be

color-stop(0%,#fcfcfc), color-stop(100%,#eee)); /* Chrome,Safari4+ */

Not a big issue for people using their own styles. Just a note. :)
Great work!

Hi team,
I have been used this slider for many of projects but i found a strange issue if the parent is in hidden state then the calculation is not equally divided..(for e.g : if the slider is in tab content which is hidden on load and is active on their respective clicks)

Please let me know if it is already resolved or not or what can i do in this case to get out of such kind of issue....

Hi there....

i'm using flexisel at my website http://www.hazelprinter.com

Problem... at index website ..flexisel is running good...but when i looking at a different page, flexisel does not work...

Solution please...

You can have a look here → http://plugins.compzets.com/

As stated above, the following website I applied flexisel:-

http://www.vginstruments.com.my.

As you can see under Vega products at landing page, the flexisel displays 8 items when it's suppose to display only 4 items as I've set it in my script. The customer added 76 products into flexisel.

Is there a limit to displaying featured products in one go? How do I resolve this issue? Thanks in advanced.

I can't seem to allow this great little tool to have multiple sliders on my site. I thought maybe that's what clone was for, but that only disables it. Any idea how to do this? :)

Sorry for leaving this as an 'issue', I'm not sure where else to ask. Is there a way to change the slider so it fades in instead? I've read the docs and googled for ages before asking. Many thanks.

Hello,
Its very nice Plugin , I have same issue as #32 and #17 , It's resolved partially , After scrolling 4 items comes in screen but only one item scrolled/hided instead of 4
For Exp: 1234, after scrolling its 2345

and also with that one issue I'm facing is that

The css style given to ".nbs-flexisel-inner" is - overflow:hidden

Isn't working with IE7, Any ideas?

I have it on this site here:
http://schelldev.nurelm.com/about/team/employee-spotlight/

I tried to pass in "visibleItems: 3" but then it gave me an error in the console.

If I don't pass any options it works fine, but as soon as I try to add one it says in console "Uncaught SyntaxError: Unexpected token : ".

I'm not sure what I'm doing wrong. Any help would be appreciated.

If I try to quickly swap a slider, after 4,5 swap it takes too long to trogger the swap event.

Hi , i have use this slider on various places its awesome but i have an issue.
the slider is cyclic means when the last item is there and i click on right arrow then first item of slider comes i don't want this , i want to pause the slider when it has last item. user should click back button to go back only.

Thanks

First off, great plugin.

However, once I get the list over 31 the display goes wonky (double height and erratic) if clone is set to true.

Hi,

In order to make the control render nicely when there is a significant delay until the document.ready event fires, we included the required flexisel markup in our control in the first place (as opposed to letting the JS inject it). Before injecting the markup in the JS, I would suggest checking it's not already defined. Good idea?

For example, our appendHTML function now looks like:

        appendHTML : function() {
            object.addClass("nbs-flexisel-ul");
            if (!$(object).parent().has("nbs-flexisel-inner")) {
                object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");
            }
            object.find("li").addClass("nbs-flexisel-item").show();

            if (settings.setMaxWidthAndHeight) {
                var baseWidth = $(".nbs-flexisel-item img").width();
                var baseHeight = $(".nbs-flexisel-item img").height();
                $(".nbs-flexisel-item img").css("max-width", baseWidth);
                $(".nbs-flexisel-item img").css("max-height", baseHeight);
            }

            if (object.is(":only-child")) {
                $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object);
            }
            if (settings.clone) {
                var cloneContent = object.children().clone();
                object.append(cloneContent);
            }
        },

I have seen the issue in IE7, not only the problem with my site, but I also check your demo page. Actually the slider not holding images, it is moving out of the slider. How can I fix this issue in IE7 ?. You can check the screenshot below:

Trying to set the carousel as a continously moving responsive carousel, but setting AutoPlaySpeed to 0 and AnimationSpeed to say.. 5000, yields bad results, you may try on example 3

We are using the flexisel script on this site:
http://mccorp.com/

It is great in all browsers, IE, as is the case with most things. The icons though, they seem to jump a bit from side to side as they are scrolling. Any ideas on a possible fix?

When I load my website the images in the carousel display stacked down the page then flash into the carousel. How do I make it so it doesnt display my images down the page when I load it?

After attempting to modify the core javascript of flexisel, I can't figure out on disabling the infinite loop of flexisel whenever i click on arrows. I want the flexisel to stop scrolling at the last element of the array.

Example, I have 4 images in an array and i set itemvisible to 3. Because it's more than 3 images, I can scroll by clicking on arrows. However, when it reaches the 4th image, I want it to stop scrolling there. The only way to scroll is to click on the left arrow and scroll back to first element of the array. Even so I also want it to stop scrolling at first element when I click the left arrow.

Anyway for me to resolve this? Thanks.

As stated above, when I scroll the carousel, it scrolls one item at a time until the end. Is there anyway when I scroll the carousel, it scrolls three items at a time?

Example:

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 in the carousel

First three:-
Item 1 Item 2 Item 3

After clicking the next arrow button

Item 4 Item 5 Item 6

Thanks in advance.

Hey there,

I like your slider script, great work. Thanks a lot for the fine work.
Have you already planned a right to left version?

Kind regards
Steve

Hi I used your slider in my website and I was wondering if you guys could add support for multi image navigation , so that when I click on navigation icon , instead of 1 picture , it bypasses all the picture in current view . so that a person can view all the pics in least amount of time possible.

I'm trying to use this plugin with Mixitup, a plugin to sort lists. After filtering items, Flexisel shows up "ghost" items in the carousel and tries to slide to them even though they are set to display: none;

As stated above I'm facing some issues on flexisel not displaying when I shrink the browser size to around 979px. I'm making flexisel responsive so that the product can be viewed on ipad.

Here is the URL of the website I'm doing where flexisel shows display issue:-
http://easyseo.com.my/newhttbeauty/our-products/beauty-cream-2/

How do I go about this issue? Thanks in advance,

I have an issue with flexisel when I put a lot of images inside the unordered list.
Normally the flexisel should show 5 images (visible items) in one row. You can see it here: http://www.flexisel.gajetzky.de/01/de/kundenbriefe.php
The problem occurs when I put more images in the list, then the flexisel shows a second row. You can see it here: http://www.flexisel.gajetzky.de/02/de/kundenbriefe.php. Any idea how to fix it?
Slim

Added widget to bootstrap web structure, and everything functions as it should. Install was very easy, markup is great. Unfortunately, when I render the page on Tablet or mobile sizing, the hyperlink on image is only active on top half of the image??? Looked for conflict in sizing with bootstrap/flexisel css and found nothing, thoughts?

If a user searches my page, they get results of query in the carousel. It works if you leave the search box blank and hit enter. If a user enters text and presses enter to search, the carousel disapears or doesn't engage with results at all.

By the way, this plug-in is the star of my project. thanks for creating.

First, great carousel you've built here. Secondly this isn't necessarily an issue as much as just a question as to if and how it is possible. I am trying to turn this into a logo slider for previous customers where as it endlessly loops through the clients and pauses on hover. This doesn't work though. To get the smooth transition I've set animation speed to 1600, and auto play speed to both 0 and 30 (two different attempts). It does transition well but isn't an endless loop so I turned clone on which makes it move in a glitchy manner skipping photos every few seconds though it does loop. Also hovering does not stop the animation, I believe this is probably because the stop on hover is for auto play rather than animation. Could you provide some direction on this? Thanks!

I want to display more list items within the scrolling div and only have 4 visible at a time. If I try to add more than 10 list items, flexisel displays a grid of items within the scrolling panel.

Is there a way to fix this so it keeps everything inline and within the scrolling div? Like an infinite scroll?

Hi~
Adding tags for repo could specify points in history and mark release points.
It's helpful for user to know the version and status of repository, and would enable wider distribution of the library, for example on CDNJS
Would you please consider on using tags?

Thanks for your great work!!
Piicksarn

Can you add dots, please?

Hi,
there's any chance i could pause the animation when i hover on the .nbs-flexisel-inner element instead of .nbs-flexisel-item?
i tried tweaking around the code with setting clearinterval but didn't work well.

Edit: Forgot to mention, i want to pause it but still be able to use the arrows.

Thanks for the plugin, really easy to setup.

How do I unset an instance of flexisel in my page?

How can change slider direction right to left

I have to say that flexisel has been great but one question I have is that if we populate the carousel with oh, say... 35 items, is there a way to have a end user leave the page & come back to where they left in the results?

Currently the action I'm seeing is if you select the 34th item in the carousel and leave the page, if you click back to the carousel, you must start at the beginning result again. In portrait I have only 2 visible items and in landscape 4, having to scroll back to the farther end of the list may seem a little tedious to an end user.

Is there any way to stop the page from reloading to the beginning? Any help would be appreciated & thanks in advance for your time.

Hi there,

Good job. Nice plugin.

I'm trying to make the plugin to slide posts (using WP) too. But so far I couldn't do it. Is there any workaround?

Regards,
Daniel

Is it possible with a single click to scroll by 4 itmes?
Thanks

Hello,

It would be very handy if this plugin would support option, which would allow to jump to next lot, instead of moving carousel items one by one .

Can this be improvement soon? Or I should try do that myself?

Thanks