Since the AnythingSlider has been on GitHub, a number of people have pushed the project forward. Big props to ProLoser, Mottie, meancode, betzster, and kalasoft for committing code to make it more feature rich, smarter, and more optimized.
Mottie’s fork is the furthest along so I’ll link the download button below to that. There has been lots of changes since last time we talked about this project around here. For example: multiple sliders on the page (while retaining ability to link to slides on either with #hash links), morphs size to fit uniquely sized slides, reversing the direction of the slider, and many more behavior options.
Update August 2012: As of this date Anything Slider is in version 1.8.6 and still going strong!
Looks pretty neat.
Good jobs guys.
is this also available as wordpress plugin? would be nice…
I don’t believe this exists as a wordpress plugin however there are some plugins that have similar functionality. If you really really want this implementation of the idea you can certainly integrate it with wordpress if you are well enough versed in theme building.
Great updates to an awesome slider, thanks for sharing!
I loved the last one so much I customized it for use in the portfolio section of my site, you can check it out here – http://www.curtisscott.com/portfolio.html
Thanks again to all those who were involved with this latest update. I look forward to examining this version and checking out all the new features!
CURTIS :D
FROM Concept Feedback!
I don’t think the demo is working anymore. It simply lists all slides in a UL on the page. Am I missing something?
you need to make sure your browser has javascript enabled.
I just updated AnythingSlider to v1.41 – now with themes! I added a demo here.
Disclaimer: I don’t claim to be a graphic artist so please bear with me and my crappy themes. Also, the minimalist-round and minimalist-square themes look the same in IE because I used border-radius. I’d also like to know if I could copy Curtis Scott’s theme and provide it with the base files :)
Please feel free to copy my theme into your release.
Thanks again for all your hard work on this latest release. It would be nice to have a credit/link back to my site, but this is not necessary for use. :)
perhaps its my browser but FF 3.5.13 on an XP machine does not hide the youtube videos after they slide out of the viewing area?
hmm but in chrome it works wondrous.
Same happens in Opera for me.
the youtube and other flash elements need the “wmode” param set to “opaque” – that should fix it.
Ok, I know I’m going option crazy, but I added a “addWmodeToObject” with a default of “opaque”. Hopefully that will fix the problems people are having.
Updated demo & download here
Looks pretty nice, will use in some of my Drupal Themes, thanks for gr8 plugin update :)
For the first time I launch demo page on newest version of Opera it was a mess, I had to reload the page to see everything. And of course the same problem with youtube videos still was.
Definitely a big improvement. Nice job !
really nice and helpfull
This works wonderfully. I have always liked the “anything” slider and now it features electronica from Carl Sagan! Who could as anything more?
Wow they’ve done a wonderful job. I, too, use your anythingSlider. I should update!
Great work, the panel resizing option is really awesome !
I love this. The only thing that I don’t see that I would find helpful is an option to start on a random slide. Can anyone help me with this. Thanks.
Hi DeSha!
Try something like this in the initialization code:
$('#slider1').anythingSlider({startPanel : Math.floor(Math.random()*5)
});
The “5” should equal the number of slides you have
Thanks Motti!!!
Hi Mottie,
Great slider! Would you mind explaining to a newbie like me how exactly to add the above code into the initialization code?
$(‘#slider1’).anythingSlider({
startPanel : Math.floor(Math.random()*5)
});
Thanks in advance!
Hi Jamie,
Actually that code is the initialization code. The “startPanel” is just one of the many options (key), the setting of the option is called the “value”.
Most plugins are initialized in the same manner:
$(target).plugin({key1 : value1,
key2 : value2
});
I’ve been using this slider for a long time and I love how flexible it is. I find that I use it for such varying projects but I need to modify it to suit my needs regularly. These modifications would not be needed if there were callback functions in place I could utilize.
Could a future version include callback functions at the logical points? Start, stop, begin and end of transitions?
Keep up the great work!
In the latest version (1.43), you can bind to triggered events. I’ve included examples on the main index page (demo here). I know these aren’t callback functions, but hopefully it will fulfill your needs.
Oh, also check out the firebug console on that page, it lists the events as they occur.
Nice post you done very well work
and Im also do on it daily WEBDESIGNING & BLOGGING
only click event!
not hover event!
Hi John!
I’m not sure exactly what you are asking for, but in the current version (1.43), new interactivity options have been added. Add “mouseenter” instead of “hover” to whichever element you want – download it here
Great work.I specially liked the Optionally resize functionality.
wow that’s very cool i like effect on right left navigation buttons
:)
Wow, great work, looks fantastic
Hi You all,
Is it just me or what?
But when I go and download the new 1.4 version its still say its version v1.3.7.0?
I can’t seem to find the right version anywhere.
Like i said its probably just me or maybe because its monday???
Maybe someone can point me in the right direction please?
Regards,
Richard
I can’t seem to find version 1.4 anywhere also. Can anyone help ?
Download it from my github page (current version 1.43)
Okay where do I click on that page?
If I choose the “Download source” button on the right top, I get 2 options to pick from: Zip or tar. I picked the Zip file.
Now when its downloaded the file name is: Mottie-AnythingSlider-v1.3.3-15-g64717d7.zip !?
So like I said: Is it just me or am I still doing something wrong here?
Regards
Hi RichyVn!
Just ignore the file name… I don’t think I have the tags set up properly (still learning github). But I do see that ProLoser has updated to the latest version and he’s good at adding tags/filenames :P… Either way, check the version number in the .js file to make sure which version you have.
you are my favourite jquery&css ninjas :-)
thanks for all the great work!
i have a noob question though:
posted on the css tricks forum weeks ago, but i’ll ask here again:
http://kostov.de/allegro/index.html#
this is the page iam currently working on.
following problem occurs:
in Chrome and Safari, the arrow-buttons are sliding up and down on hover, instead of just hovering – my guess is that they are getting activated by another script – is there a way to avoid conflict? or is it just the sprite?
i havent tried uisng separate pics yet …
thanks! love the banjo,chris!
Hi Vicky!
It looks like a CSS problem and the animation is due to the CSS3 transitions. So try replacing the following CSS:
.anythingSlider .arrow { display: block; height: 30px; width: 20px; background: url(http://kostov.de/allegro/img/arrows_slide.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 79px; cursor: pointer; }
.anythingSlider .forward { background-position: left top; right: -22px; -webkit-transition-duration: 0; }
.anythingSlider .back { background-position: right top; left: -18px; -webkit-transition-duration: 0; }
.anythingSlider .forward:hover { background-position: left bottom; }
.anythingSlider .back:hover { background-position: right bottom; }
Thanks , Mottie!
I just came to the conclusion as well, right after I woke up :-)
It’s the CSS3 transitions…!
Thank you so much for the code!!! I will try it out and let you know!
Was already thinking of rewriting the CSS for the “a”s with sprites ….
Should have done my homework first and read: an August 12th article from Louis Lazaris on Impressivewebs “Animated Sprites with CSS3 Transitions” …
Thanks a LOT!
Thanks again, Mottie!
Both works:
Your CSS to the anythings.slider &
changing the transitions gives the same result:
a{
color: #e1661e;
text-decoration:none;
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
Will remember for the future!
Carl Sagan rocks! :-)
Excellent jQuery content slider, and the panel resizing option is very smooth, very versatile. LT
Useful plugin.. Thanks to post it
OOh. Very good.
It is very usefull.
Good job!
Thanks for sharing it
It doesn’t display correctly when use with blueprintcss framework. Here is a screenshot: http://www.flickr.com/photos/[email protected]/5056143023/
I’m testing it with v1.43 from mottie.
Fixed :)… good luck figuring it out guys…
SIKE…LOL
The problem was that blueprintcss adds padding left for ordered list of 1.5em. I believe they do this to keep the fonts nice and align. Anyways, just change the current anythingslider.css ul to:
ul.anythingBase {
background: transparent;
list-style: none;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding-left: 0;
Thanks! I added “padding: 0” to the latest version :)
Sincerely thanks for the slider, as a weak developer i appreciate this very, very much.
However (lol sorry), when I click on the forward button to slide from panel 3 to panel 1 (continuous effect) several times in IE7 and IE8, the panel 1 seems ‘flickering’ like it’s shifting from panel 3 to panel 1, this phenomenon only happen within 1 second.
Strangely, clicking previous button do not trigger issue.
This also happen with both sliders in the demo, you can click on the forward button to slide from panel 3 to panel 1 several times in IE7/ IE8 to observe the issue.
Any recommendation for fix is much welcome, thanks! :)
Oops I’m sorry about the panel number, I actually means from last panel to first panel.
Thanks!
and for ‘previous button’ I mean ‘backward button’, ouch! sorry for spamming X)
I think I fixed this problem in the latest version (1.4.5)… if the issue still occurs, please submit an issue so we can better track it.
Thanks Mottie, tested 20 times for IE7 and IE8 and it works correctly, you rock! :D
Hiya Chris.
This is a great plugin, however I am currently using this in a fluid site, so if the user resizes the window the width that get set are no longer valid.
I am calling a function on window.resize. I got it mostly working by doing this however when trying to set the width on the div that wraps the with the class of anythingSlider, as soon as the value is reset with the window resize and the slider moves onto the next slide it resets the width to the previous value.
So I was wondering if this is even possible to do or not?
I have put my code snippet for the function below.
Cheers,
Warren :)
function updateCarouselWidth() {
//Get width of mainColumn
var mainColWidth = $('#mainColumn').width();
//Update width to mainColWidth - Hmm?! This gets reset again when moved to next item
$('div.anythingSlider').width(mainColWidth);
//Count number of items in - eg 3 + 2 cloned items will be 5
var numberOfItems = $('#carousel > li').length;
//Update width of carousel to mainColWidth * numberOfItems
$('#carousel').width(mainColWidth * numberOfItems);
//Update width of 's to mainColWidth
$('#carousel > li').width(mainColWidth);
//Update width of div.panel inside 's to mainColWidth
$('#carousel > li div.panel').width(mainColWidth);
}
Hi Warren Buckley!
This has been an issue with the slider from the beginning. In future versions, I may add this as an option.. or just try to detect a percentage width. But here is a demo of a work-around with the latest version of the script from my github page.
$(function () {
$('#slider1').anythingSlider({
startStopped : true, // If autoPlay is on, this can force it to start stopped
});
var timer;
setSize();
$(window).resize(function(){
clearTimeout(timer);
setTimeout( setSize, 100);
})
function setSize(){
var w = $(window).width() * .8, // set to 80% of window width
as = $('#slider1').data('AnythingSlider'),
leftEdge = 0;
$('.anythingWindow, #slider1 li.panel').closest('div.anythingSlider').andSelf().width(w);
for (var i=0; i < as.pages + 2; i++) {
as.panelSize[i] = [w, as.panelSize[i][1], leftEdge];
leftEdge += w;
}
$('.anythingBase').width(leftEdge + 100);
as.gotoPage(as.currentPage);
}
});
Hi Mottie
Thanks for the fix, really appreciate it.
However I think this should be part of the core to work with %widths so it can used easily in fludi layouts.
Thanks,
Warren :)
Hi again,
I am considering adding this to the core, but I need some input on how to implement it (see this issue: http://github.com/ProLoser/AnythingSlider/issues#issue/18)… I personally don’t like the way it jumps on resize, but I don’t think that can be helped.
Love it Chris~!
My peeve with this slider (and the one I currently use) is the one issue with the embeded Youtube video.
So the slider moves from one to the other, ~smooth~, then the turkey video comes up so I click it. Just like spinach on someone’s teeeth, I move my mouse cursor away from the stage/video area. This is when the video keeps playing and the slide starts-up again but the video isn’t done!
I know (or don’t know) that youtube has a way of communicating the end of the video so we can have the option of starting the slider again.
Next option is to have a wrapping div around the staging area that would stop the slider (not just hover) and listen for a clic and stop the slider. I guess this would leave us hanging and would then need a (continue to) play button.
Hi Colin!
Actually this functionality has been added, but sadly it’s not working properly in IE. As far as I know it works fine in other browsers. I’ve been trying to fix this problem for IE, but it might end up that the swfobject javascript file will be a required plugin.
Thanks for this awesome Plugin!
I have a little question: Is it possible to have slides with different heights? So that the slider changes his height to the current slide’s height, after the animation has finished?
Thanks for a reply.
I have an issue where flash on the last slide (and only the last, there is similar flash on 3 other slides) shows briefly and then is replaced with the alt content. If I add an extra after the slide that isn’t working (to make it second to last) then it will work. Any thoughts? See example here. In this example there isn’t the extra after the non-working slide.
Thanks!
That should say extra <li>… Thanks for an amazing plugin by the way.
I think what is happening is that when AnythingSlider is run, it duplicates your the audio player dynamic code “AudioPlayer.embed(“audio_1”, {soundFile: “#”});” which isn’t initialized in the extra panels.
So, I think a simple fix would be to try running your audio player script before the anythingSlider initialization code (maybe even move it to the bottom of the page).
Hi Colin!
Thanks so much for sharing. This is just awesome and it can be used in lots of great ways.
Your fabulous work is MUCH appreciated!
Sincerely,
-Warvin
It’s OK in IE but does not work correct in Mozilla Firefox … is it something wrong with my browser (version 3.5.13) ? Or it is “IE only” script ?
Hey Chris, this is a great slider. I recently downloaded this and started using its basic functions in some of my sites, mainly to replace what I previously used flash for. I have also shared it with a couple of my work colleagues who have found great uses for it too, being able to have different types of files in one slider is great. Thanks for supplying some nice demonstration examples as well.
Such a great slider! With little knowledge of html and css you can do anything with it.
Easy to use in WordPress aswell.
How did you set it up in WordPress? Does it work in HTML5? Because mine just acts as if the jQuery isn’t affecting it – showing as an unstyled list.
And yes, I have javascript enabled in my browser.
Its not HTML5.
If the jQuery is not working, make sure you refer to the right documents.
Great find, can’t wait to use this.
Could anyone help me with a problem? I have put the jquery slider on this page:
http://www.midians.com/test/index.asp
I have tested it in Opera, FF, Safari, Chrome and IE. Of course I have an IE problem. It will usually load properly but not always. Sometimes portions of the background are missing. If it does load correctly and I hit reload it will often not load all of the background. As soon as the mouse moves the rest of the background will load.
Also, I forgot to mention that if I block out the javascript text contained in the tags in the header (the code that sets the parameters) the problem is no longer present.
Hi Kelly!
It looks like you are using v1.3 with the newer HTML template. Download the newest version here and follow those examples (it shouldn’t need a div named “anythingSlider” or “wrap” anymore – it adds those automatically)
Thank you for your reply. I will give this a try!
This slider is really nice! I love the way second one adjusts the the size of its content, I haven’t seen any other other sliders that can do that, Ill be using this for sure!
Can someone give me a step by step instruction to even get this working?
Mine is showing an unordered list of images(the auto-formatting isn’t kicking in). I have javascript enabled.
I’m trying to use it in an html5 wordpress theme – no luck! Was there ever any instructions given with this slider?
Thanks!
I just tried to download at GitHub in front of my class and the .zip file wouldn’t download. http://github.com/ProLoser/AnythingSlider/downloads
@Zaka check out my screencast on how to install it http://drho.ro/learn-javascript-and-jquery-web-design-tutorials-resources/
I left a comment on your tutorial site… nice job :P
The one thing I wanted to add is that when you initialize AnythingSlider, make sure you include the themeDirectory in the code to make the other themes work properly in WordPress:
$('#slider1').anythingSlider({themeDirectory : '/css/theme-{themeName}.css'
});
Oops – no way to edit my last comment:
$('#slider1').anythingSlider({
themeDirectory : '<?php bloginfo('template_directory'); ?>/css/theme-{themeName}.css'
});
Thanks for bringing the improved slider to my attention. I will try it out tonight.
Very smart and unique, Thank you for sharing.
Awesome slider! I’m really digging this one. Will definitely continue using in future projects.
this is one of the most flexible slider plugins i’ve seen yet – thank you for your work!
would like to throw out some feature requests if you don’t mind..
html-friendly captions on translucent background color that slide up once a slide is loaded
fade effect for navigation elements
option for slides to reverse direction when going from last to first slide
ability to click to next slide before transition effect finishes for better ux
easy bullet or thumbnail navigation – i’m guessing it can already be done but easy options would be great
thanks!
Hi Tae!
The latest version on github includes an FX extension with examples on how to add thumbnails, effects on internal content and captions.
As for your other feature requests, I’m not sure what you mean by “easy” bullet or fade effect for navigation elements (the navigation tabs/buttons?). I would appreciate if you submitted an issue at the github repository to make it easier to keep track of feature requests and bugs. Thanks!
thanks for cool slider. I have been for this for quite some times.
Thanks for sharing. But i have a “noob” question:
Is it possible to edit the navigation bar? “Anythingcontrol” or “Anythingwindow” are hidden in the source code and i can’t find “thumbNav” class. I can see those only in the live code (Dreamweaver)… and is not editable!
I want to create a Navigation Bar instead of the actual… i’m desperate XD
(and i’m a beginner!… please don’t kill me ahahahah)
=)
Hi FaBz!
Did you look at the AnythingSlider “CS-Portfolio” theme?
Is it possible to make the slider switch between 2 different groups/gallies of photos. Like have a couple of tabs to click between.
Hi Donny!
I added this as an enhancement request. Thanks for the suggestion!
sorry, I’m not good in english, and I’m noob.
I have installed this on my wordpress. It’s only work on homepage but got the problem on other pages. Help me please.
This is homepage, it’s work > hxxp://www.bestpricesdeal.com
and others got problem like this > hxxp://www.bestpricesdeal.com/about/
I’m not good with WordPress, but I’m not sure what you mean by a problem… is it the theme? Did you try changing the theme directory?
$('#slider1').anythingSlider({
themeDirectory : '<?php bloginfo('template_directory'); ?>/css/theme-{themeName}.css'
});
Great slider! One quick question…is it possible to control the slider if embedded in an iframe? That is, put the slider in an iframe and a menu system outside of that iframe.
Thanks!
Hi Stephen,
Yes!… it took me a bit, but I got this working in a demo.
Hi, Mottie, this script is really really great. Tested on IE7/8, Firefox and Chrome. No problem at all. Not a bug but got a thing, IE made it trouble for me, when you set, “buildArrows : false” and “toggleArrows : true”, IE stops with a javascript error. But I have a question, couldn’t find how to not to stop animation when i click a link in .
when i click the link in the panel, the link opens ina new window but the slide stops. Can i prevent this?
Hi Kürşad ÇAKIR!
Ok, I fixed the first problem you mentioned. But I don’t understand what you mean in the second one – the HTML you posted is missing. Could you please submit an issue with the problem and which animation are you referring to – the panel, arrows, navigation panel? Thanks!
thanks for this!
how does one create external controls? i don’t fully understand your instructions there.
thanks.
m
Thanks for the great plugin.
I’m not quite sure how to update the slider, I’ve updated my html but refreshing the page doesn’t update it.
I’m also not exactly sure how to use this code – do i add my new in here and leave it at the top of the page rather than adding it into the html with the rest on the page?
Thanks very much,
mike
here’s the code:
$(‘#slider1’)
.append(”)
.anythingSlider(); // update the slider
Hi,
Excuses for my bad english…
I try to customize AnythingSlider v1.4.
It’s work fine but I want to hide the numbers of slides (in left bottom) and the button Start/Stop (in right bottom).
Can you help me please ?
Thank’s very much
Hi,
I made a slideshow with AnythingSlider 1.4
It will search images in a database with a mysql query.
It works very well but I wonder if it is possible to preload the images (or at least a few) before starting the slideshow.
Thank’s very much
Hi,
I implemented the slider, but is giving an error. The first time I open the site in the first position of the slider appears the contents of the last position.
Have anyone else had this error?
Hey,
nice slider work ;) and nice cathead!
dings – but the slider isn’t responsive? Do you plan to add some responsive Code?
bye – so long