• Jun 26, 2018
  • Mura CMS, Mura Development, Mura Modules

When getting started with the Festival Napa Valley project, it was very evident that the site would heavily depend on collections of content and rely on visuals to tell their story.

Early on we decided to use Owl Carousel wherever a carousel was going to be used. The reason for this is that I've used Owl many times before and found it to be very flexible in controlling the layout and features of the carousel.

Up until this point, I had modified modules in Mura 7 here and there to add an option or two but not to the extent in which I was about to in this particular case. As someone who tries to make content editing as easy as possible for site editors by eliminating the need for editors to touch code in any way the frontend editor and module configurator, in particular, in Mura 7 makes this goal easier than ever.

Getting started
To get started, I created a "collection" folder in my theme's display_objects folder (in Mura 7.1 this would be the "modules" folder in your theme or site root folder). Inside the "colllection" folder I created a folder called "layouts". This mimics the directory structure of the default collection folder, nothing new here. Within "layouts" folder is where the fun begins to happen. I created an "owlcarousel" folder which contains an index.cfm file that contains all the logic of what should happen when the "Owl Carousel" layout is selected from the "Layout" dropdown menu in the Collection configurator. The configurator.cfm file contains all the configurable options for the module.

Carousel Name: This option is important as it becomes the "ID" of the carousel so more than one carousel can be added to a page with their own set of configurable options.

Margin: Sets the margin in between carousel items.

Slide By: Sets if clicking on paging or dots (if either is visible) should move the carousel by page size or by X number of items.

Loop: Whether or not the carousel should loop when it reaches the beginning or end of the content.

NavRewind: Sets whether or not the carousel should rewind to the beginning of the content when the end has been reached.

Theme: CSS theme selection to apply to the carousel. This can have wide-ranging effects on the carousel from how the navigation is displayed to layout of the carousel. I do have some conditional logic inside the index.cfm file that makes some structural changes or content calls based on the selected theme.

Items: The number of items to be displayed at each available Bootstrap 3.x breakpoint (xs, sm, md and lg).

Nav: True/False to show navigation or not. This setting is responsive so it can be turned on or off at specific breakpoints.

Dots: True/False to show dots or not. This setting is responsive so it can be turned on or off at specific breakpoints.

Loop: True/False to loop or not. This setting is responsive so it can be turned on or off at specific breakpoints.

Sample Output:

Interested In Working Together?

Fill out the form below and I’ll be in touch within one business day.