Announcement

Collapse
No announcement yet.

Hero Carousel CSS Resources

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • srmb
    started a topic Hero Carousel CSS Resources

    Hero Carousel CSS Resources

    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
    replied
    Yes, you can modify the the speed though the initialization string:
    Code:
     $.hook('hero-carousel').roundabout({
            autoStart: true,
            carouselDelay: 5000'
    });
    https://github.com/mivaecommerce/rea.../roundabout.js

    Leave a comment:


  • srmb
    replied
    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.

    Leave a comment:


  • Matt Zimmermann
    replied
    Can you post a link to the site?

    Leave a comment:


  • srmb
    replied
    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
    });
    });
    },

    Leave a comment:


  • Matt Zimmermann
    replied
    Did you add the JavaScript initialization to your theme.js file within the jsSFNT function:
    Code:
    $.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

    Leave a comment:


  • srmb
    replied
    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!

    Leave a comment:


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

    Leave a comment:

Working...
X

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept