{"id":213,"date":"2026-03-03T20:02:27","date_gmt":"2026-03-03T19:02:27","guid":{"rendered":"https:\/\/baqueiro.es\/store\/?post_type=baqueiro_plugin&#038;p=213"},"modified":"2026-07-17T14:00:20","modified_gmt":"2026-07-17T12:00:20","slug":"b-elementor-pretty-gallery","status":"publish","type":"baqueiro_plugin","link":"https:\/\/baqueiro.es\/store\/plugins\/b-elementor-pretty-gallery\/","title":{"rendered":"[B] Pretty Gallery \u2014 Swiper Gallery with Vertical Thumbnails for Elementor"},"content":{"rendered":"<section class=\"bq-hero\">\n<h1>The Gallery Widget Elementor Should Have Shipped With.<\/h1>\n<p class=\"lead\">Elementor&#8217;s built-in gallery widgets are grids and carousels. They don&#8217;t give you a large main image paired with a strip of clickable thumbnails \u2014 the layout that product pages, portfolios, real estate listings, and vehicle details actually need. <strong>[B] Pretty Gallery<\/strong> fills that gap: a Swiper-powered gallery with a prominent main image on the left, a vertical thumbnail column on the right, and four transition effects to choose from \u2014 all styled directly inside Elementor.<\/p>\n<\/section>\n<section class=\"bq-problem\">\n<h2>The Layout Problem No Native Widget Solves<\/h2>\n<p>The main image + vertical thumbnails layout is everywhere online. It&#8217;s the standard for e-commerce product images, property photo galleries, portfolio showcases, and vehicle listings. Visitors expect to click a thumbnail and see the full image update instantly. Elementor Pro doesn&#8217;t offer this natively.<\/p>\n<p>The workarounds are all awkward. Lightbox galleries show thumbnails below the image in a strip, not beside it. Slider widgets have no thumbnail navigation. Custom CSS hacks on Elementor&#8217;s carousel break in Elementor&#8217;s editor. Third-party gallery plugins bring their own styling pipeline that conflicts with the rest of the Elementor build.<\/p>\n<\/section>\n<section class=\"bq-solution\">\n<h2>Main Image + Vertical Thumbnails, Responsive, Four Effects<\/h2>\n<p><strong>[B] Pretty Gallery<\/strong> renders a two-column layout: the main image takes up 80% of the width, the thumbnail column takes the remaining 20%. On desktop, thumbnails stack vertically and scroll if there are more than the configured row count. On mobile, the layout collapses to a single column with a horizontal scrolling thumbnail strip below the main image \u2014 no configuration needed, it&#8217;s built into the responsive CSS.<\/p>\n<p>The gallery is powered by Swiper.js, which ships with Elementor and is loaded as a registered dependency \u2014 no extra HTTP requests, no library conflicts. The main swiper and thumbnail swiper are linked: clicking a thumbnail jumps to the corresponding slide, and advancing through slides scrolls the thumbnail column to keep the active thumb in view.<\/p>\n<p>Four transition effects are available from the Content tab: Slide (default), Fade, Cube 3D (with shadow and depth), and Coverflow. Transition speed, autoplay delay, pause-on-hover, and loop are all configurable. Arrow navigation buttons are built in with full style controls, with an option to hide them on mobile.<\/p>\n<\/section>\n<section class=\"bq-bullets\">\n<h2>Everything That&#8217;s In It<\/h2>\n<ul>\n<li><strong>Two image sources<\/strong> \u2014 manual selection via Elementor&#8217;s Gallery control, or automatic pull of all image attachments from the current post. The post attachments mode is the key feature for property listings, vehicle details, or any CPT where images are attached to the post.<\/li>\n<li><strong>Four Swiper transition effects<\/strong> \u2014 Slide, Fade (crossFade), Cube 3D (with shadow and perspective), and Coverflow (with rotation). Configurable per widget instance.<\/li>\n<li><strong>Vertical thumbnails on desktop, horizontal strip on mobile<\/strong> \u2014 responsive layout built into the CSS. No breakpoint configuration needed. Thumbnail row count (how many are visible before scrolling) is configurable.<\/li>\n<li><strong>Autoplay with pause-on-hover<\/strong> \u2014 autoplay delay and pause-on-hover are independent toggles. Cube effect disables loop automatically to avoid Swiper compatibility issues.<\/li>\n<li><strong>Lazy loading on every image<\/strong> \u2014 all main and thumbnail images use <code>loading=\"lazy\"<\/code> and <code>decoding=\"async\"<\/code> attributes. The gallery does not block page load on sites with large image sets.<\/li>\n<li><strong>Keyboard and accessibility-ready<\/strong> \u2014 thumbnail buttons respond to Enter and Space keys. Arrow buttons have <code>aria-label<\/code> attributes. The main carousel has <code>aria-roledescription=\"carousel\"<\/code>. The thumbnail container has an <code>aria-label<\/code>.<\/li>\n<li><strong>Fully styled inside Elementor<\/strong> \u2014 wrapper gap, max width\/height, background, border, box shadow; main image max width\/height, object-fit, object-position, shadow; thumbnail spacing and shadow; arrow size, colour, background, shadow. All from the Style tab.<\/li>\n<\/ul>\n<\/section>\n<section class=\"bq-attachments\">\n<h2>The Post Attachments Mode<\/h2>\n<p>For agencies building property portals, vehicle catalogues, or any CPT-based directory: set the image source to &#8220;Post Attachments&#8221; and the gallery automatically pulls all images attached to the current post, ordered by menu order then ID. No manual gallery selection per post. Upload images to the post, and the gallery widget on the single post template shows them all.<\/p>\n<p>This means one widget configuration on the Elementor template serves every post in the CPT. Update the images on the post, the gallery updates automatically \u2014 no Elementor editing required after the initial template setup.<\/p>\n<\/section>\n<section class=\"bq-guarantee\">\n<h2>Our Guarantee<\/h2>\n<p>Built by a senior developer with 18+ years of experience using Elementor&#8217;s official widget API and Swiper&#8217;s documented thumbs integration. If it does not work as described on your Elementor site, you get your money back.<\/p>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>A Swiper-powered gallery widget for Elementor with a large main image, vertical clickable thumbnails, four transition effects (Slide, Fade, Cube 3D, Coverflow), autoplay, loop, and lazy-loading. Thumbnails flip to a horizontal scroll strip on mobile. Two image sources: manual selection or auto-pulled from post attachments.<\/p>\n","protected":false},"featured_media":251,"template":"","plugin_category":[38,95,96],"use_case":[75,88,78,98,97],"license_type":[71],"compatibility":[92,91,99,90,93],"class_list":["post-213","baqueiro_plugin","type-baqueiro_plugin","status-publish","has-post-thumbnail","hentry","plugin_category-elementor","plugin_category-gallery","plugin_category-media","use_case-agencies","use_case-developers","use_case-e-commerce","use_case-portfolio","use_case-real-estate","license_type-commercial","compatibility-acf","compatibility-custom-post-types","compatibility-elementor-free","compatibility-elementor-pro","compatibility-metabox"],"_links":{"self":[{"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/baqueiro_plugin\/213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/baqueiro_plugin"}],"about":[{"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/types\/baqueiro_plugin"}],"version-history":[{"count":1,"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/baqueiro_plugin\/213\/revisions"}],"predecessor-version":[{"id":221,"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/baqueiro_plugin\/213\/revisions\/221"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/media\/251"}],"wp:attachment":[{"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/plugin_category?post=213"},{"taxonomy":"use_case","embeddable":true,"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/use_case?post=213"},{"taxonomy":"license_type","embeddable":true,"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/license_type?post=213"},{"taxonomy":"compatibility","embeddable":true,"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/compatibility?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}