Solved

Making a slider that the user has more control over - accordion slider?

Posted on 2014-07-24
6
320 Views
Last Modified: 2014-08-01
Hi

See this slider:
Pros: looks nice
Cons: user has no control over speed if they want it to linger it little, they dont know what is coming next of after next so the bit they are interested in is 3 slides away

See this slider (http://www.kwik-fit.com/)
Pros: the user can pick the section relevant to them and not get motion sickness. They dont have to look at sections they arent interested in
Cons: dated - it seems we have to use massie sliders otherwise we are hetetics.  (who sets these style conventions?). However it could be made to look less dates

Questions
Does the interface element on quick fit have a name?
Are there are already things written to do this or is is too old fashioned thiese days
Does anyone know of any website with something similar to the kwik fit slider? Thsi is the first one I've seen. I like that it has the content menu down the side to give a quick sumary

The closest ive seen is an accordion slider
http://preview.66themes.net/?item=innotechWP

Does anyone know of an accordion sllider that keep the 'section title of each part of te slider elegantly when the slier collapses or is there no way aound that as the slider needs the space

many thanks for all your help
0
Comment
Question by:andieje
6 Comments
 
LVL 109

Assisted Solution

by:Ray Paseur
Ray Paseur earned 250 total points
ID: 40216409
You can make a Google search for jQuery Sliders and find many interesting ideas and implementations.  On http://www.kwik-fit.com/ there are several moving parts.  Same on 66themes.  Not sure which animation you were interested in.

Here is an article that shows a simple way of creating one kind of slider.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_11357-Upgrading-the-Marquee-Tag-with-jQuery.html
0
 
LVL 58

Expert Comment

by:Gary
ID: 40217189
Most jquery sliders have a pause on hover
Others have thumbnails, generally they won't have text
bxSlider is a very popular one with plenty of options
http://bxslider.com/examples
0
 

Author Comment

by:andieje
ID: 40226947
I neeed a slider to that when you are not on the slider page you can easily see the slider pages on other pages. Pardon me for me a heretic but the the shter sliders are musst smoke and mirros and server aesthetic purposes mstly

Granted it would help if i posted the right slider in my original question

http://codecanyon.net/item/accordionza-jquery-plugin/full_screen_preview/101685?ref=janecross

Something like this. I like it but it doesnt say it is responsive, I presume you cant have responsive siders?
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 40226995
You could probably adapt that slider to be responsive else
http://tympanus.net/Blueprints/ElasticContentSlider/
0
 
LVL 25

Expert Comment

by:lenamtl
ID: 40227235
0
 

Author Closing Comment

by:andieje
ID: 40234573
Thanks Gary. That is what i was looking for. I can build on the simplicity of that
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question