Product Carousel display 3 products instead of 4

[lesliekirk]

I'm trying to figure out why I cannot display 3 product images instead of 4 with the Featured Product Carousel. Is something in the javascript controlling the number of images that display in the row? Adjusting the class from u-width-4--l to u-grids-3--l did not help. Where else should I look?

[Matt Zimmermann]

Hi Leslie,

You can pass the following settings to change the elements being called by the function:

autoStart: false \\ [Boolean] - Set to `true` for automatic cycling
carouselDelay: 5000 \\ [Integer] - Set delay between slide display for automatic cycling
group: false \\ [Boolean] - Set to `true` to create grouping of elements based on breakpoint
groupClass: 'x-carousel__item' \\ [String} - Set the class to be used for element groups
groupTiny: 2 \\ [Integer] - Set number of elements to show on screens < 640px
groupSmall: 2 \\ [Integer] - Set number of elements to show on screens between 640px and 767px
groupMedium: 4 \\ [Integer] - Set number of elements to show on screens between 768px and 959px
groupLarge: 4 \\ [Integer] - Set number of elements to show on screens between 960px and 1439px
groupWide: 4 \\ [Integer] - Set number of elements to show on screens >= 1440px
groupWrapper: 'figure' \\ [String} - Set element to wrap groups with

$.hook('product-carousel').roundabout({
    autoStart: false,
    carouselDelay: 5000,
    group: false,
    groupClass: 'x-carousel__item',
    groupTiny: 2,
    groupSmall: 2,
    groupMedium: 4,
    groupLarge: 4,
    groupWide: 4,
    groupWrapper: 'figure'
});

[lesliekirk]

Thanks, Matt Zimmermann! That's what I thought, just wanted to make sure I didn't break anything by adding the group sizes to what I already have.

[lesliekirk]

This fixed the number of images to appear but now I'm trying to figure how to get the 3 images centered in the layout. They are currently at the left side of the div.

The code is adapted from the example at https://docs.miva.com/readytheme-sha...oduct-carousel

<section class="x-product-list x-product-list--carousel">
<div class="x-carousel" data-hook="place-carousel">
<button class="x-carousel__button u-icon-triangle-left" data-hook="carousel__button-previous"></button>
<div class="x-carousel__container x-carousel--animate" data-hook="carousel__container">
<div class="o-layout__item u-width-6 u-width-3--l u-text-center x-product-list__item">
<a class="u-block x-product-list__link" href="&mvte:product:link;" title="&mvte:product:name;">
<img class="x-product-list__image" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;">
<strong class="x-product-list__name">place one</strong>
</a>
</div>
<div class="o-layout__item u-width-6 u-width-3--l u-text-center x-product-list__item">
<a class="u-block x-product-list__link" href="&mvte:product:link;" title="&mvte:product:name;">
<img class="x-product-list__image" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;">
<strong class="x-product-list__name">place two</strong>
</a>
</div>
<div class="o-layout__item u-width-6 u-width-3--l u-text-center x-product-list__item">
<a class="u-block x-product-list__link" href="&mvte:product:link;" title="&mvte:product:name;">
<img class="x-product-list__image" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;">
<strong class="x-product-list__name">place three</strong>
</a>
</div>
<div class="o-layout__item u-width-6 u-width-3--l u-text-center x-product-list__item">
<a class="u-block x-product-list__link" href="&mvte:product:link;" title="&mvte:product:name;">
<img class="x-product-list__image" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;">
<strong class="x-product-list__name">place four</strong>
</a>
</div>
<div class="o-layout__item u-width-6 u-width-3--l u-text-center x-product-list__item">
<a class="u-block x-product-list__link" href="&mvte:product:link;" title="&mvte:product:name;">
<img class="x-product-list__image" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;">
<strong class="x-product-list__name">place five</strong>
</a>
</div>
<div class="o-layout__item u-width-6 u-width-3--l u-text-center x-product-list__item">
<a class="u-block x-product-list__link" href="&mvte:product:link;" title="&mvte:product:name;">
<img class="x-product-list__image" src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;">
<strong class="x-product-list__name">place six</strong>
</a>
</div>
</div>
<button class="x-carousel__button x-carousel__button-right u-icon-triangle-right" data-hook="carousel__button-next"></button>
</div>
</section>

The ReadyTheme item is placed inside this

<section class="o-layout u-bg-white">
<div class="o-layout__item">
<mvt:item name="readytheme" param="contentsection( 'storefront_featured' )" />
</div>
</section>

The actual page is behind a "wall" or I would share that link too.

[Matt Zimmermann]

Hi Leslie,

You should be able to add this to your theme styles:

.x-carousel__item {
    justify-content: center;
}

[lesliekirk]

Thanks Matt Zimmermann!