Home › Forums › JavaScript › Resizing Anything Slider
- This topic is empty.
-
AuthorPosts
-
November 11, 2009 at 10:50 am #26726
djrb
MemberThis 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.
DeniseNovember 11, 2009 at 7:36 pm #66471cybershot
ParticipantIf you don’t post your code, no one will be able to help you.
November 13, 2009 at 2:20 pm #66526lacylouwho
MemberYou’ll need to edit this section in slider.css:
Code:.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.
November 13, 2009 at 2:21 pm #66527lacylouwho
MemberOh – and to move the numbered taps — edit this part:
Code:#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.
September 21, 2010 at 7:56 am #79429udarajunk
MemberI 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?
September 22, 2010 at 1:26 am #79319jamygolden
Member.anythingSlider .arrow { display: none; }
November 24, 2010 at 8:30 am #72367username
Participanthello,
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
February 27, 2012 at 6:15 am #97571MattCroucher
MemberTo 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?
February 28, 2012 at 1:32 pm #97676Mottie
MemberHi Matt!
From looking at your css, you need to set the slider-words width to a fixed number. It’s set to “auto”
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.