{
    "title": "Content Carousel Plugin",
    "label": "Content Carousel",
    "description": "Use the content carousel plugin to add html elements in an interactive carousel.",
    "image": "2.galleries\/1.landscapes\/hills.jpg",
    "content": "---\n\n<!-- content slider. More info: https:\/\/demo.imagevuex.com\/examples\/plugins\/carousel\/ -->\n<div data-carousel data-carousel-items=3 data-carousel-loop=true data-carousel-dots=true data-carousel-autoplay=3000 data-carousel-responsive=true data-carousel-shuffle=false class=\"text-center\">\n<div><h3>Camel<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f42b.svg\" \/><\/div>\n<div><h3>Fish<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f41f.svg\" \/><\/div>\n<div><h3>Squirrel<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f43f.svg\" \/><\/div>\n<div><h3>Goat<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f410.svg\" \/><\/div>\n<div><h3>Elephant<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f418.svg\" \/><\/div>\n<div><h3>Ox<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f402.svg\" \/><\/div>\n<div><h3>Whale<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f433.svg\" \/><\/div>\n<div><h3>Blowfish<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f421.svg\" \/><\/div>\n<div><h3>Turtle<\/h3><img src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/emojione\/2.2.6\/assets\/svg\/1f422.svg\" \/><\/div>\n<\/div>\n\n---\n\n## Instructions\nTo use the content carousel plugin,  wrap your elements inside a tag with `data-carousel` attribute.\n<pre data-lang=\"html\"><code><div data-carousel><br>\n<div>item<\/div><br>\n<div>item<\/div><br>\n<div>item<\/div><br>\n<\/div><\/code><\/pre>\n\n***Warning!*** The carousel is an advanced plugin, which requires editing html code. The carousel is not styled by default, and only provides the mechanics for the carousel function. If you want to create specific styles on elements, you will need to use custom CSS.\n\n\n## Options\n`data-carousel`  \nActivates the carousel for the element that contains child elements.\n\n`data-carousel-items=3`  \nSet how many items to display in a single slide. *Default 1*\n\n`data-carousel-loop=true`  \nSet the carousel to loop\n\n`data-carousel-dots=true`  \nDisplay dot-navigation below the carousel\n\n`data-carousel-autoplay=3000`  \nSets the autoplay interval in *milliseconds*. Set to *false* to disable autoplay.\n\n`data-responsive=false`  \nDisable automatic responsive layout, with less items visible on smaller devices.\n\n`data-attach=[header,content,footer]`  \nUse this option if you want to attach the carousel into the header, before the content or above the footer. By default, the carousel will display in your content, where you add it.\n\n`data-carousel-selector=\"class\"`  \nSet a class name if you want the carousel to target specific child elements, excluding othere.\n\n`data-carousel-shuffle`  \nShuffle order of child elements inside the carousel.\n\n## All Options\n<pre data-lang=\"html\"><code><div data-carousel data-carousel-items=3,2,1 data-carousel-loop=true data-carousel-dots=true data-carousel-autoplay=3000 data-responsive=false data-attach=[header,content,footer] data-carousel-selector=\"class\" data-carousel-shuffle><br>\n<div>item 1<\/div><br>\n<div>item 2<\/div><br>\n<!-- Add as many elements as you require --><br>\n<\/div><\/code><\/pre>\n\n### Example of carousel attached to footer:\n\n<div data-carousel data-carousel-shuffle=true data-carousel-items=1 data-carousel-attach=footer data-carousel-autoplay=3000 style=\"background: rgba(0,0,0,.03); padding: 2em 0; font-size:1.4em;\" class=\"text-center\">\n<blockquote >\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lorem lorem.\n  <cite>Isaac Asimove<\/cite>\n<\/blockquote>\n<blockquote >\n  Nam lectus enim, feugiat a consequat in, faucibus sit amet felis.\n  <cite>Albert Feinstein<\/cite>\n<\/blockquote>\n<blockquote>\n  Vestibulum nec felis pellentesque, pretium sem non, maximus purus.\n  <cite>General Custard<\/cite>\n<\/blockquote>\n<blockquote >\n  Nulla dignissim congue consequat.\n  <cite>John Wayne<\/cite>\n<\/blockquote>\n<blockquote >\n  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.\n  <cite>Albert Broccoli<\/cite>\n\t<\/blockquote>\n<blockquote >\n  Nunc viverra eros diam, nec convallis odio pretium laoreet.\n  <cite>Mr. Dobalina<\/cite>\n<\/blockquote>\n<\/div>",
    "gallery": {
        "items": "title,preview",
        "layout": "grid",
        "grid": {
            "use_width": true,
            "column_width": 200
        },
        "sortby": "custom"
    }
}