Grow your CSS skills. Land your dream job.

How to use the Anything Slider

  • # November 23, 2010 at 7:28 pm

    Okay dude. I’m going to do ALL of this on Wednesday. I will send you a message once it’s working or not working. Thanks for helping me out even more.

    # November 23, 2010 at 9:05 pm

    Okay, I couldn’t wait so I just tried my best now. Something definitely went wrong. The images are not sliding, instead they’re just showing up in a list. Here’s the link to my site:

    http://www.LearnWriter.com/

    Let me know what you think I did wrong. Thanks.

    # November 24, 2010 at 5:53 am

    Go to github and download the latest version of anything slider. Extract it into a folder. You should have a bunch of folders named: colourbox, css, images, js.
    Copy the ‘css, images, js’ folders into your theme folder. Delete anything you feel is unnecessary—such as those slide example–images, etc.

    Remove anything you’ve already added to your header section that is related to anythingSlider and replace it with this:





    Now, remove the ID from div#anything_slider and add it to the <ul> – You have to target a <ul>, not a <div>

    It should look like this:

    It should work, but if not, upload it and let me have a look.

    # November 25, 2010 at 12:11 pm

    Okay dude! We’re half way there (I think). Can you take a look at the site (http://learnwriter.com) and tell me what you think happened? Do you think this is a CSS problem? I want to use my own border (1px solid #color), and I want it aligned with the content on posts (15px from the edge of the page). It should only be 620px wide too.

    Also I want the gallery to start right away (no stop/start button), and pause for 3 seconds for each image. Also, I’ve seen other galleries that have left/right arrows when you hover over the gallery. I like this look over the look that it has now. Thanks for all the help, dude.

    # November 28, 2010 at 8:46 am

    Currently the gallery does start right away and it does pause on a slide for 3 seconds. In order to hide the start/stop button, add this to your CSS:
    .start-stop{display: none;}
    To change the width of the slider, open anythingslider.css and change ‘width: 700px;’ to ‘width: 620px;’ – This is on line 11.

    Do you mean you want the current arrows to appear once you hover on the slider?

    I dislike the start/stop thing with anythingSlider and I like the thought of having a pretty cool ‘fader’ too so I’m busy creating a content slider too – You can find the beta here if you’re want to have a look (Note: AnythingSlider is definitely way more advanced with much more features)

    # November 30, 2010 at 10:20 am

    I did change the width to 620px, but it’s not respecting my change. I want the slider to be as wide as the images in it (with a 1 or 2 pixels for a border). Right now it’s 700px wide because there are some divs to the left, right, and bottom of the slider, but I’m not sure why. Any thoughts?

    I changed my mind about having the arrows show up when I hover over the slider. I kind of like the current getup with the option to move to a different slide by clicking on the numbers at the bottom. I just need to slim the width of the slider and get rid of those invisible divs.

    # November 30, 2010 at 10:49 am

    Add this to your stylesheet:

    #art-main div.anythingSlider{width: 620px;}
    # December 1, 2010 at 2:16 am

    Hey I added that style to my style.css file and that sort of worked. But I was using Firebug and realized that there are invisible left and right arrow buttons to the left and right of the gallery window. Not sure why or how to get rid of them. Not sure if you know what Firebug is, but if you do, and if you want to or have time, you can use it to see what’s going on.

    # December 1, 2010 at 4:39 am

    Change this:

    $(document).ready(function(){
    $('#anything_slider').anythingSlider();
    });

    To this:

    $(document).ready(function(){
    $('#anything_slider').anythingSlider({
    buildArrows: false
    });
    });
    # December 2, 2010 at 6:28 pm

    Cool, but where do I find the first code?

    # December 3, 2010 at 2:18 am

    In your header.

    Earlier I said to remove everything and replace it with this:





    Now remove:

    $(document).ready(function(){
    $('#anything_slider').anythingSlider();
    });

    And replace it with:

    $(document).ready(function(){
    $('#anything_slider').anythingSlider({
    buildArrows: false
    });
    });
    # December 4, 2010 at 9:39 pm

    Thanks dude. Again and again, sorry for being a pest. I know this has to be the longest post in the history of the Internet, but this is what I still want to accomplish:

    • Make the Gallery take up only the space I want (620px + 1-2px for border).
    • Align the left side of the gallery with the he left side of the posts titles (I guess that’s good design).
    • Can you tell me how to change the colors of the numbered navigation of the gallery? I’m playing with the CSS but that’s not working.

    I want to mention that when I added the CSS files from the Anythign Slider folder, I didn’t add them into my Styles.css file. I added them individually to my theme. I assume that’s correct, but just wanted to let you know in case it’s not. The reason I mention this is because when I make a change in the AnythingSlider.css file, nothing happens. I’m wondering if I had to copy & paste that file to my Style.css file. Doubt it but wanted to run it by you.

    Thanks a freaking lot dude.

    # December 5, 2010 at 3:12 am

    You can also try Auto-Playing Featured Content Slider available at http://css-tricks.com/downloads/

    For a newbie I think that customizing this slider is much more easier than customizing Anything Slider.

    # December 5, 2010 at 11:59 pm

    Hmm. I’ve invested a lot of time trying to get AnythingSlider to look how I want it to. I feel like I’m almost there (here’s my site: LearnWriter.com). You say this other slider is “much easier” to customize AnythingSlider. Why do you feel this way? Remember, I don’t know jQuery at all. Don’t know PHP either.

    Also the instructions for AnythingSlider were not user friendly at all in my opinion. You download the slider, you get a bunch of folder with files in them, but then what? Where are the DETAILED instructions on what to do with these files? Do you need all of them or can you abandon some files? Sorry for going on a rant here, dude. Just want to make sure that if I abandon AnythingSlider, this Auto-Playing slider will be much easier to customize.

    # December 6, 2010 at 12:28 am

    To align anything slider to the left, add this to your css:

    div.anythingSlider{padding: 0 0 28px 0 !important;}

    and to change the color, add this to your css:

    div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a{background-color: #666 !important;}

    AnythingSlider isn’t particularly difficult to use. I don’t think other sliders will be much more/less difficult.

Viewing 15 posts - 16 through 30 (of 84 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".