{"id":1047,"date":"2016-12-03T10:22:02","date_gmt":"2016-12-03T10:22:02","guid":{"rendered":"https:\/\/ampforwp.com\/?p=1047"},"modified":"2020-04-11T08:20:51","modified_gmt":"2020-04-11T08:20:51","slug":"add-image-gallery-carousel-in-amp-version","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/add-image-gallery-carousel-in-amp-version\/","title":{"rendered":"How to Add Image Gallery Carousel in AMP Version"},"content":{"rendered":"<p style=\"text-align: justify;\">WordPress has a simple way to create Image Gallery. You can easily create a gallery with images in the media library or upload new images. And WordPress gallery is user and mobile friendly. Now Accelerated Mobile Pages also supports Image Gallery Carousel in unique Eye Catching way. In this Mini Guide Let us see How to Add Image Gallery Carousel in AMP Version.<\/p>\n<h3>Adding Image Gallery Carousel in AMP Version<\/h3>\n<p><strong>Follow the simple steps:<\/strong><\/p>\n<p><span style=\"color: #800000;\"><strong>Step 1 &#8211;<\/strong> <\/span>&nbsp;First, Go to&nbsp; <strong>WordPress Admin Panel<\/strong> <strong>\u2013&gt;<\/strong> Create <strong>Now Post<\/strong> \/ <strong>Page &#8211;&gt; <\/strong>Click on<strong> Add Media.<\/strong><\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/post-addnew.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6925\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/post-addnew.png\" alt=\"\" width=\"753\" height=\"380\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/post-addnew.png 753w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/post-addnew-300x151.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/post-addnew-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/post-addnew-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/post-addnew-100x50.png 100w\" sizes=\"(max-width: 753px) 100vw, 753px\" \/><\/a><\/p>\n<p><strong><span style=\"color: #800000;\">Step 2 &#8211;<\/span><\/strong>&nbsp;Next, Click on the Add Media.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/add-media.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6927\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/add-media.png\" alt=\"\" width=\"879\" height=\"266\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/add-media.png 879w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/add-media-300x91.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/add-media-768x232.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/add-media-50x15.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/add-media-60x18.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/add-media-100x30.png 100w\" sizes=\"(max-width: 879px) 100vw, 879px\" \/><\/a><\/p>\n<p><strong><span style=\"color: #800000;\">Step 3 &#8211; <\/span>&nbsp;<\/strong>Click on the <strong>Create Gallary<\/strong> option and Existing Images or Upload New Images &#8211;&gt; Click on Create a new gallery.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/create-gallary.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6930\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/create-gallary.png\" alt=\"\" width=\"1314\" height=\"567\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/create-gallary.png 1314w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/create-gallary-300x129.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/create-gallary-768x331.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/create-gallary-1024x442.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/create-gallary-50x22.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/create-gallary-60x26.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/create-gallary-100x43.png 100w\" sizes=\"(max-width: 1314px) 100vw, 1314px\" \/><\/a><\/p>\n<p><strong><span style=\"color: #800000;\">Step 4 &#8211;<\/span><\/strong>&nbsp;After that click on <strong>Insert gallery button<\/strong> &#8211;&gt;<strong>Publish<\/strong>.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/insert-gallery.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6932\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/insert-gallery.png\" alt=\"\" width=\"1308\" height=\"570\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/insert-gallery.png 1308w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/insert-gallery-300x131.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/insert-gallery-768x335.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/insert-gallery-1024x446.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/insert-gallery-50x22.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/insert-gallery-60x26.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/insert-gallery-100x44.png 100w\" sizes=\"(max-width: 1308px) 100vw, 1308px\" \/><\/a><\/p>\n<p><strong><span style=\"color: #800000;\">Step 5 &#8211;<\/span>&nbsp;<\/strong>Successfully Image Gallery Carousel created.<\/p>\n<h4>In AMP we have Three&nbsp;Gallery Designs.<\/h4>\n<ol>\n<li><strong>Carousel<\/strong><\/li>\n<li><strong>Carousel with Thumbnail<\/strong><\/li>\n<li><strong>Grid With Lightbox<\/strong><\/li>\n<\/ol>\n<p>First Go to <strong>WordPress admin area -&gt; AMP option panel -&gt;Design -&gt;Single.<\/strong><\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/14.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-16651 aligncenter\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/14.png\" alt=\"\" width=\"391\" height=\"379\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/14.png 391w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/14-300x291.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/14-50x48.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/14-60x58.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/14-100x97.png 100w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><\/a><\/p>\n<p>Next, Scroll down you can see this option<strong> WordPress Content Gallery.<\/strong><\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6943\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design.png\" alt=\"\" width=\"914\" height=\"283\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design.png 914w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design-300x93.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design-768x238.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design-50x15.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design-60x19.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design-100x31.png 100w\" sizes=\"(max-width: 914px) 100vw, 914px\" \/><\/a><\/p>\n<ul>\n<li><strong>Select Gallery Designs:<\/strong> In this option, you can select the design which you want to use in the AMP version.<\/li>\n<li><strong>Lightbox for Gallary:<\/strong> If you enable this option lightbox will be displayed in AMP.<\/li>\n<\/ul>\n<p><strong>The Output of Carousel in AMP<\/strong><\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design1-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6959\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design1-1.png\" alt=\"\" width=\"1276\" height=\"586\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design1-1.png 1276w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design1-1-300x138.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design1-1-768x353.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design1-1-1024x470.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design1-1-50x23.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design1-1-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design1-1-100x46.png 100w\" sizes=\"(max-width: 1276px) 100vw, 1276px\" \/><\/a><\/p>\n<p><strong>The Output of Carousel with Thumbnail<\/strong><\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/photo_2019-04-16_19-16-41.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6955\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/photo_2019-04-16_19-16-41.jpg\" alt=\"\" width=\"1259\" height=\"612\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/photo_2019-04-16_19-16-41.jpg 1259w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/photo_2019-04-16_19-16-41-300x146.jpg 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/photo_2019-04-16_19-16-41-768x373.jpg 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/photo_2019-04-16_19-16-41-1024x498.jpg 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/photo_2019-04-16_19-16-41-50x24.jpg 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/photo_2019-04-16_19-16-41-60x29.jpg 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/photo_2019-04-16_19-16-41-100x49.jpg 100w\" sizes=\"(max-width: 1259px) 100vw, 1259px\" \/><\/a><\/p>\n<p><strong>The Output of Grid With Lightbox<\/strong><\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design3-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6960\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design3-1.png\" alt=\"\" width=\"1351\" height=\"589\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design3-1.png 1351w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design3-1-300x131.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design3-1-768x335.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design3-1-1024x446.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design3-1-50x22.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design3-1-60x26.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2016\/12\/design3-1-100x44.png 100w\" sizes=\"(max-width: 1351px) 100vw, 1351px\" \/><\/a><\/p>\n<div>\n<p style=\"background-color: #ffdddd; border-left: 2px solid #f44336; padding:10px;\"><strong>Note:<\/strong> The Image Gallery Carousel only works in the <strong>Swift theme<\/strong><\/p>\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n<\/div>\n<div>\n<div class=\"hkb-article__content\">\n<div class=\"hkb-article__content\">\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>WordPress has a simple way to create Image Gallery. You can easily create a gallery with images in the media library or upload new images. And WordPress gallery is user and mobile friendly. Now Accelerated Mobile Pages also supports Image Gallery Carousel in unique Eye Catching way. In this Mini&#8230;<\/p>\n","protected":false},"author":16,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[75],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/1047"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=1047"}],"version-history":[{"count":31,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/1047\/revisions"}],"predecessor-version":[{"id":17128,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/1047\/revisions\/17128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=1047"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=1047"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=1047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}