Hero Carousel CSS Resources

[srmb]

I am following the instructions on the Element document page (https://docs.miva.com/elements/extensions.html) to try to set up the hero carousel on my Shadows dev site. But when I get to steps 6/7 I'm stuck.

6. Navigate to User Interface -> CSS Resources
7. Edit extensions and add @import "carousel/roundabout.css"; to the bottom of the import list.

There is nothing called "extensions" under the CSS Resources tab. There is no "import list".

Am I supposed to edit a css file by adding the @import line??? Which css file???
There is already an "x-roundabout" css file with the path: themes/shadows/extensions/carousel/roundabout.css

Thanks for any input on setting this up.

[Matt Zimmermann]

Shadows ships with Roundabout enabled by default, so that step shouldn't be necessary.

[srmb]

Okay so how do I enable Roundabout then? I created the Readytheme content with links to the Readytheme images for the carousel. I added the Readytheme item code to the SFNT page replacing the static hero image coding. But the carousel does not display. Examining the page code, the display is set to "hidden". Looking at the carousel CSS is see: .x-carousel--is-loaded {visibility: visible;} so somehow it is not getting loaded so that it switches to "visible".

Also where can I learn about Roundabout? I saw nothing about it in the very limited Shadows documentation online. The only thing I found at all about this was in the Elements docs.

Thanks!

[Matt Zimmermann]

Did you add the JavaScript initialization to your theme.js file within the jsSFNT function:

$.loadScript(theme_path + 'extensions/carousel/roundabout.js', function () {
    $.hook('hero-carousel').roundabout();
});

In essence, Roundabout can convert a set of elements into a basic carousel. It does this by either creating groups or using single elements

[srmb]

Yes this is what I have (from the Elements doc):

jsSFNT: function() {
$.loadScript(theme_path + 'extensions/carousel/roundabout.js', function () {
$.hook('hero-carousel').roundabout({
autoStart: true
});
});
},

[Matt Zimmermann]

Can you post a link to the site?

[srmb]

It's a development site so it will be blocked by a username/password... but it's working now! I cleared the cached and refreshed the page a couple times and it seems to be working now. Can I edit the js file to control the speed etc of slides? Thank-you for your help.

[Matt Zimmermann]

Yes, you can modify the the speed though the initialization string:

 $.hook('hero-carousel').roundabout({
        autoStart: true,
        carouselDelay: 5000'
});

https://github.com/mivaecommerce/rea.../roundabout.js

[jsdva]

Shadows ships with Roundabout enabled by default, so that step shouldn't be necessary.

Stepping back in time here:

You say the roundabout is enabled by default. What files are the scripts/css in?

Is there a section in the Miva admin that contains the html?

All of the links I follow from the forum for the instructions to implement this go to pages not found. Got any helpful documentation that is not a Not Found page?

Thanks,

Jamie

[Matt Zimmermann]

Hi Jamie,

Is the site you are working on using Shadows v1 or v2? If it is on v2, Roundabout is no longer part of the code.

[jsdva]

Not sure. Came in after the inclusion of Shadows Readytheme. How can I tell which version of Shadows it is?

[Matt Zimmermann]

Hi Jamie,

If the site is using the version of Shadows included with Miva 10, then you are v2. If the site was using Shadows prior to Miva 10, then you are probably using v1. If you look at the frameworks in the administration portal, you can see which version you are using. Also, if you open the console for the front-end, you can enter mivaJS to see what version you are on.

[jsdva]

Yep. It is a v.2. Crap. Guess I'll look for another way.

Thanks for the help, Matt!

[jsdva]

Hi Jamie,

Is the site you are working on using Shadows v1 or v2? If it is on v2, Roundabout is no longer part of the code.

So....Matt, what would stop the shadows v.1 hero-slider found on this page https://docs.miva.com/readytheme-sha...ml#hero-slider from working on a shadows v2 site?

Tried it exactly as the instructions suggest, and it shows three images with the arrows at the top and bottom of the three images and the three images one above the other.

Seems like it should work.

Thanks,

Jamie

[Matt Zimmermann]

Hi Jamie,

Technically, if you add in all the CSS and JavaScript required for Roundabout, it should still work in a Shadows v2 site.