Verified review
Common Ninja has amazing no-code widgets that would beautify a website built on any builder. It is very easy to use and customise. It has as many widgets for almost everyone willing to make their website impressive.
Try the editor, no signup
Design your Image Slider right here
Pick a template, customize it, and watch it update live, no signup.
Design your Image Slider
No credit card · Free forever plan
Start fresh in the full editor
No credit card · Free forever plan
Quick add to:
- Auto-playOn load or hover
- 200+Platforms supported
- <5 minSetup time
- No-codeNo coding required
The Common Ninja Image Slider widget is a free, no-code embed that displays multiple images in a smooth sliding sequence on your website.
Upload images directly or paste URLs from a CDN, pick a layout, set the autoplay and slide timing, choose a hover effect (zoom, fade, color overlay), pick a skin or layer Custom CSS, add clickable links per slide, and paste a one-line embed snippet on Canva, Hostinger, Notion, Carrd, Google Sites, Webflow, WordPress, and 200+ other platforms.
Use it to showcase products, hero banners, photography portfolios, event galleries, or marketing visuals in a fixed slot that keeps the page tight and the focus where you want it.
Why add an Image Slider widget to your website?
Show multiple images in one fixed slot
A hero slot, a product gallery, a photography portfolio, an event recap. The slider cycles through images in a single frame, so the page stays tight without scrolling past five hero sections in a row. Keep the focal point clean and let the imagery rotate.
Catch the eye on hover with image effects
Zoom, fade, color overlay, grayscale-to-color reveal, and other hover effects make the slider feel responsive without adding bulk to the page. Pair the effect with a clickable link per slide and the slider becomes a high-engagement conversion surface, not just decoration.
Link each slide to its own destination
Every slide can carry its own URL, so a 5-image slider becomes 5 separate calls to action: route product slides to product pages, blog teasers to articles, portfolio shots to case studies. The slider stops being a passive carousel and starts driving clicks.
Different from a before/after slider
A before/after slider compares two images with a draggable divider. Visitors slide left and right to reveal the difference. An image slider rotates through multiple separate images in sequence. Use this Image Slider for galleries, hero rotations, and product showcases; use the Common Ninja Before & After Slider widget when the comparison itself is the message.
How it works
Add your images
Upload images directly from your computer or paste URLs from a CDN, your media library, or any public host. Add a custom title, alt text, and clickable link per slide so each image carries SEO weight and can route visitors to the matching product, story, or landing page.
Pick a layout and customize
Choose a slide layout (full-width hero, contained card, banner strip), set autoplay on load or hover, configure time per slide, enable swipe gestures, pick a hover effect (zoom, fade, color overlay), and arrow + pagination style. Pick a skin from the design library or layer Custom CSS for pixel-level brand match.
Embed on your site
Copy the one-line embed snippet and paste it on Canva, Hostinger, Notion, Carrd, Google Sites, or any of the 200+ supported platforms. Edits in the Common Ninja editor push to every embed without re-paste. Swap an image, re-order slides, change the skin, and the live page updates.
What you get with the Image Slider widget
Multiple layout styles
Full-width hero, contained card, banner strip, ken-burns pan-and-zoom, fade-only transition. Switch between layouts in the editor without re-uploading images. Each layout reflows responsively across mobile, tablet, and desktop breakpoints.
Hover effects on every slide
Apply zoom, fade, color overlay, or grayscale-to-color reveal on hover. Effects fire on desktop hover and tap on mobile, so the slider stays interactive across input types without breaking touch behavior.
Clickable images per slide
Set a custom URL per image. Each slide becomes a discrete call to action: product pages, landing pages, blog posts, case studies. Combine with hover effects and the slider doubles as a curated visual nav for high-engagement sections.
Stylish skins and Custom CSS
Pick from a library of pre-designed skins (minimal, magazine, dark, cinematic) for a fast brand match. Layer Custom CSS for pixel-level control over arrow shapes, pagination dots, slide spacing, hover-state finesse, and caption typography.
Everything in the editor
Image Slider Color Effects
The Image Slider widget comes with the option to choose from color effects to make your images more unified in style, and to add the “wow” effect to them.
Fully Customizable Image Slider Widget
Adjust colors, fonts, spacing, transition speed, and the arrow and dot controls to match your site. Changes preview live as you make them, so you can try a few directions before committing. No coding needed for any of it.
Perfectly Responsive Image Slider
The slider inherits its container width and adapts from a 320px phone screen up to a full-width desktop hero. Images scale to fit rather than crop unpredictably, and touch swipe works on mobile alongside the arrows on desktop.
Image Slider Custom CSS
Beyond the built-in controls, you can add your own CSS to the Image Slider for a pixel-level brand match. Override typography, spacing, and the arrow and dot styling, or write new rules from scratch. Useful when a design system needs exact values rather than close-enough presets.
Easy To Embed Image Slider
Copy one line of code and paste it wherever the slider should appear in your page's HTML. The slider updates automatically whenever you change it in the editor, so you never need to re-embed. Works on any platform that accepts custom HTML.
Also included in the editor
Image Slider Hover Effect
The Image Slider widget features hover effects which will add even an additional layer of visual effects that will make the users’ experience on your pages even more enjoyable.
Image Slider Layout Styles
The Image Slider widget comes with two layout styles — carousel and grid. You can choose from these to make the widget fit your website’s design.
Clickable Images
You can transform the Image Slider into a powerful conversion tool with the option to make the images clickable.
Easy To Use Widget
The Image Slider widget is easy to use and requires no coding knowledge. Our intuitive dashboard with the drag-and-drop feature will enable you to customize the widget any way you’d like to with just a few simple clicks.
Real reviews. Real customers.
Verified
Outstanding service. I use their widgets to help me with my web design business and whenever I need help they are very quick to help.
Verified
Excellent company with excellent service!!! We used it to build a survey, it was very user friendly. The service was perfect. Amit helped us with every problem and question we had, thank you very much!!!
Verified
Common Ninja saved the day when building our website and the customer service Daniel, the co-founder and CEO, provided was amazing.
Quick answers
Yes. The free plan covers one Image Slider widget with no time limit and no credit card. Upgrade only when you need additional widgets, more image slides per slider, premium skins, advanced hover effects, or features like conditional slide visibility and per-slide analytics tracking.
Add as many image slides as your plan supports: the free plan covers a reasonable number; paid plans lift the cap. Each slide can have its own image, title, alt text, caption, and clickable URL. Reorder slides via drag-and-drop in the editor and the live widget updates without re-paste.
A Before & After Slider compares two images on a single frame with a draggable divider. Visitors slide to reveal the difference. An Image Slider rotates through multiple separate images in sequence. Use this Image Slider for galleries, hero rotations, and product showcases; use the Common Ninja Before & After Slider widget when the comparison itself is the message (renovation, redesign, retouching, fitness, etc.).
Yes. Set a custom URL per image in the editor: product page, landing page, blog post, anywhere on or off your site. The whole slide becomes clickable, so a 5-image slider turns into 5 separate calls to action without needing buttons on each frame.
Zoom (image scales on hover), fade (image dims to reveal caption), color overlay (configurable tint), and grayscale-to-color reveal. Effects respect mobile touch behavior. Tap once to trigger the effect, tap again to activate the link.
Build the widget in the Common Ninja editor (upload images, pick layout, customize skin), copy the embed snippet or URL, and paste it into your site: Canva via the Embed app in the editor's Apps panel; Notion via /embed with the embed URL; Carrd via an Embed element in the section where the slider should appear. Edits in the editor push to every embed without re-paste.
No. Images load lazily. The slider preloads only the visible slide and the next slide, not the entire sequence. Source images are served from a CDN with WebP and AVIF format negotiation, so Core Web Vitals stay healthy even with large hero images. You can also tune image quality and size in the editor for tight mobile-data budgets.
Yes. Layouts adapt across mobile, tablet, and desktop breakpoints. Slide sizing scales to viewport width, swipe gestures replace arrow buttons on touchscreens, and pagination dots resize to stay tappable. Hover effects switch to tap behavior on mobile so the slider stays interactive without breaking touch input.
How to add Image Slider to your website
Pick your platform. Each takes under 4 minutes.
- 1In the Canva editor, open the Apps panel from the left sidebar and search for Embed.
- 2Click the Embed app, paste the Common Ninja embed URL, and confirm to place the embed on your canvas or page.
- 3Resize and position the embed where the slider should appear. Publish or share. The slider renders inline with your Canva design.
- 1Open the Hostinger Website Builder and click the section where the image slider should appear.
- 2Click Add Element → Embed Code, paste the Common Ninja embed snippet into the field, and apply.
- 3Save and publish. The slider renders inline with your section styling.
- 1Build the widget in the Common Ninja editor and copy the embed URL (not the script snippet).
- 2In Notion, type /embed on the page where the slider should appear and paste the embed URL into the block.
- 3Resize the embed block to fit your page width. Notion renders the slider inline with your selected layout and skin.
- 1Open your Carrd site and click the + button to add a new element, then choose Embed.
- 2Paste the Common Ninja embed snippet into the Code field and click Done.
- 3Position the element and publish. The slider renders inline with your section's spacing and your selected skin.
- 1Open your Google Sites project and click Insert in the right panel, then Embed.
- 2Switch to the Embed code tab, paste the Common Ninja embed snippet, and click Next then Insert.
- 3Position the embed on the page and publish. The slider renders inline with autoplay and skin settings preserved.
Compatible With All Site Builders, E-Commerce Platforms and Websites
Explore Related Widgets
Image Carousel
Showcases images in a rotating or sliding manner
Video Carousel
Showcases videos in a rotating or sliding manner
Before & After Slider
A simple slider that lets visitors compare before and after images to see visual changes clearly.
Image Gallery
Displays images and captions in diverse layouts and grids, presenting visually appealing arrangements for showcasing multiple images
Popup Builder
Easily craft engaging, personalized popups to boost conversions.
Instagram Feed
Display the latest posts from your Instagram page
FAQ
Yes, you can. Go to the “Display Rules” tab, and choose your desired triggers. You can learn more about the different triggers & rules here: https://help.commoninja.com/hc/en-us/sections/6900365183517-Display-Rules-Triggers
Yes, you can easily do so from the “Templates” tab.
Yes, there are lots of beautiful skins that you can choose from to save time and start using the widget as quickly as possible.
Yes, you can either upload an image, or select an icon from a large selection of available icons to add to your Notification Bar, or, alternatively, leave it all blank.
It’s simple. All you need to do is to sign up and start using the free version.
Common Ninja’s Image Slider widget is free to use. It is limited to a certain amount of views, however.
Common Ninja’s Image Slider widget is compatible with ALL current and future website builders.
Yes, the Image Slider widget is GDPR-compliant.
No. Using our Image Slider widget is very simple. The widget comes with an intuitive drag-and-drop interface and fully customizable options. Once you’ve finished editing the widget to your liking, all you need to do is copy the provided code and add it to your website.
Yes. We are eager to hear your request. Please visit our Feature Request page.
An image slider is a graphical user interface element that allows users to slide through a series of images or graphics. It is often used in websites, multimedia presentations, and mobile applications to showcase a collection of images. The slider usually includes navigation buttons that allow users to switch between images manually, or it can automatically switch between images with a set interval. Image sliders are an effective way to present a series of images in an attractive and engaging manner, and they are a popular feature in modern website design
- Attractive Presentation: Image sliders present a series of images in a visually appealing manner, making them a great way to showcase products, portfolios, and other types of media.
- Space-saving: Image sliders allow multiple images to be displayed on a single page without taking up a lot of space.
- Easy Navigation: With image sliders, users can easily navigate through a series of images by clicking on the navigation buttons or by using the automatic sliding feature.
- Dynamic Content: Image sliders can be set to display different images at different times, making them a great way to showcase dynamic content such as news, events, and promotions.
- Increased User Engagement: Image sliders can grab the attention of users and keep them engaged with your website or application.
- Mobile-friendly: Image sliders are responsive, meaning they can adapt to different screen sizes and be used on a variety of devices, including mobile phones and tablets.
- Improved User Experience: Image sliders can make your website or application more user-friendly by providing a clean and organized way to showcase your content.
Ready when you are
Add an Image Slider to your site in 5 minutes
Cycle through images in a fixed frame with autoplay, hover effects, clickable links per slide, multiple layouts, stylish skins, and Custom CSS. Embed on 200+ platforms including Canva, Hostinger, Notion, Carrd, Google Sites, and Webflow.
Create your Image SliderNo credit card · Setup in under 5 minutes