If we use a swipe at the carousel links in carousel container do not clickable on mobile devices like ipad, nexus7 tablet etc

How to reproduce?

add link in carousel container

 $('#foo2').carouFredSel({

<ul id="foo2">
                    <li><a href="http://github.cm">c</a></li>
                    <li><a href="http://github.cm">a</a></li>
                    <li>r</li>

When we remove swipe option - links is working

Hey,

I want to display an image in carousel even though it does not completely fit in the window. For that I have used the following config.

items: {
visible: '+1'
}

The problem is that caroufredsel is not inited if number of visible items (including the partially-visible item) equals to total items. So the image stays cropped on the edge of screen and you cannot interact with carousel to see it whole.

There is also a so thread on this subject: http://stackoverflow.com/questions/9536844/caroufredsel-show-partial-items?noredirect=1#comment28652875_9536844

How do you vertically align to middle/center when items are different heights in the carousel?

The current link to the documentation page ( http://docs.dev7studios.com/category/11-caroufredsel ) is not working.

Hi,
caroufredsel links are not working on Android Chrom - works fine on all other platforms.

Site url: eventimpuls.at
Links: The caroufredsel links at the bottom of the page.

Any suggestions on how I can fix this would be much appreciated.

Thank you for helpin' out!

I'm using this using version 6.21 along with the jQuery 1.91 and the jQuery easing plugin to swap between sections of a form and have found that when I use the certain scroll fx settings radio buttons choices are cleared during the slider transition. This appears to be limited to radio buttons as I have not been able to replicate the issue with any other type of form input.

The offending scroll fx settings are as follows:
crossfade,
cover,
cover-fade,
uncover,
uncover-fade

Scroll, directscroll and fade all work as expected.

Issue is replicable in Chrome, IE and firefox. Havn't tested Safari.

in Chrome, Safari, and Internet Explorer there seems to be an issue when the first instance of the first slide loads up it displays as if it's halfway between the first and second slides.

All 3 browsers are up to date

CarouFredsel swipe doesn’t work with latest touchSwipe. Had to go back to 1.3.3 (same as demo site) to get it to work. https://twitter.com/Krogsgard/status/326406568167997441

Hi
When i configure fx: 'crossfade' it flashing on change image only in safari browser

Hi,
CarouFredSel jQuery plugin is wonderful. Can I use this plugin for the commercial project? I want to use this plugin to build an extension on Magento platform. Do you have any limited rights to this or not. Thank you for taking the time to answer my questions.

Best regards,
Tiến

We are using this carouFredSel to navigate around a number of settings on a page. The page is built around a responsive design principle and we have it set up so that we show a minimum of one and a maximum of three items. The items are left floating divs contained in a wrapper div. The size of both the wrapper and the items is determined by mediaqueries in the CSS, the plugin should not alter their sizes. The setup config for carouFredSel looks as follows:

$(_this.el).find('.navigation-pane').carouFredSel({
  width: '100%',
  items: {
    visible: 'variable',
    width: 'variable'
  },
  scroll: {
    items: 1,
    duration: 200
  },
  infinite: false,
  circular: false
  }, {
    transition: true
  });

The problem is regards the case when we have exactly three items in the carousel. We shrink the view port so that the navigation of the carousel becomes active, then scrolls one item to the right, and then makes the view port larger again. The result is that the navigation is hidden, as expected, but the items seems to have been re-arranged so that the last item is now the first item. When inspecting the debug log from the plugin it actually looks like the carousel slides back two times too far before leaving the items in that state.

carouFredSel ... : Scrolling 1 items forward.
carouFredSel ... : Preventing non-circular: sliding 1 items backward.
carouFredSel ... : Scrolling 2 items backward.
carouFredSel ... : Not enough items (3 total, 4 needed): Hiding navigation.

We have tried to isolate the problem and the only conclusion we can come to is that this seems to be a problem with the carouFredSel. It would be really nice to hear your thoughts in the matter.

This URL is not available http://docs.dev7studios.com/category/11-caroufredsel

This URL doesn't contain a full documentation with all parameters listed http://docs.themeisle.com/category/500-caroufredsel

So what is the new URL with full documentation?

Hi
I am wondering if I can use the carouFredSel for thumbnails in Nivo slider.

It seems a logical fit, if the thumbnails do not fit in one row. But the documentation on http://docs.dev7studios.com/article/23-getting-started-with-the-caroufredsel-jquery-plugin does not mention this at all.

So I guess it is possible, but where would I find documentation?

Hi, guys, my theme was automatically updated and now I have a bug. The slider jumps. I can't find mistake, my website is here http://rodi-v-amerike.com/ . If you look at the lower border of the slider, you will see that it changes

Hi,

I am using the carouFredSel for my carousal. But i have a issue when it has to be displayed in a overlay. Initially the overlay is hidden, it opens which has a set of images for which i need a carousal.
Kindly provide a workaround.

Thanks,
Sunilraj Chavan

Full Screen Slider worked great until I added .htaccess file to redirect HTTP to HTTPS. Browser (Firefox) reports "Firefox has blocked parts of this page that are not secure." Black screen is on all browsers. Tested Chrome, Edge & IE. If I remove the .htaccess file, the slideshow is back.

Any and all help would be appreciated.

Hey, maintainer(s) of gilbitron/carouFredSel!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library gilbitron/carouFredSel is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "gilbitron/carouFredSel",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I have an issue with using a responsive caroufredsel slider:

When I resize the browser window (or turn the mobile device), the image in the slider resizes, but not the height of the caroufredsel container. This results in extra space under the slider, or the images in the slider being cut off...

This is the Contao Caroufredsel version.

I am usiing the CarouFredSel for a rotating slider on a site https://www.midcosystems.com at the bottom is the feed. In all other browsers it works fine, even on mobile devices. However, in Chrome it slides out about half way then jerks to the right. I am a bit lost as to how to fix this. Any help would be appreciated.

Thank you.

Hello everybody,
i have a slider that take the full width of the page.
If i set swipe with onTouch true the slider work fine, but i can't scroll down or up the page if i touch the slider.

I also try to react to the swipe by myself
$(".carusel").swipe({
excludedElements: "button, input, select, textarea, .noSwipe",
swipeLeft: function() {
$('.carusel').trigger('next', 4);
},
swipeRight: function() {
$('.carusel').trigger('prev', 4);
},
});

but giving the noSwipe class to the slider or the slide obviously the swipe is not more triggered.

How can i fix it? I need both the swipe on the slider (left, right) and the normal scrolling of the page to navigate in the other content.

Thanks

When a carousel is created with only one item the progress bar gets wider than 100% because the perc variable, used in the progress bar css width declaration, keeps being calculated.
This also happens on the last item of a carousel that is not circular (and/or infinite).

A workaround is relatively easy, override the style attribute from the progress bar in css (with the !important as it is defined as a style attribute on the HTML-element).

But it would be nice if the calculation just stops as it is not necessary anymore.

Is it possible to remove right margin from items in carousel, so that all the images are 'glued' together?

When carousel item contains <form/> with <input type="submit"/> and swipe is enabled when user tries to press on submit button it looks like pushed, saves this state and nothing happens after. Guess, this is because touchstart event is captured for swipe.

For my case code below solved issue.

carousel.find("input").on("touchstart", function() {
  event.stopPropagation();
}).zIndex(100);

An error Exception: opts_orig is not defined is thrown because of the usage of eval. As Google Closure Compiler renames the opts and opts_orig variables, but cannot optimise Javascript contained in strings, the expressions passed to eval break.

Hello, I'm using this plugin to show some testimonials on my homepage. I have it setup to have two slides showing but when I get to a smaller screen I only want it to show 1. Here is my code:

        $(".slider-testimonials .slides").carouFredSel({
            responsive: true,
            auto: false,
            pagination    : {
                    container        : '.slider-pager',
                    keys            : false,
                    anchorBuilder    : null,       
                    items            : 2,        
                },
            items        : {
                    visible            : 2,        
                    minimum            : 1,       
                },
            scroll : {
                items : 1,
            }
        }, {
            debug: true,
        });    

and the HTML:

<div class="slider-testimonials">
    <div class="slider-clip">
        <div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 940px; height: 134px; margin: 0px; overflow: hidden;">
            <ul class="slides" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 6580px; height: 134px;">
                <li class="slide" style="width: 470px;">
                    <div class="testimonial">
                        <div class="testimonial-avatar">
                            <img alt="- Kimberly S., Boeing" src="(url)">
                            <img class="arrow" src="(url)">
                        </div><!-- /.testimonial-avatar -->
                        <div class="testimonial-body">
                            <div class="testimonial-content">
                                <p>“Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate.”</p>
                            </div>
                            <h5 class="testimonial-autor">- Kimberly S., Boeing</h5>
                        </div>
                    </div>
                </li>
                <!-- this li is repeated. Removed for space -->                   
            </ul>
        </div>
        <div class="slider-pager" style="display: block;">
            <a href="#" class="selected"><span>1</span></a>
            <a href="#"><span>2</span></a>
            <a href="#"><span>3</span></a>
        </div>
    </div>
</div>

Any help would be great. Thanks

http://docs.dev7studios.com/jquery-plugins/caroufredsel-advanced
Custom events section.

HTML source code is visible and not the actual documentation. Looks like there is some problem in some plugin which translates HTML to tablized form.

There are two comma errors - always the second line. Should be , at the end of the line instead of ;

var ns1 = cf_e('', conf),
      ns2 = cf_e('', conf, false);
      ns3 = cf_e('', conf, false, true, true);

var dur1 = opts.auto.timeoutDuration + del;
      dur2 = dur1 - tmrs.timePassed;
      perc = 100 - Math.ceil(dur2 * 100 / dur1);

There seems to be an small issue with using a vertical carousel with fixed height and a limited number of items.

Here is a demo page:
https://dl.dropboxusercontent.com/u/2758854/carouFredSel-6.2.1/carouFredSel-6.2.1/index.html

Every slider item in that page starts with the word START written in red. As we load the page we can see that the first item is actually cut in half, and only half the text is readable.

Here is a screenshot as well:
https://dl.dropboxusercontent.com/u/2758854/item-cut.png

I think it's because you can't actually fit 4 items on the first screen. (which is the "visible" setting)

Using visible: "variable" does go a long way of solving this.
But perhaps there could be an alternative to say "show X items, but if they don't fit, remove one and vertically center the remaining X-1 items"

Hope that makes sense, thanks for a great plugin!

Here is the full config:

$("#foo3").carouFredSel({
    height: 450,
    direction: "up",
    items: {
        visible: 4,
        //start: "random",
        height: "variable"
    },
    scroll: {
        items: 1,
        pauseOnHover: true
    },
    auto: 5000
});

Currently the carouFredSel sets the unsorted list of items to left to some amount, and I cannot push it to the left with css, since it calculates that left with the plugin when you scroll.

Is there some option to put it to left to some amount, so it doesn't offsets automatically?

I have difficulty to hookup event on play, so i can hide the div[popup] when its starts sliding else it will be like the div[popup] scrolling along with the carousel. Can some one please help me out on this. FYI i a using carouFredSel 3.2.0

  		//	Responsive layout, resizing the items

			$('#foo4').carouFredSel({
				responsive: true,
				width: '100%',
				scroll: 2,
				items: {
					width: 400,
				//	height: '30%',	//	optionally resize item-height
					visible: {
						min: 2,
						max: 6
					}
				}
			});

I saw these codes ,and i try change the items width to 100%. but item's width can't be your clientWith.
it means i had to set item‘s width a px

Hello,

When I trigger the 'destroy' event, the carousel is left in the incorrect order. It should remember the elements original order in the DOM and restore.

I see that as an issue that this plugin is not supported at all. You can't get answers for your problems. Otherwise it would be a great tool.

Would it be possible to update the script so you can have multiple carousels on a page and use .each() and data attributes to customize them?

I was looking at your WordPress plugin and rather then injecting the code into the site it would be a lot cleaner using data attributes ;)

Just a suggestion, would even sponsor for this update if possible! And maybe even sponsor a review of your plugin at the WPExplorer blog - I just really need the support for multiple carousels using data attributes for my Total WordPress theme to clean things up for the front-end builder ;)

Thanks!

if jQuery noConflict with "remove all" flag (set to true) is used, caroufredsel throws an error (invalid 'instanceof' operand jQuery) due de following mismatch:
inside helper function "is_jquery" the instanceof jQuery is checking against alias jQuery (global), so as per jQuery (global) is no longer available due noConfict(true), then a local jQuery alias must be declared (inside caroufredsel closure) or just use $ instead.

(function($) {
    var jQuery = $; // <----  local jQuery alias scope

    //  LOCAL
    if ( $.fn.carouFredSel )
        ....

or

    function is_jquery(a) {
        return (a instanceof $); // <---  instead jQuery "glob alias"
                ...

6.2.1.js Line 2528-2531:

FN._unbind_buttons = function() {
var ns1 = cf_e('', conf),
ns2 = cf_e('', conf, false); // ; should be a ,
ns3 = cf_e('', conf, false, true, true);

Hi All
The plugin does not support right direction, is it implemented?

Hi,

I have a problem Chrome browser in production only (not in local).
The images of all carousels with fade/crossfade transitions do not work properly. There is a sort of white flash then the next image appears a second then dissapear...
It is a bit difficult to explain so I put a link to the production site here :

http://alpstravels.com/
http://alpstravels.com/wp-admin/
login : visitor
pass : amischine74

Is anybody experience the same problem ?

Hi @gilbitron
I created logo ticker with continuous loop. But, facing a problem. In desktop it's working fine. But, in mobile and tablet when logo is coming from right to left, it jumps to left after appearing to middle section. Carousel setting is below:

$('#carousel_1').carouFredSel({
    align: false,
    circular: true,
    infinite: true,
    responsive: true,
    items: 5,
    scroll: {
        items: 1,
        duration: 5000,
        timeoutDuration: 0,
        easing: 'linear',
        pauseOnHover: 'immediate'
    }
});

After checking I found that when carousel item is coming from right to left, and when it appear to middle of view, the most left item is get delete. When that item is deleting it's jumping to left.

Please do not animate the layout with position left and top. Can you change it to translate3d()?! Animating other properties besides opacity and transform causes a lot of paint

I have a slider with 2 slides. Options:
{
responsive:true,
height: 'variable'
}

When scroll bottom (on mobile), browser address bar pannel will hide, slider update height and jump to top. And when scroll to top, browser address bar pannel will show and slider update sizes and jump to top too. How fix it?

Here's the demo implemented with only two slides: http://www.cahri.com/tests/caroufredsel.html

Each time you go from slide 2 to slide 1 it scrolls the image from left to right instead of right to left. Going from slide 2 to slide 1 should have the same behavior as the Prev button which is more natural on a user's perspective.

Any idea how to fix it?

Afther the page is load the caroufredsel wont show 3 items in the right way.
the arrows ar also gone.
is there a way to fix this?
u can see it here.
http://fgm.d2.floro.nl/

On of the item in my carousel dynamically updates its height, but carousel is still with wrong sizes. Is it possible to update carousel size dynamically when one of the item's height is updated?

@gilbitron @FrDH

PS. Seems like repository is dead, but if you give me some advices I can send PR.

I'm looking at ms_getParentSize() function:

function ms_getParentSize($w, o, d) {
  var isVisible = $w.is(':visible');
  if (isVisible) { $w.hide(); }
  var s = $w.parent()[o.d[d]]();
  if (isVisible) { $w.show(); }
  return s;
}

I don't understand the need for the whole isVisible thing. Seems like what you're returning isn't dependent on showing and hiding the window object. I feel like I'm missing something, but removing the code doesn't seem to have any adverse effects (it also solves a bug when using the carousel with the Zurb Foundation framework).

Edit: The $w arg is actually the caroufredsel instance (which makes more sense), but still not sure why we need to hide it and show it again.

So I thought I'd ask about it before I do something potentially stupid.

Hello! Thanks for awesome plugin, but it seems that i found a bug.

$("#foo").carouFredSel({
scroll: {
onAfter: function( data ) {
data.items.new.addClass("active" );
}
}
});

data.items.new is undefined, after some researches i found that there is no return for 'new'

Here is the piece of source code at the line 2904:

I tried to use visible, but it actually returns the first element.

Hi i am getting larger height than the items, even than the tallest item, and it's creating empty space at bottom of items. I tried many ways but bad luck. I summarized the problem in this post - http://stackoverflow.com/questions/24600459/unwanted-responsive-height-in-caroufredsel-jquery-plugin .. please help if anybody encountered in this problem.

I'd like to have picture 1 displayed and then picture 2 faded over the picture 1 without picture 1 is fading out. If I use "fade" or "crossfade", there is always a short time when the display gets white (fade) or lighter (crossfade). Is it possible to fade each new picture over the picture displayed before?