- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Hello,
I am using AnythingSlider on my site and it is all working well except that my arrow images are not showing up. I can click the blank space next to my slider box and it goes to the next slide or previous slide, but the arrow is not showing up. All of the files are in the right locations on my server space, but the arrows just wont show. Can anyone help? Thanks!
Here is my code…
/******* SET DEFAULT DIMENSIONS HERE ********/
div.anythingSlider {
width: 500px;
height: 390px;
margin: 0 auto;
}
/****** SET COLORS HERE *******/
/* Default State */
div.anythingSlider .thumbNav a.cur, div.anythingSlider .thumbNav a {
background: #777;
color: #000;
}
div.anythingSlider .anythingWindow {
border-top: 3px solid #777;
border-bottom: 3px solid #777;
}
div.anythingSlider .start-stop {
background-color: #040;
color: #fff;
}
div.anythingSlider .start-stop.playing {
background-color: #800;
}
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
color: #ddd;
}
/* Active State */
div.anythingSlider.activeSlider .anythingWindow {
border-color: #7C9127;
}
div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a {
background-color: #7C9127;
}
div.anythingSlider .start-stop {
background-color: #080;
color: #fff;
}
div.anythingSlider .start-stop.playing {
background-color: #d00;
}
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
color: #fff;
}
/**** DO NOT CHANGE BELOW THIS LINE ****/
/* anythingSlider viewport window */
div.anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
/* wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
div.anythingSlider {
position: relative;
padding: 0 45px 28px 45px;
}
/* anythingSlider base UL */
ul.anythingBase {
background: transparent;
list-style: none;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
ul.anythingBase li.panel {
background: transparent;
display: block;
float: left;
padding: 0;
margin: 0;
}
/* Navigation Arrows */
div.anythingSlider .arrow {
top: 50%;
position: absolute;
display: block;
}
div.anythingSlider .arrow a {
display: block;
height: 120px;
margin: -60px 0 0 0;
width: 45px;
text-align: center;
outline: 0;
background: url(images/arrows-default.png) no-repeat;
text-indent: -9999px;
}
div.anythingSlider .forward { right: 0; }
div.anythingSlider .back { left: 0; }
div.anythingSlider .forward a { background-position: 0 -40px; }
div.anythingSlider .back a { background-position: -88px -40px; }
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: 0 -240px; }
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: -88px -240px; }
/* Navigation Links */
div.anythingSlider .anythingControls { outline: 0; }
div.anythingSlider .thumbNav { margin: 0; }
div.anythingSlider .thumbNav li { display: inline; }
div.anythingSlider .thumbNav a {
font: 11px/18px Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px 8px;
height: 18px;
margin: 0 5px 0 0;
background-image: url(../images/cellshade.png);
background-repeat: repeat-x;
text-align: center;
outline: 0;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
div.anythingSlider .thumbNav a:hover {
background-image: none;
}
/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider.rtl .thumbNav a { float: right; } /* reverse order of nav links */
div.anythingSlider.rtl .thumbNav { float: left; } /* move nav link group to left */
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
/* Autoplay Start/Stop button */
div.anythingSlider .start-stop {
background-image: url(../images/cellshade.png);
background-repeat: repeat-x;
background-position: center top;
padding: 2px 5px;
width: 40px;
text-align: center;
text-decoration: none;
float: right;
z-index: 100;
outline: 0;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; }
div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .thumbNav a, div.anythingSlider .arrow a, div.anythingSlider .start-stop {
transition-duration: 0;
-o-transition-duration: 0;
-moz-transition-duration: 0;
-webkit-transition-duration: 0;
}
Queenie's Killer Tomato Bagel Sandwich
Ingredients
- 1 bagel, split and toasted
- 2 tablespoons cream cheese
- 1 roma (plum) tomatoes, thinly sliced
- salt and pepper to taste
- 4 leaves fresh basil
In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.
-- Les Dawson
Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘JavaScript’ is closed to new topics and replies.