Colossus Hero Roundabout

[Matt Zimmermann]

Hi Scott,

Those lines are part of the documentation [ https://docs.miva.com/readytheme-sha...ml#hero-slider ].

[ids]

They appear to be wrong, or should NOT be there?

Following this thread, I got the impression that these instructions were going to be removed because they are obsolete. That hasn't been done yet?

[Matt Zimmermann]

At the moment, it would all depend on which ReadyTheme you were using. That being said, this will all change with the release of the next version of Shadows as the build process is different and, at least at first, it will not be shipping with Roundabout.

[ids]

I am using Colossus, which as far as I can tell pointed to the Shadows documentation for this. Once I realized where the link was I just clicked. I could not find "extensions" in CSS Resources and finally went to the forum -- this thread.

Scott

[Matt Zimmermann]

Current and next. Right now, there is no build process for the ReadyThemes.

[ids]

Hey Matt,

Where is the best source of feature info about configuring roundabout? Now that I have it working, I need to know if I can actually use it. Autostart and delay aren't enough and I am guessing there are other nice features?

Thanks.

Scott

[Matt Zimmermann]

lesliekirk - That's the plan.

ids - Unfortunately, there really aren't any features included with Roundabout. It was intended to be very simple. If a developer is looking for more options, I usually recommend using Slick, which ships in Colossus. As for the Roundabout options, these are the ones available.

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('carousel').roundabout({
    autoStart: false,
    carouselDelay: 5000,
    group: false,
    groupClass: 'x-carousel__item',
    groupTiny: 2,
    groupSmall: 2,
    groupMedium: 4,
    groupLarge: 4,
    groupWide: 4,
    groupWrapper: 'figure'
});

[ids]

Ok, thanks. I wish I would have known before. This is a non-starter. It doesn't look like there is any fade type of capabilities for example.

So, Slick...any instructions for integrating with the RT like there is with roundabout? I imagine the template containing the images is similar?

Scott

[Matt Zimmermann]

No instructions for making a hero slider in the current line of ReadyThemes. You should be able to use a reference from Levels for the basic layout/function and then make modifications as needed.

https://www.miva.com/forums/forum/de...age-slide-show

https://www.miva.com/forums/forum/de...-into-a-slider

[ids]

Thanks Matt.

Next important question. Slick is already running on the storefront -- featured products is default.

When adding a hero slider do I add a separate block of code for the hero-slider?

        
$.loadScript(theme_path + 'plugins/slick/slick.min.js', function () {
$.hook('featured-products').slick({
...
});
$.hook('hero-slider').slick({
...
});

[Matt Zimmermann]

That's correct Scott.

[ids]

Thanks.

What is wrong when the images stack instead of "slide" if you will?

Scott
IDS

[Matt Zimmermann]

That sounds like it might be a styling issue, assuming there aren't any JavaScript errors being reported.

[ids]

no js errors. Same with and without the div wrapper.

This is the RT content template. I am guessing I am missing some code in the template?

<div id="js-hero-slider" class="hero-slider">
   <div data-hook="hero-slider">
    <div><mvt:item name="readytheme" param="image( 'hero_image_01' )"/></div>
    <div><mvt:item name="readytheme" param="image( 'hero_image_02' )"/></div>
    <div><mvt:item name="readytheme" param="image( 'hero_image_03' )"/></div>
    <div><mvt:item name="readytheme" param="image( 'hero_image_04' )"/></div>
 </div>
</div>
<!-- end hero-slider -->

The data-hook attr fixed the stacking. I guess it needs the column?

[Matt Zimmermann]

Try changing your code to:

<div class="hero-slider" data-hook="hero-slider">
    <div><mvt:item name="readytheme" param="image( 'hero_image_01' )"/></div>
    <div><mvt:item name="readytheme" param="image( 'hero_image_02' )"/></div>
    <div><mvt:item name="readytheme" param="image( 'hero_image_03' )"/></div>
    <div><mvt:item name="readytheme" param="image( 'hero_image_04' )"/></div>
</div>
<!-- end hero-slider -->