How to use the Anything Slider

[HenryHunter]

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.

[jamygolden]

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)

[HenryHunter]

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.

[jamygolden]

Add this to your stylesheet:

#art-main div.anythingSlider{width: 620px;}

[HenryHunter]

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.

[jamygolden]

Change this:

$(document).ready(function(){

$('#anything_slider').anythingSlider();

});

To this:

$(document).ready(function(){

$('#anything_slider').anythingSlider({

buildArrows: false

});

});

[HenryHunter]

Cool, but where do I find the first code?

[jamygolden]

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

});

});

[HenryHunter]

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.

[daredanger]

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

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

[HenryHunter]

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.

[jamygolden]

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.

[HenryHunter]

Thanks jamy_za! I’m gonna stick with it. Now I’m assuming you want me to add that to my style.css file, not the anythingslider.css file. Does the anythingslider.css serve a real purpose? I’ve made changes to the file but see no results on my site. Maybe the file is not linked properly in the header?

[jamygolden]

Add it to your style.css file. Leave anythingslider.css, it is working as it should.

[HenryHunter]

Hey sorry for not responding for a while. I’ve been playing with the CSS myself and I’ve finally made some progress but the gallery is still not perfect. Instead of explaining to you what’s left, I recorded a video of the issues and uploaded it up on YouTube. I think that’s an easier way to explain it. If you don’t mind taking a look at it here’s the link to the video.

If I wasn’t clear on any point just let me know. Thanks a million dude.

[Author]

Posts