{"id":19692149,"url":"https://github.com/getgrav/grav-plugin-shortcode-owl-carousel","last_synced_at":"2026-05-05T16:01:44.460Z","repository":{"id":54132521,"uuid":"78799709","full_name":"getgrav/grav-plugin-shortcode-owl-carousel","owner":"getgrav","description":"Grav Shortcode Owl Carousel Plugin","archived":false,"fork":false,"pushed_at":"2021-03-12T20:55:10.000Z","size":133,"stargazers_count":11,"open_issues_count":11,"forks_count":12,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2025-04-19T07:43:00.261Z","etag":null,"topics":["carousel","grav","grav-plugin","owl-carousel"],"latest_commit_sha":null,"homepage":"https://getgrav.org","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/getgrav.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-13T00:29:48.000Z","updated_at":"2023-06-17T08:51:13.000Z","dependencies_parsed_at":"2022-08-13T07:10:39.516Z","dependency_job_id":null,"html_url":"https://github.com/getgrav/grav-plugin-shortcode-owl-carousel","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getgrav%2Fgrav-plugin-shortcode-owl-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getgrav%2Fgrav-plugin-shortcode-owl-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getgrav%2Fgrav-plugin-shortcode-owl-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getgrav%2Fgrav-plugin-shortcode-owl-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/getgrav","download_url":"https://codeload.github.com/getgrav/grav-plugin-shortcode-owl-carousel/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251159717,"owners_count":21545201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","grav","grav-plugin","owl-carousel"],"created_at":"2024-11-11T19:12:27.502Z","updated_at":"2026-05-05T16:01:41.605Z","avatar_url":"https://github.com/getgrav.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Grav Shortcode Owl Carousel Plugin\n\n![](assets/owl-carousel.jpg)\n\n## About\n\nThe **Shortcode Owl Carousel** plugin makes it trivial to create [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/) based sliders from within your page content. Owl Carousel provides a wide range of features and functionality that are directly accessible via shortcode attributes.  Features include:\n\n* Infinity Loop\n* Center item\n* Smart Speed\n* Stage Padding\n* Item Margin\n* Ability to make almost all options responsive\n* Various Widths\n* Callback Events\n* RTL\n* YouTube/Vimeo/vzaar support (fetching thumbnails as well)\n* Anchors navigation\n* Merged Items\n* and more...\n\n## Installation\n\nTypically a plugin should be installed via [GPM](http://learn.getgrav.org/advanced/grav-gpm) (Grav Package Manager):\n\n```\n$ bin/gpm install shortcode-owl-carousel\n```\n\nAlternatively it can be installed via the [Admin Plugin](http://learn.getgrav.org/admin-panel/plugins)\n\n\n## Basic Example\n\nThis is a basic example that shows off how you can easily turn 3 images into a slider:\n\n```\n[owl-carousel items=1 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=true]\n![](image-1.jpg?cropZoom=1024,300)\n![](image-2.jpg?cropZoom=1024,300)\n![](image-3.jpg?cropZoom=1024,300)\n[/owl-carousel]\n```\n\nIn this examaple, we are wrapping 3 markdown-syntax images with the `[owl-carousel][/owl-carousel]` shortcode tag.  Then we are adding shortcode attributes to set some Owl Carousel options. \n\n## Advanced Example\n\nEvery first-level HTML element that gets rendered between the shortcode tags, is treated as a slider item.  This can be images, or even HTML div elements that allow for more complex content.  \n\n```\n[owl-carousel items=2 margin=10 loop=true]\n\u003cdiv style=\"background: url({{ page.media['image-1.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;\"\u003e\n  \u003ch2\u003eThis is panel 1\u003c/h2\u003e\n  \u003cp\u003efoo\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv style=\"background: url({{ page.media['image-2.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;\"\u003e\n  \u003ch2\u003eThis is panel 2\u003c/h2\u003e\n  \u003cp\u003efoo\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv style=\"background: url({{ page.media['image-3.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;\"\u003e\n  \u003ch2\u003eThis is panel 3\u003c/h2\u003e\n  \u003cp\u003efoo\u003c/p\u003e\n\u003c/div\u003e\n[/owl-carousel]\n```\n\nIn this example, we put HTML div tags between the shortcode tags, and set the number of items to display to `2`, the margin between items to `10` and the loop option to `true`. We make use of Twig processing to dynamically add the URLs to the images that we are setting as the background of the divs.  Then inside of the divs, we have some HTML content.\n\n| Note: Markdown is not able to be processed within HTML tags, but you can use Twig if you enable Twig processing in the page frontmatter.\n\n## Owl Carousel Options\n\nOptions can be passed to Owl Carousel as attributes of the shortcode.  Numbers can be passed simply as `number=1`, booleans can be entered as `boolean=true`, and strings can be entered between quotes such as `string=\"foo\"` or `string='foo'`.\n\nThe options available are fully documented on the OWL Carousel site: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html, but a summary of the current ones appears below:\n\n### items\nType: **Number**\nDefault: `3`\n\nThe number of items you want to see on the screen.\n\n### margin\nType: **Number** \nDefault: `0`\n\nmargin-right(px) on item.\n\n### loop\nType: **Boolean** \nDefault: `false`\n\nInfinity loop. Duplicate last and first items to get loop illusion.\n\n### center\nType: **Boolean**\nDefault: `false`\n\nCenter item. Works well with even an odd number of items.\n\n### mouseDrag\nType: **Boolean** \nDefault: `true`\n\nMouse drag enabled.\n\n### touchDrag\nType: **Boolean** \nDefault: `true`\n\nTouch drag enabled.\n\n### pullDrag\nType: **Boolean** \nDefault: `true`\n\nStage pull to edge.\n\n### freeDrag\nType: **Boolean**\nDefault: `false`\n\nItem pull to edge.\n\n### stagePadding\nType: **Number** \nDefault: `0`\n\nPadding left and right on stage (can see neighbours).\n\n### merge\nType: **Boolean**\nDefault: `false`\n\nMerge items. Looking for data-merge='{number}' inside item..\n\n### mergeFit\nType: **Boolean** \nDefault: `true`\n\nFit merged items if screen is smaller than items value.\n\n### autoWidth\nType: **Boolean** \nDefault: `false`\n\nSet non grid content. Try using width style on divs.\n\n### startPosition\nType: **Number/String**\nDefault: `0`\n\nStart position or URL Hash string like '#id'.\n\n### URLhashListener\nType: **Boolean**\nDefault: `false`\n\nListen to url hash changes. data-hash on items is required.\n\n### nav\nType: **Boolean** \nDefault: `false`\n\nShow next/prev buttons.\n\n### rewind\nType: **Boolean** \nDefault: `true`\n\nGo backwards when the boundary has reached.\n\n### navText\nType: **Array** \nDefault: `[\u0026#x27;next\u0026#x27;,\u0026#x27;prev\u0026#x27;]`\n\nHTML allowed.\n\n### navElement\nType: **String** \nDefault: `div`\n\nDOM element type for a single directional navigation link.\n\n### slideBy\nType: **Number/String**\nDefault: `1`\n\nNavigation slide by x. 'page' string can be set to slide by page.\n\n### dots\nType: **Boolean** \nDefault: `true`\n\nShow dots navigation.\n\n### dotsEach\nType: **Number/Boolean** \nDefault: `false`\n\nShow dots each x item.\n\n### dotData\nType: **Boolean** \nDefault: `false`\n\nUsed by data-dot content.\n\n### lazyLoad\nType: **Boolean**\nDefault: `false`\n\nLazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not \u003cimg\u003e\n\n### lazyContent\nType: **Boolean** \nDefault: `false`\n\nlazyContent was introduced during beta tests but i removed it from the final release due to bad implementation. It is a nice options so i will work on it in the nearest feature.\n\n### autoplay\nType: **Boolean**\nDefault: `false`\n\nAutoplay.\n\n### autoplayTimeout\nType: **Number** \nDefault: `5000`\n\nAutoplay interval timeout.\n\n### autoplayHoverPause\nType: **Boolean**\nDefault: `false`\n\nPause on mouse hover.\n\n### smartSpeed\nType: **Number** \nDefault: `250`\n\nSpeed Calculate. More info to come..\n\n### fluidSpeed\nType: **Boolean**\nDefault: `Number`\n\nSpeed Calculate. More info to come..\n\n### autoplaySpeed\nType: **Number/Boolean**\nDefault: `false`\n\nautoplay speed.\n\n### navSpeed\nType: **Number/Boolean** \nDefault: `false`\n\nNavigation speed.\n\n### dotsSpeed\nType: **Boolean** \nDefault: `Number/Boolean`\n\nPagination speed.\n\n### dragEndSpeed\nType: **Number/Boolean**\nDefault: `false`\n\nDrag end speed.\n\n### callbacks\nType: **Boolean**\nDefault: `true`\n\nEnable callback events.\n\n### responsive\nType: **Object**\nDefault: `empty object`\n\nObject containing responsive options. Can be set to false to remove responsive capabilities.\n\n### responsiveRefreshRate\nType: **Number**\nDefault: `200`\n\nResponsive refresh rate.\n\n### responsiveBaseElement\nType: **DOM element**\nDefault: `window`\n\nSet on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing.\n\n### video\nType: **Boolean**\nDefault: `false`\n\nEnable fetching YouTube/Vimeo/Vzaar videos.\n\n### videoHeight\nType: **Number/Boolean** \nDefault: `false`\n\nSet height for videos.\n\n### videoWidth\nType: **Number/Boolean**\nDefault: `false`\n\nSet width for videos.\n\n### animateOut\nType: **String/Boolean**\nDefault: `false`\n\nClass for CSS3 animation out.\n\n### animateInClass\nType: **String/Boolean** \nDefault: `false`\n\nClass for CSS3 animation in.\n\n### fallbackEasing\nType: **String**\nDefault: `swing`\n\nEasing for CSS2 $.animate.\n\n### info\nType: **Function**\nDefault: `false`\n\nCallback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.\n\n### nestedItemSelector\nType: **String/Class** \nDefault: `false`\n\nUse it if owl items are deep nested inside some generated content. E.g 'youritem'. Don't use dot before class name.\n\n### itemElement\nType: **String** \nDefault: `div`\n\nDOM element type for owl-item.\n\n### stageElement\nType: **String**\nDefault: `div`\n\nDOM element type for owl-stage.\n\n### navContainer\nType: **String/Class/ID/Boolean**\nDefault: `false`\n\nSet your own container for nav.\n\n### dotsContainer\nType: **String/Class/ID/Boolean** \nDefault: `false`\n\nSet your own container for nav.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetgrav%2Fgrav-plugin-shortcode-owl-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgetgrav%2Fgrav-plugin-shortcode-owl-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetgrav%2Fgrav-plugin-shortcode-owl-carousel/lists"}