Create photo, video and text slideshows with ease

12 javascript slideshow examples that you can add to your site in minutes


Simple fade slideshow example Simple fade slideshow example Simple fade slideshow example

Simple fade slideshow

It's easy to make a fade slideshow. 'Fade' is just one of 14 separate slide effects which you can use on your website slideshow. For a twist on 'fade' try 'fade-up' or 'fade-down'.


Gallery slideshow example Gallery slideshow example Gallery slideshow example Gallery slideshow example Gallery slideshow example Gallery slideshow example Gallery slideshow example Gallery slideshow example

Gallery slideshow

Jump straight to an image using thumbnails!

Thumbnails are automatically created by Magic Slideshow. Set slideshow thumbnails to any size, any position (bottom, top, right and left), and any style.


Pan and zoom slideshow example Pan and zoom slideshow example Pan and zoom slideshow example Pan and zoom slideshow example Pan and zoom slideshow example Pan and zoom slideshow example Pan and zoom slideshow example Pan and zoom slideshow example

Pan and zoom slideshow

Panning and zooming images has never been easier. Add the Ken Burns effect to create the appearance that each slide slowly zooms in and out.

Made popular by documentary filmmaker Ken Burns in video production, this effect works beautifully on website slideshows too.

The 'fade' effect used when changing slides has been slowed down. By default this is set at 0.6 seconds, but this example takes 3 seconds to completely change from one slide to the next.


Vertical slideshow example Vertical slideshow example Vertical slideshow example Vertical slideshow example

Vertical slideshow

Creating a vertical slideshow has never been easier. By default, Magic Slideshow automatically changes slides horizontally (left/right), but with a simple customization your slideshow images can change vertically (up/down) in seconds.


Video slideshow example
Video slideshow example

Video slideshow

Add videos to your slideshow for a quick way to get your message across.

Deciding the goal of each slideshow will help focus your thoughts about what you need. Would using only videos be best? Or would combining both photos and videos create maximum interest?

As well as supporting YouTube and Vimeo videos, Magic Slideshow also supports videos hosted on your server. You can show any video you want!


Fullscreen slideshow example Fullscreen slideshow example Fullscreen slideshow example Fullscreen slideshow example Fullscreen slideshow example

Fullscreen slideshow

Year-on-year the number of users choosing handheld devices to view websites increases. So how can you make sure visitors are seeing your gorgeous slideshow images?

Use the fullscreen option!

By creating a fullscreen slideshow, no matter which screen size visitors use they will always experience your images exactly as you intended.


image slideshow random slide effect example image slideshow random slide effect example image slideshow random slide effect example

Random slideshow

With 14 slideshow effects to choose from, which should you go for? How about a fade slideshow? Or cube slideshow? Don't forget dissolve, slide-in and flip too. Decisions, decisions!

But why pick 1 slideshow effect when you can have them all?

The random effect uses a mixture of all 14 transition effects. Every time a slide changes from one to another, a different effect is used.

Perfect for when 1 is just not enough.


Slideshow with bullets example Slideshow with bullets example Slideshow with bullets example Slideshow with bullets example

Bullets (with tooltips)

Hover each bullet to view miniature version of that slide. You may know this feature as 'tooltip, 'infotip' or 'hint'. A simple but effective way to preview upcoming slides.


Text slideshow exampleMagic Slideshow is great for text too.
Text slideshow examplePerfect for highlighting your latest articles.
Text slideshow exampleAdd links within the text.
Text slideshow exampleStyle this text with CSS, and other HTML.
Text slideshow exampleClick on the slideshow to pause it.

Text slideshow, pause on click

Think of a website slideshow. What came into your head? A photo slideshow, right? That's what most of us think.

Using a text slideshow on your website is another option. It's a great way to draw attention to latest articles without using a lot of web space. Add links to any text to help navigate visitors through your website.

Use any CSS and HTML to style the text and create a slideshow design exactly how you want.


Link each image to a url Link each image to a url Link each image to a url Link each image to a url

Clickable images

Turn any slide into a clickable image!

Link each image to a different URL to navigate visitors throughout your website. Simply add a <a> tag around the image.

Linking an image to a different website? Include target="_blank" to open the link in a new window.

It's easy for visitors to see when an image is clickable. The cursor changes from an arrow pointer to a hand pointer when the image is hovered.


Magic Slideshow - Examples Magic Slideshow - Examples Magic Slideshow - Examples Magic Slideshow - Examples Magic Slideshow - Examples Magic Slideshow - Examples Magic Slideshow - Examples Magic Slideshow - Examples

Zoom your slideshow

What type of slideshow zoom do you want? For a slow pan & zoom, choose the Ken Burns effect. But what if you want to zoom in closer on each slide?

Combine Magic Slideshow with Magic Zoom Plus!

As the demo shows, your website slideshow will be completely zoomable thanks to the zoom & enlarge effects of Magic Zoom Plus. Visitors see the smallest detail of your images close up.

Interested? Magic Zoom Plus is free to try and we've gone ahead and created the code you'll need to display a zoom slideshow on your website.


HTML slideshow

Use HTML in your slideshow to

create any design!

Continue

This image is zoomable!

Hover or click the image

(The zoom effect uses Magic Slideshow)

Hover
to zoom


Drag to
spin


Show 360 spins

The ultimate way to display products

Spins can use either Magic 360 or Sirv

Video slides

It's easy to add YouTube, Vimeo and all other videos in your slideshow

Embed social media widgets

Get more signups - add like buttons and social snippets to your slides


Touchscreen

Did you know each year more and more visitors are choosing to use handheld devices to view websites online?

Designing your blog, website or ecommerce store to support small screen products is essential to open up your target audience. This includes the image tools and plugins added to your site.

Choose a responsive slideshow to display images exactly as you intended. Magic Slideshow intuitively scales slideshow images up and down to perfectly fit the users screen size. The touchscreen functionality allows visitors to easily swipe left and right to browse your slideshow.

It's time to choose. Choose inclusion. Choose usability. Choose Magic Slideshow.

Retina ready

Heard of high-resolution images? They're for screens that pack in more pixels into the same area, so images look sharper.

Apple calls them retina screens and they've been standard on all iPhones since the iPhone 4 way back in 2010.

At 4 times the size (double the height and double the width), they're so vividly sharp that you can't make out the dots. People have become used to seeing retina images on their iPads, iPhones and other high-res screens, so it looks inferior when they're served a traditional image.

No fear! Magic Slideshow supports retina images. Use 2 images for each slide - one standard-res and one hi-res.


Get Magic Slideshow now...

Buy now £29