treehouse : what would you like to learn today?
Web Design Web Development iOS Development

How to use the Anything Slider

  • Hi Baldieboy!

    Please refer to the navigationSize documentation (at the bottom) for code examples on how to keep the tabs in view.
  • Hi there!

    I'm looking to use AnythingSlider on a site I'm building, to include a series of videos hosted by YouTube for the user to flick through. It works pretty well in most browsers, however in Opera (latest version, 11.6) on the Mac when I roll over, click play or try to cycle through the videos, it freezes the entire page! Once it has frozen you can scroll the page using the scroll bar on the right, but nothing is click-able.

    I'm using the
    <iframe>
    method of YouTube embedding so that it displays correctly on multiple devices eg. Safari on iPhone etc.

    Can anyone help me?

    Thanks in advance!
  • Mottie,
    Your support for this project is fantastic. Got the navigation working fine. Scrolls along nicely. One thing that would be nice in the near future is to be able to have the current slide shown in the middle of the navigation (ie. navigationSize set to 7 and current slide would always be shown at position 4 in the navigation with 3 tabs either side).
    Not complaining though cos it works great for me right now. I just need to work on some themes and getting the damn thing to look right for IE users. Why can't everyone just use firefox?
    Thanks again for your help.
  • @Baldieboy: My pleasure! And btw, did you see I have more themes here.

    @crug: I'm sad to say that is a known issue with YouTube iframes and Opera. I set up a compatibility table here... I'm really not sure what the best solution would be.
  • Thanks for the reply Mottie! I really appreciate it :)

    The reason I switched to the <iframe> method was because when I was using YouTube embed, if I viewed it on Safari Mobile on the iPhone it displayed all all the videos in the slider on screen at once instead of hiding them. Is there any other way around that problem (other than changing to the iframe method)?

    If so I could switch back to YouTube embed rather than iframe...
  • Hi crug!

    Sadly, the only way around the Safari black boxes is to hide the video completely when not in view. I posted a demo and some code in this reported issue, try it out and see if it solves your problem.
  • I probably have no business being on this Forum with my lack of knowledge, but I would really like to Install the Anything Slider into my website, which is an Open Source Blog Template, that I edit using KOMPOZER WYSIWYG html Editor. I have downloaded the ANYTHING FILES but have no Idea of how to install them. Would any of you experienced people be able to advise me, or point me toward some detailed Turtorials on this type of slider installation.
  • Hi Oceanblue!

    Everyone is welcome to post in these forums, well, except for those punks that only post advertisements! *shake fist*

    I've never heard of KOMPOZER nor am I sure which open source blog system you are using, but if you can add HTML to the page then it shouldn't be a problem. I've actually added all the HTML that needs to be included on your web page in the wiki documents. It looks like a lot of code, but that includes all of the stylesheets as an example. As well as the FX and video extensions which aren't needed for a basic setup. You could also check out the simple demo page which has the bare minimum setup.

    Please feel free to ask for help here.
  • Hi Mottie,

    I was wondering if the shortcode for showMultiple was working, I can't seem to get it to work. Many thanks if you can look into this!

    Alex
  • I know every little about shortcodes, you might want to ask your question in the Wordpress forums so Jacob can help you out.
  • Hi, can anyone give the source, some tutorial step by step adding anythingslider into my HTML site?
    I am quite newbie with any code, even adding default anythingslider into my HTML site.

    Thank so much!
  • Hi CSS masterminds

    Could anyone pretty please assist me in changing my nav buttons on my slider from Arrows to Nav bullets. (One bullet per slide)

    So from this : http://www.gallyapp.com/tf_themes/?theme=Lotus
    To this : http://www.lumiarte.com/luardeoutono/AnythingSlider/index.html (Just the bullets bottom right)

    Any help even in just the right direction would be GREATLY appreciated.
    Thank you kindly many times over!
  • @bintang77: Check out the setup documentation for more details.

    @ChrisM: I'm not sure what you mean, the nav buttons have never been arrows, they are tabs in the default theme, but there are several other themes that come with the default plugin and a few more you can get from here. That's the css to move the navigation around. To change the navigation from numbers to bullets, use the navigationFormatter - see the docs here.
  • @Mottie : Hey thanks a lot for the reply! The problem i'm having is that my anything slider was built into a wordpress theme that I purchased. However it was coded into the site without the admin panel or anything and coded in such a way that I can only see the 2 navigation arrows , as shown in http://www.gallyapp.com/tf_themes/?theme=Lotus .

    I have mailed the creator but to no avail. Where do I have to amend the code to get it back to a more default "AnythingSlider" ? If that makes any sense... The actual moving around of the nav in css is not a problem. Purely just changing it from the arrows as shown in the example to tabs / bullets.

    Thanks again!
  • Gotta love people that sell stuff and don't support it.

    Anyway, there's not much I can do without seeing the actual code, and I don't have $35 laying around that I can use on a WP theme I'm never going to use. So if you can find where in the code that the slider is being initialized and share that code with me, I'm sure I can help. Otherwise, spam the hell out of the author of the theme! LOL.
  • Hey Mottie

    Yeah i'm quite fed up to say the least. Hope it's ok to send a pm ?
    Thank you so much.
  • I was wondering, if I could tweak the time between showing the actual slide and fading in the caption. I'm not sure how to approach this. Should I try it with onSlideComplete or within the anythingSliderFx? A hint to point me in the right direction would be appreciated. Thanks.
  • Try adding a set time out function inside of the "onSlideComplete" function, something like this:
    onSlideComplete: function(){
    setTimeout(function(){
    // show the caption
    }, 1000); // time delay in milliseconds
    }
  • Thanks Mottie!
  • LOL! I hope no one is keeping track of how many times I have edited this post, I keep discovering on my own what I'm doing wrong and my former question then becomes useless! ...I now have the slider up and working, but I still can't figure out how to get the photos loaded, and also what should be done with the files other than the code itself, such as the CSS, JS and IMAGE files ...where should these be stored. Any help will be appreciated.
    Thanks John
  • how to display a bullet navigation instead of numbers? like if the slider has only 3 contents then it should display 3 bullets or 3 circle not 1-3 numbers as a navigation and also where in the css I could customize the current navigation? like for example, the current slide is 1 of course the navigations is on the "1" if ever it is a number navigation and if it bullet navigation then the first bullet should be the active phase.

    Hope dudes here could give me a trick on this. thanks in advance.

  • @mejuliver!

    Make the navigationFormatter option return a bullet instead of a number (see the docs)

    navigationFormatter : function(index, panel){ return "&#9679;"; }
    
  • I have yet to find anyone that can give a straight forward explanation here or on you tube as to how to install anything slider ... smh

  • @nathan_marq Did you find the wiki documentation? If that doesn't help, please share what CMS you are using (e.g. WordPress), or is this for a basic HTML page?

  • its word press ... im setting it up on xampp first to make sure it runs ...

  • Hi nathan05!

    Try the Wordpress plugin

  • hi guys! i am also having problem with anythingslider, on my wp page... it does not show up last post, as you see on my page here : http://koskomik.com/wordpress/ can you tell me, how can i fix this issue?

    thank you!

  • Hi all, I'm using this on a WP theme, but not via the WP plugin. I'm just referencing the anythingslider.js file. Everything works great... but is there a way I can order the slides, or somehow assign a value to each slide and tell it to display ascending or descending?

    Any help would be greatly appreciated! :)

  • Can any one help me with fade in/fade out in anything slider plugin. I am using anything slider plugin but fadein/fadeout not working properly in it. Please help it urgent..

    Thanks

  • @sizgi: I don't have permission to view that page, and I can't off the top of my head figure out why it would do that.

    @JRiley21: I'm not much help with WordPress, but you should be able to contact the WP theme author and ask how to reorder the slides.

    @ash: maybe try modifying the css:

      .anythingSlider .fade .activePage { z-index: 1; }
      .anythingSlider .fade .panel { z-index: 0; }
    

    described in this issue

  • i am sorry @mottie ! i am having server problems

  • I'm a total novice on all this CSS code. How can this be explained simply to a computer user, without having a high computer degree? My son has a degree in IT. I have no idea where these codes come from and where to see them,. Can I get a simplified answer for a person just wanting to keep the scroller at the top?__