Roundabout (carousel) changing the number of images advancing

[lesliekirk]

With the Slick Slide that is used in other ReadyThemes you are able to set the number of slides to scroll when advancing through the images.

slidesToShow: 4,
slidesToScroll: 1,

How is this done with the roundabout?

[jaime.v]

Hey Leslie,

For me, it's in that same scripts.js file settings for slidesToShow and slidesToScroll in the productCarousels function under "sharedFunctions".

sharedFunctions: {
// ---- Product Carousels ---- //
productsCarousels: function (carousel, append) {
var carousel = $(carousel);
if (append === true) {
var appendArrowsTo = $(carousel.selector).parent();
}
else if (append === 'undefined') {
var appendArrowsTo = $(carousel.selector);
};

$.ajax({
cache: true,
crossDomain: true,
dataType: 'script',
url: '../js/jquery.slick.min.js'
}).done(function () {
carousel.slick({
appendArrows: appendArrowsTo,
draggable: false,
slidesToScroll: 4,
slidesToShow: 4,

Is this the carousel you mention?

Hope that helps!
Jaime Veronda

[lesliekirk]

Hi Jamie - in the Elements/Shadows ReadyTheme? I followed these instructions to get it going (along with a bit of help) https://docs.miva.com/elements/exten...oduct-carousel

[jaime.v]

Oh no, Suivant, my apologies! I'm in the wrong thread, haha!

[Matt Zimmermann]

Hi Leslie,

Roundabout take a different approach with displaying items. You can set the grouping of items by break point, however Roundabout will always slide one group at a time. So if you set groupWide to 3, each group of 3 will slide with each click of a directional arrow, swipe, or automated scroll.

/**
* You can also 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('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]

Hi Leslie,

Roundabout take a different approach with displaying items. You can set the grouping of items by break point, however Roundabout will always slide one group at a time. So if you set groupWide to 3, each group of 3 will slide with each click of a directional arrow, swipe, or automated scroll.

So are you saying if I set groupWide to 3 then only 3 images will display and they will slide as a group?

[Matt Zimmermann]

Correct