{"id":758,"date":"2025-03-25T04:03:48","date_gmt":"2025-03-25T04:03:48","guid":{"rendered":"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/"},"modified":"2025-06-19T07:05:20","modified_gmt":"2025-06-19T07:05:20","slug":"image-box-slider","status":"publish","type":"docs","link":"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/","title":{"rendered":"Image Box Slider Widget Documentation"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Before setting up the<strong> Image Box Slider Widget,<\/strong> ensure that the <strong>Animation Addons<\/strong> for <strong>Elementor <\/strong>plugin is <strong>installed <\/strong>and <strong>activated <\/strong>on your site. Once activated, you\u2019ll get access to all free Elementor widgets, including the <strong>Image Box Slider Widget<\/strong>\u2014completely free! You can also filter between free and pro widgets for easier access.<br><\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1088\" height=\"615\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard.webp\" alt=\"Dashboard\" class=\"wp-image-15093\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard.webp 1088w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-300x170.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-1024x579.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-768x434.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-20x11.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-32x18.webp 32w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/Dashboard-270x152.webp 270w\" sizes=\"(max-width: 1088px) 100vw, 1088px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Key Use Cases for the Image Box Slider Widget in Elementor:<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Image Box Slider Widget displays multiple image boxes in a smooth slider, ideal for showcasing features or visual content.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Showcase multiple image boxes in a sleek, scrollable slider layout.<\/li>\n\n\n\n<li>Enhance visual storytelling with images, titles, and descriptions in a compact format.<\/li>\n\n\n\n<li>Customize styling and animation to match your website\u2019s design and improve user engagement.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Prerequisite<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Elementor<\/li>\n\n\n\n<li>Animation Addons for Elementor<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to Activate the Image Box Slider Widget<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to <strong>Animation Addons \u2192 Elements<\/strong> in your WordPress dashboard.<\/li>\n\n\n\n<li>Locate the <strong>Image Box Slider<\/strong> widget in the list.<\/li>\n\n\n\n<li>Toggle the switch to <strong>enable<\/strong> the widget.<\/li>\n\n\n\n<li>The <strong>Image Box Slider Widget<\/strong> is now ready to use in your Elementor editor.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1085\" height=\"569\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider.webp\" alt=\"Image Box Slider 1\" class=\"wp-image-15095\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider.webp 1085w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-300x157.webp 300w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-1024x537.webp 1024w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-768x403.webp 768w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-20x10.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-32x17.webp 32w\" sizes=\"(max-width: 1085px) 100vw, 1085px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to Add Image Box Slider Widget<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Enable the widget, create a new page, set a title, choose the <strong>Elementor Full Width<\/strong> template, and publish the page.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adjust page settings as needed.<\/li>\n\n\n\n<li>In the Elementor panel, search for <strong>&#8220;Image Box Slider Widget.&#8221;<\/strong><\/li>\n\n\n\n<li>Drag and drop the widget into your desired section.<\/li>\n\n\n\n<li>The slider will display image boxes automatically. You can then customize the content, layout, navigation, and styling to match your design preferences.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Image Box Slider Widget: A Step-by-Step Guide<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once the Image Box Slider Widget is added to your page, you can configure its settings under different tabs: <strong>Content, Style, <\/strong>and <strong>Advanced.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"283\" height=\"376\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-2.webp\" alt=\"Image Box Slider\" class=\"wp-image-15096\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-2.webp 283w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-2-226x300.webp 226w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-2-15x20.webp 15w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-2-24x32.webp 24w\" sizes=\"(max-width: 283px) 100vw, 283px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Content Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the <strong>Image Box Slider Widget\u2019s <\/strong>content section, you will get two options like <strong>layout <\/strong>and <strong>slider <\/strong>option.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"309\" height=\"372\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-3.webp\" alt=\"Image Box Slider 3\" class=\"wp-image-15097\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-3.webp 309w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-3-249x300.webp 249w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-3-17x20.webp 17w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-3-27x32.webp 27w\" sizes=\"(max-width: 309px) 100vw, 309px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Layout<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Layout Styles (Five Different Styles)<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Image Box Slider offers five layout styles for flexible and dynamic presentation of images and text.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Style 1<\/strong>: A basic image box slider with an image, title, subtitle, description, and link.<\/li>\n\n\n\n<li><strong>Style 2<\/strong>: Features an image with a more prominent title and description with a link.<\/li>\n\n\n\n<li><strong>Style 3<\/strong>: Focuses on image-centric presentation with minimal text.<\/li>\n\n\n\n<li><strong>Style 4<\/strong>: Includes an image and an icon next to the text elements for added emphasis.<\/li>\n\n\n\n<li><strong>Style 5<\/strong>: Allows for a more compact design where elements are stacked for better readability on mobile devices.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Item 1: Configuration Options: <\/strong>In <strong>Item 1<\/strong>, users can customize the following settings:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image Setup<\/strong>: Upload and position an image to be displayed in the slider.<\/li>\n\n\n\n<li><strong>Title<\/strong>: Set a title for the item. The title can be customized with an HTML tag (e.g., &lt;h1&gt;, &lt;h2&gt;, etc.) to define its importance.<\/li>\n\n\n\n<li><strong>Subtitle<\/strong>: A secondary title or description that provides additional context.\n<ul class=\"wp-block-list\">\n<li><strong>Subtitle Position<\/strong>: You can control whether the subtitle appears above, below, or beside the image.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Description<\/strong>: A brief description that provides more details about the image.<\/li>\n\n\n\n<li><strong>Link<\/strong>: Add a clickable link to each item in the slider that directs users to more information or a different page.<\/li>\n\n\n\n<li>Each layout is fully responsive and can be adjusted for various screen sizes to ensure optimal display across all devices.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Image Resolution (Seven Different Styles)<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Image Box Slider<\/strong> widget supports seven different image resolution styles. These options enable you to adjust the image quality based on the visual needs and load time requirements of your website:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Resolution Options<\/strong>:<br>\n<ol class=\"wp-block-list\">\n<li>Low resolution<\/li>\n\n\n\n<li>Medium-low resolution<\/li>\n\n\n\n<li>Medium resolution<\/li>\n\n\n\n<li>High resolution<\/li>\n\n\n\n<li>Very high resolution<\/li>\n\n\n\n<li>Ultra-high resolution &amp;<\/li>\n\n\n\n<li>Custom resolution (user-defined)<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These options ensure that images load quickly without compromising too much on quality, thus improving both the user experience and SEO performance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Direction<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The direction setting controls the flow of the slider. You can choose from:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Horizontal<\/strong>: The slider moves left to right or right to left.<\/li>\n\n\n\n<li><strong>Vertical<\/strong>: The slider moves from top to bottom or bottom to top.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The direction setting allows for the creation of dynamic visual effects tailored to the website\u2019s design and user interaction goals.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Gap<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option controls the space between the image boxes in the slider. You can set the gap to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Small<\/strong><strong><br><\/strong><strong>Medium<\/strong><\/li>\n\n\n\n<li><strong>Large<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Adjusting the gap helps maintain a clean and balanced layout, enhancing the visual flow and user engagement.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Link Type<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Link Type<\/strong> setting defines how the link behaves when clicked:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>External URL<\/strong>: Opens an external website or page in a new tab.<\/li>\n\n\n\n<li><strong>Internal Link<\/strong>: Links to another page or section within the same website.<\/li>\n\n\n\n<li><strong>No Link<\/strong>: The item does not have a clickable link, providing a purely visual effect.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This flexibility allows users to choose whether they want their image box slider to drive traffic externally or simply enhance user interaction within the site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>6. Alignment<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option allows for precise control over how the text and images are aligned within each image box:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Left Alignment<\/strong>: Text and elements are aligned to the left side of the box.<\/li>\n\n\n\n<li><strong>Center Alignment<\/strong>: Text and elements are centered within the box.<\/li>\n\n\n\n<li><strong>Right Alignment<\/strong>: Text and elements are aligned to the right side of the box.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Alignment ensures that content is placed in the desired manner, creating a polished and professional look.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>7. Icon<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Icon option lets you add pre-designed or custom icons to enhance the design and highlight features in the slider.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Slider Option<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Below is a detailed explanation of each option, covering how they look, function, and the effects of changing their settings-<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Sliders to Show<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting defines how many image boxes are visible at a time in the slider. You can specify the number of slides shown in the viewport. This helps tailor the layout to fit different screen sizes or content needs.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Adjusting this number will determine how many image boxes are visible on-screen, allowing for a customized display of content.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Autoplay<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">When enabled, the slider will automatically move through the images after a defined delay. It\u2019s ideal for creating an automated slideshow experience.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: When activated, images will transition automatically without user interaction, offering a more hands-off display.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Turning this on makes the slider self-running, providing a seamless experience for viewers.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Autoplay Delay<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option allows you to set the time delay (in milliseconds) between each slide transition during autoplay.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: You can control the speed of the slider\u2019s movement by adjusting the delay between images.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing the delay results in slower transitions; decreasing it makes the transition faster.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Autoplay Interaction<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting determines whether the autoplay feature is paused when the user interacts with the slider (mouse hover or touch).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: When enabled, autoplay will pause if a user interacts with the slider, ensuring they can engage with the content without interruption.<\/li>\n\n\n\n<li><strong>Change<\/strong>: If disabled, autoplay will continue regardless of user interaction.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Allow Touch Move<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This feature enables touch swipe functionality on mobile devices. Users can swipe left or right to navigate between slides.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: On touch-enabled devices, users can swipe through slides, providing a mobile-friendly, interactive experience.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Enabling this feature allows for more intuitive navigation on mobile devices.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>6. Loop<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When activated, the slider will loop back to the first slide after reaching the last one, creating a continuous cycling effect.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The slider will start from the first slide once it reaches the last, creating an endless loop of content.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Disabling this feature will stop the slider once it reaches the last slide.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>7. Mousewheel<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option allows users to navigate through the slides using the mouse wheel.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Scrolling the mouse wheel up or down will move the slider between slides.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Enabling this feature adds another method of navigation, enhancing usability.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>8. Animation Speed<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting controls how quickly the transition between slides occurs. You can set the speed of the animation in milliseconds.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: A faster animation speed makes transitions quicker, while a slower speed provides smoother, more gradual changes between slides.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Adjusting the animation speed alters the visual flow of the slider.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>9. Space Between<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option sets the amount of space between each slide in the slider.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Increasing the space between slides will create a more separated layout, while reducing the space will bring the slides closer together.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Adjusting this space affects the visual density of the slider and can be used to create more compact or spacious designs.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>10. Navigation<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This feature allows for customizable navigation controls (previous and next arrows) to move through the slides.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Navigation arrows appear on either side of the slider, providing users with the ability to manually control the slider.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Enabling navigation arrows adds interactivity, while disabling them makes the slider auto-play or swipe-based only.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>11. Previous Arrow Icon<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option lets you choose or upload a custom icon for the previous slide navigation arrow.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The arrow icon will appear on the left side of the slider to move to the previous slide.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Customizing the icon allows for design consistency with the website&#8217;s theme.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>12. Next Arrow Icon<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Similar to the previous arrow, this option lets you choose or upload a custom icon for the next slide navigation arrow.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The arrow icon will appear on the right side of the slider to move to the next slide.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Customizing the icon provides a more personalized look for navigation.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>13. Pagination<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pagination enables users to see an indicator of the number of slides and navigate directly to a specific slide via clickable dots or other indicators.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: When enabled, small indicators will appear, showing the user\u2019s position within the slider and allowing them to click to navigate to a particular slide.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Disabling pagination removes the visual guide, making it harder for users to track slide positions.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>14. Pagination Type<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can select between different types of pagination, such as dots, numbers, or custom indicators.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The type of pagination selected changes the appearance of the indicators (e.g., dots, numbers, or other shapes).<\/li>\n\n\n\n<li><strong>Change<\/strong>: Choosing different types of pagination gives you flexibility in design and user navigation.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>15. Left\/Right Direction<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting allows you to define the direction in which the slider moves when manually controlled by the user.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: You can choose whether the navigation will move the slides from left to right or vice versa.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Changing the direction affects how users interact with the slider and how content flows visually.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>16. Direction<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option lets you define the general direction of the slider\u2019s movement\u2014either horizontal or vertical.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Horizontal direction moves the slides left to right (or right to left), while vertical direction moves slides up or down.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Changing the direction alters the overall layout and interaction style of the slider.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>17. Centre Slide<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When enabled, this option ensures that the active slide is always centered in the viewport.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The active slide is always visually in focus and centered, drawing attention to it.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Disabling this feature can create a more casual, less structured display of slides.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>18. Effect<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting allows you to choose the animation effect applied to the slides during transitions. Common options include fade, slide, or flip.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The transition effect adds dynamic movement to the slider, making the changes between slides visually engaging.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Selecting different effects can change the overall feel of the slider, from smooth fades to more interactive movements.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Style Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the <strong>Style<\/strong> section, you&#8217;ll find five customizable areas: <strong>Image Box<\/strong>, <strong>Image<\/strong>, <strong>Content<\/strong>, <strong>Slider Navigation<\/strong>, and <strong>Slider Pagination<\/strong>. Each section allows for detailed styling to match your design preferences and website branding.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"436\" height=\"461\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-4.webp\" alt=\"Image Box Slider 4\" class=\"wp-image-15098\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-4.webp 436w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-4-284x300.webp 284w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-4-20x20.webp 20w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-4-30x32.webp 30w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-4-16x16.webp 16w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-4-18x18.webp 18w\" sizes=\"(max-width: 436px) 100vw, 436px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Image Box<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Image Box<\/strong> section allows you to customize the container that holds the image and content. Available settings include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Height<\/strong>: Set the height of the image box for consistent layout control.<\/li>\n\n\n\n<li><strong>Max Width<\/strong>: Define the maximum width to ensure responsiveness across devices.<\/li>\n\n\n\n<li><strong>Padding<\/strong>: Adjust the inner spacing between the content and the box edge.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"482\" height=\"634\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-5.webp\" alt=\"Image Box Slider 5\" class=\"wp-image-15099\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-5.webp 482w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-5-228x300.webp 228w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-5-15x20.webp 15w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-5-24x32.webp 24w\" sizes=\"(max-width: 482px) 100vw, 482px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Border Type<\/strong>: Choose from solid, dashed, dotted, or none to define the box&#8217;s border style.<\/li>\n\n\n\n<li><strong>Border Radius<\/strong>: Apply rounded corners to soften the edges of the image box.<\/li>\n\n\n\n<li><strong>Hover Effect<\/strong>: Add interactive visual effects when the user hovers over the box.<\/li>\n\n\n\n<li><strong>Border Type (Hover)<\/strong>: Customize the border style specifically for hover state, enhancing interactivity.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These options provide full control over the visual appearance and interactivity of the image box container.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Image<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Image Box<\/strong> section allows you to customize the container that holds the image and content. Available settings include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Height<\/strong>: Set the height of the image box for consistent layout control.<\/li>\n\n\n\n<li><strong>Max Width<\/strong>: Define the maximum width to ensure responsiveness across devices.<\/li>\n\n\n\n<li><strong>Padding<\/strong>: Adjust the inner spacing between the content and the box edge.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"466\" height=\"511\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-6.webp\" alt=\"Image Box Slider 6\" class=\"wp-image-15100\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-6.webp 466w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-6-274x300.webp 274w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-6-18x20.webp 18w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-6-29x32.webp 29w\" sizes=\"(max-width: 466px) 100vw, 466px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Border Type<\/strong>: Choose from solid, dashed, dotted, or none to define the box&#8217;s border style.<\/li>\n\n\n\n<li><strong>Border Radius<\/strong>: Apply rounded corners to soften the edges of the image box.<\/li>\n\n\n\n<li><strong>Hover Effect<\/strong>: Add interactive visual effects when the user hovers over the box.<\/li>\n\n\n\n<li><strong>Border Type (Hover)<\/strong>: Customize the border style specifically for hover state, enhancing interactivity.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These options provide full control over the visual appearance and interactivity of the image box container.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Content<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Content Section<\/strong> offers full customization of text and visuals within the image box, including options for background, spacing, typography, and color.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Background Type<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting determines the background style for the content section. You can select from solid colors, gradients, or images as the background.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The background adds a visual foundation to the content, enhancing its contrast with the image box.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Selecting a gradient or image will introduce a more dynamic background compared to a solid color.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Padding<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This controls the space around the content inside the box, ensuring that text and other elements are well-separated from the edges of the content section.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Adjusting padding creates more space around the content, improving readability and appearance.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing padding will make the content box larger, while reducing it brings the content closer to the edges.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Title Spacing<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting adjusts the space between the title and the elements surrounding it, such as the image or subtitle.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Title spacing ensures the title is properly separated from other elements, providing a balanced look.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing the spacing allows the title to stand out more, while decreasing it brings the title closer to adjacent content.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"435\" height=\"633\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-7.webp\" alt=\"Image Box Slider 7\" class=\"wp-image-15101\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-7.webp 435w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-7-206x300.webp 206w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-7-14x20.webp 14w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-7-22x32.webp 22w\" sizes=\"(max-width: 435px) 100vw, 435px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Title Color<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option allows you to set the color for the title text, making it stand out against the background and other content.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The title color helps draw attention to the heading, influencing its visual hierarchy on the page.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Choosing a contrasting color ensures the title remains visible, even with complex backgrounds.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Title Typography<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting controls the font style, weight, size, and other typographic properties of the title text.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Typography settings help define the font style and size, enhancing the title&#8217;s readability and impact.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Adjusting the font weight and style can make the title more prominent or subtle, depending on the design requirements.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>6. Subtitle Spacing<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting defines the space between the subtitle and surrounding elements, ensuring a clear separation and readability.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Subtitle spacing adds balance and harmony between the subtitle and the title or description.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing the spacing makes the subtitle more distinct from the title, while reducing it brings the elements closer together.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>7. Subtitle Color<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option allows you to change the color of the subtitle text, complementing the title and aligning with your overall color scheme.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Subtitle color helps differentiate it from the title while maintaining visual consistency with the design.<br><strong>Change<\/strong>: Using a softer or lighter color can create a more subtle contrast with the title.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>8. Subtitle Typography<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here, you can customize the font, size, weight, and style of the subtitle text.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: This ensures the subtitle matches the design and hierarchy of the title, offering consistency across the content.<\/li>\n\n\n\n<li><strong>Change<\/strong>: You can adjust the subtitle&#8217;s appearance for emphasis or to create visual hierarchy between the title and description.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>9. Description Spacing<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This controls the space between the subtitle and the description, ensuring proper separation for readability.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Description spacing prevents text from appearing too cluttered, making the content more digestible.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing the spacing improves readability, while reducing it can create a more compact layout.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>10. Description Color<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting allows you to modify the color of the description text to enhance readability and design harmony.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The description color influences the visual contrast and legibility against the background.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Choosing a darker or lighter color ensures optimal readability depending on the background type.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>11. Description Typography<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here, you can customize the font family, weight, size, and other typographic properties for the description text.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Typography settings ensure the description is easy to read and visually aligned with the title and subtitle.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Adjusting the typography makes the description text fit better within the overall design of the slider.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>12. Icon Spacing<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting defines the space around the icon, ensuring that it is well-separated from the text and other elements in the image box.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Icon spacing ensures that the icon doesn\u2019t appear too close to the content, maintaining a balanced look.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing the icon spacing can create a cleaner, more spacious design, while reducing it allows for a more compact layout.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>13. Icon Color<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here, you can customize the color of the icon to match the content design, making sure it aligns with the overall aesthetic.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The icon color affects its visibility and integration with the content section\u2019s style.<\/li>\n\n\n\n<li><strong>Change<\/strong>: A contrasting icon color helps the icon stand out, while a muted color blends it with the design.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>14. Icon Size<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option allows you to adjust the size of the icon, ensuring it is proportional to the content.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Icon size determines how prominent or subtle the icon will be within the design.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing the size makes the icon more noticeable, while decreasing it can give a more minimalist appearance.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>15. Icon Rotate<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This feature allows you to rotate the icon, providing an interactive and dynamic effect.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Rotating the icon can add a unique visual effect or animation to the image box.<\/li>\n\n\n\n<li><strong>Change<\/strong>: You can rotate the icon slightly for a subtle effect or rotate it dramatically for more visual interest.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Slider Navigation<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Slider Navigation<\/strong> section allows you to fully customize the navigation controls for the image box slider, offering various visual and interactive settings. Below is a breakdown of each option:<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"442\" height=\"634\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-8.webp\" alt=\"Image Box Slider 8\" class=\"wp-image-15102\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-8.webp 442w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-8-209x300.webp 209w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-8-14x20.webp 14w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-8-22x32.webp 22w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Size<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting controls the overall size of the navigation elements (e.g., arrows or dots) within the slider.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Adjusting the size changes how large or small the navigation controls appear.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing the size makes the controls more prominent, while decreasing them results in a more minimalist appearance.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Circle Size<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If circular navigation elements (such as dots) are used, this option allows you to control their diameter.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Adjusting the circle size changes the visual prominence of the navigation dots.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Larger circles make the navigation more noticeable, while smaller ones offer a subtler look.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Border Type<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option defines the style of the border around the navigation elements. You can choose from solid, dashed, dotted, or no border.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The border type adds definition to the navigation controls.<\/li>\n\n\n\n<li><strong>Change<\/strong>: A solid border offers a clean look, while dashed or dotted borders introduce a more dynamic, creative style.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Border Radius<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This controls the roundness of the corners for the navigation elements, including arrows or dots.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Border radius softens the edges of the navigation elements, creating a more rounded or square look.<\/li>\n\n\n\n<li><strong>Change<\/strong>: A higher radius makes the elements more rounded, while a lower value creates sharper edges.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Padding<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Padding adjusts the space inside the navigation elements, ensuring proper spacing between the content (such as arrows) and the element border.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Adjusting padding affects the inner spacing within the navigation element.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing the padding creates more breathing room for the content inside, while decreasing it tightens the layout.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>6. Animation (Normal &amp; Hover)<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option defines the animation effects applied to the navigation elements during normal interaction and when the user hovers over them.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Normal animation applies to the default state of the navigation, while hover animation activates when the user hovers over the element.<\/li>\n\n\n\n<li><strong>Change<\/strong>: You can set different animations (e.g., fading, sliding) for both states, enhancing interactivity and visual appeal.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>7. Color<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option controls the color of the navigation elements, including arrows or dots.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Color settings define the visual contrast of the navigation against the background.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Adjusting the color can help the navigation blend or stand out, depending on your design preferences.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>8. Background Type<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This setting determines the background style for the navigation elements, which can include a solid color, gradient, or image.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Background type adds visual depth to the navigation controls, making them either blend in or stand out.<\/li>\n\n\n\n<li><strong>Change<\/strong>: A gradient or image background adds more design variation, while a solid color provides a cleaner, simpler look.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>9. Position Type<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Position type controls where the navigation elements are placed within the slider container. You can position them relative to the container or set fixed positioning.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: This affects where the navigation appears (e.g., top, bottom, left, or right) within the slider.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Adjusting the position allows for flexible placement of navigation controls based on the layout needs.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>10. Alignment<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This option controls the alignment of the navigation elements within their designated area, such as left, center, or right alignment.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Alignment determines where the navigation elements are positioned within their container.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Left or right alignment places the controls at the edges, while center alignment brings them to the middle of the container.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>11. Gap<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gap adjusts the space between multiple navigation elements, such as arrows or dots.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Gap helps space out the navigation elements evenly.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing the gap creates more space between the elements, while reducing it places them closer together.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Slider Pagination<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Slider Pagination<\/strong> section allows customization of pagination controls (dots or numbers) for slider navigation. Here&#8217;s a quick overview of each option:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Color: <\/strong>This setting controls the color of the pagination elements, such as the active and inactive dots or numbers.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The color option affects the visibility and aesthetic of the pagination elements.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Adjusting the color ensures that the pagination elements contrast with the background for better visibility.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Active Color: <\/strong>This option sets the color of the active pagination element (the dot or number that represents the current slide).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The active color highlights the current slide\u2019s pagination element, indicating the user\u2019s position in the slider.<\/li>\n\n\n\n<li><strong>Change<\/strong>: A bright or distinct active color makes it easier for users to identify which slide is currently being viewed.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Size: <\/strong>This option controls the size of the pagination elements, such as dots or numbers.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The size adjustment alters how large or small the pagination elements appear on the page.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing the size makes the pagination elements more prominent, while decreasing the size results in a more subtle look.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Gap: <\/strong>Gap defines the space between each pagination element, such as dots or numbers.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Gap controls how spaced out the pagination elements are, providing a more visually appealing layout.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Increasing the gap separates the pagination elements more, while decreasing it brings them closer together.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Border Type: <\/strong>This option sets the style of the border around the pagination elements. You can choose from solid, dashed, dotted, or none.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Border type adds a clear definition to the pagination elements.<\/li>\n\n\n\n<li><strong>Change<\/strong>: A solid border offers a clean and clear look, while dashed or dotted borders can add a more dynamic or playful design.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"508\" height=\"631\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-9.webp\" alt=\"Image Box Slider 9\" class=\"wp-image-15103\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-9.webp 508w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-9-242x300.webp 242w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-9-16x20.webp 16w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-9-26x32.webp 26w\" sizes=\"(max-width: 508px) 100vw, 508px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>6. Border Radius: <\/strong>This setting controls the roundness of the corners for the pagination elements.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Border radius softens the corners, giving the pagination elements a more rounded or squared appearance.<\/li>\n\n\n\n<li><strong>Change<\/strong>: A higher radius makes the elements more circular, while a lower value keeps them sharp and angular.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>7. Direction: <\/strong>Direction controls the orientation of the pagination elements, whether they are displayed horizontally or vertically.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: The direction setting determines whether the pagination controls are placed in a row (horizontal) or a column (vertical).<\/li>\n\n\n\n<li><strong>Change<\/strong>: Horizontal pagination is commonly used for a sleek, linear design, while vertical pagination is often used for unique, dynamic layouts.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>8. Position: <\/strong>This option sets the position of the pagination elements within the slider container, allowing you to place them at the top, bottom, left, or right.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Position defines where the pagination will appear relative to the slider content.<\/li>\n\n\n\n<li><strong>Change<\/strong>: You can adjust the position based on the desired layout, whether you want the pagination at the top, bottom, or on the sides.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>9. Alignment: <\/strong>Alignment controls the alignment of the pagination elements within their container, allowing you to position them to the left, center, or right.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effect<\/strong>: Alignment ensures the pagination is placed in a specific position within the slider, either to the left, center, or right.<\/li>\n\n\n\n<li><strong>Change<\/strong>: Left or right alignment positions the pagination at the edges, while center alignment places it at the middle of the container.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the advanced settings, you\u2019ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.<\/p>\n\n\n\n<div class=\"wp-block-columns cth-img-box has-black-background-color has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"477\" height=\"635\" src=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-10.webp\" alt=\"\" class=\"wp-image-15106\" srcset=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-10.webp 477w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-10-225x300.webp 225w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-10-15x20.webp 15w, https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box-Slider-10-24x32.webp 24w\" sizes=\"(max-width: 477px) 100vw, 477px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Final Outcome<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s it! You&#8217;ve successfully learned how to configure the <strong>Image Box Slider Widget<\/strong> in Elementor to create dynamic and visually appealing image sliders with customizable titles, descriptions, and links.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For any further assistance or inquiries, feel free to contact our support team!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-text-align-center wp-element-button\" href=\"https:\/\/animation-addons.com\/widgets\/aae-image-box-slider\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Live Demo<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Before setting up the Image Box Slider Widget, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you\u2019ll get access to all free Elementor widgets, including the Image Box Slider Widget\u2014completely free! You can also filter between free and pro widgets for easier access. Key Use Cases [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":17048,"parent":43,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-758","docs","type-docs","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Image Box Slider Widget Documentation - Animation Addons<\/title>\n<meta name=\"description\" content=\"Set up visually engaging image sliders in Elementor using the Image Box Slider Widget. This doc covers activation, content styling, slider controls, pagination, and more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Box Slider Widget Documentation - Animation Addons\" \/>\n<meta property=\"og:description\" content=\"Set up visually engaging image sliders in Elementor using the Image Box Slider Widget. This doc covers activation, content styling, slider controls, pagination, and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/\" \/>\n<meta property=\"og:site_name\" content=\"Animation Addons\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/animationaddons\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-19T07:05:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box\u2028-Slider-Featured-Image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"48\" \/>\n\t<meta property=\"og:image:height\" content=\"49\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@animationaddons\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/image-box-slider\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/image-box-slider\\\/\",\"name\":\"Image Box Slider Widget Documentation - Animation Addons\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/image-box-slider\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/image-box-slider\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Image-Box\\u2028-Slider-Featured-Image.png\",\"datePublished\":\"2025-03-25T04:03:48+00:00\",\"dateModified\":\"2025-06-19T07:05:20+00:00\",\"description\":\"Set up visually engaging image sliders in Elementor using the Image Box Slider Widget. This doc covers activation, content styling, slider controls, pagination, and more.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/image-box-slider\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/image-box-slider\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/image-box-slider\\\/#primaryimage\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Image-Box\\u2028-Slider-Featured-Image.png\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Image-Box\\u2028-Slider-Featured-Image.png\",\"width\":48,\"height\":49,\"caption\":\"Image Box\\u2028Slider Featured Image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/image-box-slider\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"General Widgets\",\"item\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/general-widgets\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Image Box Slider Widget Documentation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#website\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"name\":\"Animation Addons\",\"description\":\"Best Animation Plugin for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\"},\"alternateName\":\"Animation Addons for Elementor\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#organization\",\"name\":\"Animation Addons\",\"alternateName\":\"Animation Addons for Elementor\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/logo.svg\",\"width\":48,\"height\":48,\"caption\":\"Animation Addons\"},\"image\":{\"@id\":\"https:\\\/\\\/animation-addons.com\\\/docs\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/animationaddons\",\"https:\\\/\\\/x.com\\\/animationaddons\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/animation-addons\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/animationaddons\\\/\",\"https:\\\/\\\/www.instagram.com\\\/aimationaddons\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@animationaddons\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image Box Slider Widget Documentation - Animation Addons","description":"Set up visually engaging image sliders in Elementor using the Image Box Slider Widget. This doc covers activation, content styling, slider controls, pagination, and more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/","og_locale":"en_US","og_type":"article","og_title":"Image Box Slider Widget Documentation - Animation Addons","og_description":"Set up visually engaging image sliders in Elementor using the Image Box Slider Widget. This doc covers activation, content styling, slider controls, pagination, and more.","og_url":"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/","og_site_name":"Animation Addons","article_publisher":"https:\/\/www.facebook.com\/animationaddons","article_modified_time":"2025-06-19T07:05:20+00:00","og_image":[{"width":48,"height":49,"url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box\u2028-Slider-Featured-Image.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@animationaddons","twitter_misc":{"Est. reading time":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/","url":"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/","name":"Image Box Slider Widget Documentation - Animation Addons","isPartOf":{"@id":"https:\/\/animation-addons.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/#primaryimage"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box\u2028-Slider-Featured-Image.png","datePublished":"2025-03-25T04:03:48+00:00","dateModified":"2025-06-19T07:05:20+00:00","description":"Set up visually engaging image sliders in Elementor using the Image Box Slider Widget. This doc covers activation, content styling, slider controls, pagination, and more.","breadcrumb":{"@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/#primaryimage","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box\u2028-Slider-Featured-Image.png","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/03\/Image-Box\u2028-Slider-Featured-Image.png","width":48,"height":49,"caption":"Image Box\u2028Slider Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/animation-addons.com\/docs\/general-widgets\/image-box-slider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/animation-addons.com\/docs\/"},{"@type":"ListItem","position":2,"name":"General Widgets","item":"https:\/\/animation-addons.com\/docs\/general-widgets\/"},{"@type":"ListItem","position":3,"name":"Image Box Slider Widget Documentation"}]},{"@type":"WebSite","@id":"https:\/\/animation-addons.com\/docs\/#website","url":"https:\/\/animation-addons.com\/docs\/","name":"Animation Addons","description":"Best Animation Plugin for WordPress","publisher":{"@id":"https:\/\/animation-addons.com\/docs\/#organization"},"alternateName":"Animation Addons for Elementor","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/animation-addons.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/animation-addons.com\/docs\/#organization","name":"Animation Addons","alternateName":"Animation Addons for Elementor","url":"https:\/\/animation-addons.com\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","contentUrl":"https:\/\/animation-addons.com\/docs\/wp-content\/uploads\/2025\/04\/logo.svg","width":48,"height":48,"caption":"Animation Addons"},"image":{"@id":"https:\/\/animation-addons.com\/docs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/animationaddons","https:\/\/x.com\/animationaddons","https:\/\/www.linkedin.com\/company\/animation-addons\/","https:\/\/www.pinterest.com\/animationaddons\/","https:\/\/www.instagram.com\/aimationaddons\/","https:\/\/www.tiktok.com\/@animationaddons"]}]}},"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/d0824328e817de9f5f8d005a4b8d1fcea87dd03cee2b85f00c4d3cb2da172cfe?s=96&d=mm&r=g","author_name":"docs_admin","_links":{"self":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/comments?post=758"}],"version-history":[{"count":22,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/758\/revisions"}],"predecessor-version":[{"id":18723,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/758\/revisions\/18723"}],"up":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/docs\/43"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/media\/17048"}],"wp:attachment":[{"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/media?parent=758"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=758"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/animation-addons.com\/docs\/wp-json\/wp\/v2\/doc_badge?post=758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}