For full documentation on the Mobify Scooch, visit Github.


1. Select Your Images

First, open mobify.konf in your text editor and find the template that you want to put an image carousel on. Use the following sample carousel function as a basis to get you started.

...
'templateName': 'product',
'carousel': function(context) {
    var $images = $('#carousel img');

    return {
        'carouselClass': 'x-carousel',
        'images': $images.map(function(i, elem) {
            return {
                image: elem,
                alt: $(elem).attr('alt')
            }
        })
    };
},
...

Select: all the images needed for the carousel

  • e.g. var $images = $('#carousel img');

Return: an object to use in the template

  • 'carouselClass': a string to define the CSS class that identifies this carousel
  • 'images': a collection of objects, each with an image and alt text for this carousel

2. Display the Images In Your Template

In the corresponding template file, you will have to display the images you selected the Konf. Use the following example as a guideline.

{<main}
    {#content}
        <div class="{carouselClass} m-scooch">
            <div class="m-scooch-inner">
                {#images}
                    <div class="x-banner m-item">
                        {image}
                        <span>{alt}<span>
                    </div>
                {/images}
            </div>

            <div class="m-scooch-controls m-scooch-bulleted">
                <a href="#" class="m-control m-control-prev m-disabled" data-slide="prev">Previous</a>

                {#images}
                    <a href="#" class="m-dot" data-slide="{@count}{.}{/count}">{@count}{.}{/count}</a>
                {/images}

                <a href="#" class="m-control m-control-next" data-slide="next">Next</a>
            </div>
        </div>
    {/content}
{/main}

NOTE: The HTML structure is very important, especially the elements .m-scooch, .m-scooch-inner, .m-item - they are required for the module's JavaScript and CSS to work properly.


3. Initialize Scooch in JavaScript

In the scripts section of your template file, you will have to include the Scooch module and initialize it.

{<scripts}
    {_SUPER_}

    <!-- include the Mobify Scooch module -->
    <script src="//cdn.mobify.com/modules/scooch/0.3.3/scooch.min.js"></script>

    <!-- initialize Scooch -->
    {%script}
        (function($) {
            $('.m-scooch').scooch();
        })(Mobify.$);
    {/script}
{/scripts}

4. Add the Base CSS

In your CSS, you will need to add the base Scooch styles.

Download the Scooch CSS: Zip File

If you are using Compass/Sass, you will need to create a new Sass file for your styles. To do this, start by creating a new file at:

/src/scss/modules/_scooch.scss

And copy in the styles you want from the Scooch module.

Then, you need to make sure your new Sass file gets compiled into your project. Go into /src/scss/_modules.scss and add it there:

// Show content as multiple up blocks with margins
@import "modules/grid";

// Styles for Scooch
@import "modules/scooch";

Now, your Scooch CSS will be included into your project.

Last Edited