Solved

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

Posted on 2014-07-24
6
312 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 108

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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 24

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

863 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now