div with 4 divs that resize as browser width changes

[dwlamb]

After writing out that which appears below I realise help I am asking for might be outside the scope of support for Owl Carousel. The plug-in itself is working as it should. It is functions within this plug-in that I want to emulate for the rest of the content that appears on my site.

I am using Owl Carousel and it works great. I wish to adapt some of the CSS and/or javavscript to the rest of the page displaying the carousel but have hit a wall and hoping someone can assist.

This link http://carouselhelp.position-is-everything.com/ will demonstrate how I am using the carousel and somewhat of what I want. I want the divs below the carousel to have the same widths, same gutters and be 4 across like those in the carousel. I am close for the layout of 4 across is achieved if the browser is at it's widest, but reduces to 3 across and 2 across, etc. as the browser window width decreases. I would like 4 across for the carousel and 4 across for the non-carousel divs below it. The carousel would be left to paginate according to how wide the browser window is and the user clicking one of the buttons just below the carousel viewing area

Setting up Owl Carousel these options were set for the number of panels to be displayed in the carousel at different sizes of windows and want similar guidelines:

[0, 1],
[450, 2],
[600, 3],
[700, 3],
[1000, 3],
[1200, 4],
[1400, 4],
[1600, 4]

I have somewhat been able to achieve the look of the carousel. Dissecting the page in Firebug, jQuery wraps a few divs around the ones initially hard-coded as class=owl-carousel but I can't really tell what they do even with examining the associated css.

I realise the widths of the divs in carousel are calculated are set on-the-fly but my jQuery skills are not there yet. Can someone help?

[Airshow]

There are no doubt all sorts of HTML/CSS issues that the Owl Carousel author has resolved, so take maximum advantage of that expertise.

Instead of emulating the appearance of your Owl Carousel, you might consider (in order of preference) :

• a second Owl Carousel, with appropriate options to give the required appearance/functionality?
• Cloning the rendered Owl Carousel then manipulating it to give the required appearance/functionality?
• Modifying a copy of the Owl Carousel plugin to give the required appearance/functionality?

Any of these approaches may well be simpler and more reliable than a DIY emulation starting from scratch.

[dwlamb]

The thing is I do not want multiple carousels. I want part on the carousel's functionality:

• grab 4 divs
• wrap them in another set of divs
• have the script do the math and resize the divs on the fly
  etc...

if you looks at the sample page I provided, you might have a better view of what I'm trying.

I don't want someone to solve it totally for me. Someone with whom I can keep a dialogue with and bring this to light. From the research I have done, some have resized one div depenedent on browser window dimensions but not four.

[Airshow]

It's clear that you don't want the full functionality of more than one Owl Carousel, but you appear to want something that renders similarly to your Owl Carousel.

Hence my sugestion to adapt (in one way or another) instance(s) of Owl Carousel to meet your ends.

In case it's not clear, I am suggesting that the adaptation removes/limits the functionality of the rendered carousel while retaining the general appearance.

In case you still need to be persuaded, try viewing your sample page at screen width of 1024px. I am seeing a carousel 3 elements wide, not 4. It is not safe to assume that every screen is the same size as yours.