One of my designs included an interactive slider that I could use to switch through 3-5 different images/offers. I researched some j-queries that offered this.

Slider 1
http://blog.karachicorner.com/2010/12/new-fancymoves-jquery-product-slider/

jquery slider 1

This is the ‘FancyMoves’ slider. In my design I wanted a slider that contained a large central image, with about a third of the other pictures shown either side before changing. This one does pretty much what I wanted it to do, but I thought that it showed too much of the other pictures. I want the attention to be focused on the central image rather than being drawn to those around it.

Slider 2
http://galleria.io/

jquery slider 2

I searched for a couple of hours looking for one that looked exactly like what I wanted, after which I decided to be a bit more open minded into choosing a slider that looked good and functioned in the same way that essentially I was trying to find in the slider I initially designed. This slider showed a small thumbnail of the image in the main picture area. I liked this one because it offered the chance to use more images than the last one, but I still wanted to see what else I could find.

Slider 3
http://nivo.dev7studios.com/

jquery slider 3

The ‘Nivo’ slider was simple and effective. I liked that it was widescreen and it didn’t draw attention away from the main picture. The slide indicator was subtle, and when you hover over the slider the autoplay feature stops,which is handy when wanting to focus on one image.

Slider 4
http://wowslider.com/jquery-slider-mellow-blast-demo.html

jquery slider 4

The ‘Wow Slider’ was pretty similar to the ‘Nivo’ slider. The difference being that this one had 11 different preset transitions between images to choose from, rather than playing a random assortment of transitions (although i’m pretty sure you could randomise the transitions on this also).

Slider 5
http://codecanyon.net/item/all-in-one-bannerjquery-rotatorcontent-slider/1534434?ref=wdgs

jquery slider 5

I saw this slider, and it looked like what I wanted, but it revealed too many pictures, it wasn’t smooth enough in its transitions, and it also had an annoying little timer wheel in the top left of the main image to indicate that the slider was about to move on to the next image.

I then refined my search. The one above was listed as a carousel slider. So I changed my search to ‘jquery carousel slider’.

Carousel 1
http://www.bkosborne.com/jquery-feature-carousel

jquery carousel 1

 

My search immediately came up with what I wanted, albeit this one was slightly wider than I wanted (by this I mean the images on either side were too wide). It also revealed the slide indicator which has been a feature of a couple I’ve seen, but the way that this one does it renders it too messy for what I want, and if I use a slider like this i’d rather it was simpler in its conveyance.

Carousel 2
http://www.jacklmoore.com/monte

jquery carousel 2

 

This was exactly what I wanted. It had smaller previews of other pictures, a better focus on the central image, and a subtle slide changer with an autoplay function. The only problem was that you had to physically press a button to pause the slides, and the transition was a bit boring because you had to wait for one image to slide across before the other will take its place.

Carousel 3
http://fredhq.com/projects/roundabout

jquery carousel 3

I liked this one, and if you imagine pictures instead of grey blocks it looks a lot better. The only downsides to this one were that you had to click other pictures to rotate the carousel, and there was no autoplay function.

After looking at lots of different sliders, I think I might rethink my design and go for a ‘one image at a time’ format. I liked the three wider image sliders in my searches, and these would be easier to make responsive than a carousel slider. I don’t plan on using a slider for viewing on a phone, but I want it to remain a feature of the tablet version of my website.

During my searching, I came across this slider that I really liked:

3d Slider
http://codecanyon.net/item/ccslider-jquery-3d-slideshow-plugin/full_screen_preview/162445?ref=lvraa&ref=lvraa&clickthrough_id=97927834&redirect_back=true

3d slider

I am really considering using this slider. The transition between pictures is so smooth, and the 3d element makes it even better than the one i’d seen before. There were many different transitions, and the shadow effect was pretty good too. This one would cost me $12 to purchase a license to use this on my websites, but I think that whether I use it for this assignment or not, I want to be able to use it at some point! I might look for an alternative first that doesn’t require a license so that I don’t have to pay for it though.

 

Advertisements