Announcement

Collapse
No announcement yet.

Hero Carousel CSS Resources

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

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


  • Shadows ships with Roundabout enabled by default, so that step shouldn't be necessary.
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


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

      Comment


      • 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
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


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

          Comment


          • Can you post a link to the site?
            Matt Zimmermann
            Director of UI/UX Standards and Theme Development
            / Miva, Inc.

            Comment


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

              Comment


              • 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
                Matt Zimmermann
                Director of UI/UX Standards and Theme Development
                / Miva, Inc.

                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