Colossus Hero Roundabout

[ids]

For posterity, the solution was to start the slider without the features. IOW, copy the default definition of featured-products to the hero-slider and remove the feature definitions. Most of those don't apply to single, hero-type slider.

[ids]

I'll PM or email directly -- protected folder.

BTW: I am sure there is something simple I've missed.

[Matt Zimmermann]

If I remember correctly, you shouldn't have to change that. Can you post a link to the site?

[ids]

The images aren't stacking, but side by side because their width is now 352px.

In the JS should the class be identified as 'hero-slider' or '.hero-slider'?

Scott

[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 -->

[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]

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

[ids]

Thanks.

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

Scott
IDS

[Matt Zimmermann]

That's correct Scott.

[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]

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]

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]

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]

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]

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