Multiple slide-widths, based on content?

[Eiirp]

Hello, thanks for your plugin so far, it does a good job!

Is it possible to have an individual width for each listed item, depending on the content they carry? (Thus, no fixed value for the "visible" configuration) I'd like to have the .jcarousel wrapper at 100% of the browsers size and each slide will contain one centered image. The slide's width should depend on the image's size (+ margin) and already show some part of the next/previous slide (if the image size allows that).

Thanks!

[travco]

Hello Eiirp,

Right now the plugin (as you've noticed) doesn't really take content size into consideration in the slightest. Which, unfortunately, means that the only way to implement this would be a pretty significant change, keeping track of each individual slide's width, and maintaining positions (either relative-to-other-slides, or determining the spacing and then moving slides relative to that array of positions.

It would be a cool addition, but based on my understanding, the plugin author wants to keep the plugin light (or "lite"), and I cannot think of any way this could be done succinctly in the code.

[Eiirp]

Allright, I understand. Is there a way of a slide centered and showing the next and previous ones only for the half of them? (Just as putting the "visible" to 1.5, but two both sides in a circular carousel, in fact 2 slides, as 0.5 + 1 + 0.5)

[travco]

Yes, that can be done. It's a change that can be done with just CSS, and the plugin options on the page. In fact, there's even a demo of it: http://plugins.learningjquery.com/jcarousellite/demo/centered.html

[Eiirp]

Thanks for your answer, I've been looking for this. But, I can not get it to work for my carousel. As I understand, a padding is added to the .jcarousel wrapper and unveils parts of the previous/next slide. In my case, I don't have fixed slide-widths (they take 100% of the screen), so I might add a padding of 25% to both sides of the wrapper. This seems to show 50% of each slide, but the current visible slide is not centered anymore (moves to the right). Am I lacking something here?

Thanks!

[travco]

I don't think I understand your situtation. You say that the slides are 100% of the screen? If that is the case, how are you seeing the other sections of the slides (and how could you)?

Also, have you tried checking the style width of the slideshow or any container that it is in? If it is too small after padding being added, the CSS might start acting up (pushing) things to the right/up.

[kswedberg]

@Eiirp: It would probably help if you could point us to a URL so we can see the problem firsthand and troubleshoot more easily.

[Eiirp]

Hello, thanks for your help, it seems that I found the issue. Here is a link so far: http://2014.sassaheld-schmuck.de/Wordpress_2014/

I guess I explained my problem bit too complicated. I want to build a jCarousel that adapts to the size of the browser, displays the current slide in the middle and respectively 50% of the previous/next slide.

My .jcarousel container was set to the box-sizing "border-box" which added the padding inside of its width. I'm not really sure how, but it seemed to confuse the placement of the inside ul/li stuff. Putting the box-sizing to "content-box" and setting the width to 50% with a left/right-padding of 25% solved the problem.

But further, there is one question remaining. My carousel runs with the circular option, but as it arrives at the first slide after one loop again, there is no item to its right displayed. When I click one more time the next button, the second slide appears again and the carousel runs fine (until the first slide again). Is there a way to solve this?

Thanks!

[travco]

@Eiirp: I think I found what's going wrong:

Excerpt from /wp-content/themes/sassaheld/library/js/scripts.js

  /* Collection Carousel */

$(function() {
    $(".jcarousel").jCarouselLite({
        btnNext: ".centerwrap.go",
        circular: true,
        responsive: true,
        autoCSS: true,
        autoWidth: true,
        visible: 1,
        swipeThresholds: { x: 40, y: 120, time: 100 }
    });
  });

I think your issue is that you have visible set to 1, when in reality you have more than just the center slide visible at all times because of how your CSS is configured. JQcarousel (with visible values higher than one) produces duplicate slides of the ends of the UL at the ends of the UL to help produce the illusion of circularity. Basically for visible: 3, it adds a duplicate first slide after the last slide, and duplicate last slide before the first slide. That way if you can see more than just the center slide, at all points during the cycle you are able the other slides as if it were continuous.

Try changing the visible option to 3, and your problem should be fixed.

If my explanation isn't doing it for you, here's the documentation: https://github.com/kswedberg/jquery-carousel-lite#visible--number---default-is-3