Forums

djrb

This is my first time posting a question on the forum.

I'm resizing the anything slider to be wider and taller than Chris' original, and for the life of me I can't figure out where to adjust the placement of the arrows and the numbers in the yellow boxes at the bottom so that they're not floating in the image area.
See image below:
Thanks in advance for any help you can offer.
Denise

cybershot

If you don't post your code, no one will be able to help you.

lacylouwho

You'll need to edit this section in slider.css:


.anythingSlider .arrow                  { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSlider .forward                { background-position: 0 0; right: -20px; }
.anythingSlider .back                   { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover          { background-position: 0 -200px; }
.anythingSlider .back:hover             { background-position: -67px -200px; }

LEFT and RIGHT declarations within the .anythingSlider .forward and .anythingSlider .back items ... that tells the arrows where to appear horizontally.

The TOP declaration within the .anythingSlider .arrow item - that tells the arrows where to appear vertically.

You just need to play around with those numbers until you get your arrows where you need them.

lacylouwho

Oh - and to move the numbered taps -- edit this part:

#thumbNav                               { position: relative; top: 323px; text-align: center; }
#thumbNav a                             { color: black; font: 11px/18px Georgia, Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #c58b04 url(../images/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#thumbNav a:hover                       { background-image: none; }
#thumbNav a.cur                         { background: #e0a213; }

the TOP in #thumbNav tells the navigation bar where to appear.

udarajunk

I am having a similar problem, but worse. I want to completely get rid of the back and forward buttons as they are creating extra space on the sides of my slider. Can someone please help me with this?

jamy_za

@udarajunk

.anythingSlider .arrow { display: none; }

username

hello,

I need a slideshow just like this page :
http://www.t-bar.com.au/.

I need to be able to add or remove images and images must contain links to open different new pages .

can I use anythingslider? what customizations do I need?

or can u please recommend me any other slider?

I am in urgent need to get the solution..

Istiaque Ahmed

MattCroucher

To stop navigation buttons appearing you don't even need to edit the css, although obviously you can if you want. Just add

buildNavigation : false,

taken from the function list within the jquery.anythingslider.js file and add it to the list of functions within the head section of the html. If you want the navigation again at a later date you just swap it to say true.

The problem I have is with stopping the slider from auto resizing content even though the functions for this have all been set to false and every bit of css I can find to deal with size has been changed as well.

Link to site is:

http://firstbroadcast.co.uk/wildfire/

Anyone got any thoughts?

Mottie

Hi Matt!

From looking at your css, you need to set the slider-words width to a fixed number. It's set to "auto"

Hompimpa

@udarajunk: Disable the buildArrows and remove the padding on div.anythingSlider:

buildArrows:false

div.anythingSlider {
  ...
  padding:0px;
  ...
}

Or simply set the navigation to autohide:

toggleArrows:true,
toggleControls:true

treehouse : what would you like to learn today?

Forums

Resizing Anything Slider