Hi,
I am using anything slider in my client website. What i am facing that i have numbers in navigation control. I want to change the navigation numbers to bullets. Can some one guide me how can i do that.
Here is the URL of my work.
Kindly help me out to sort the problem. I will be very grateful.
Thanks in Advance
That's not a hard coded thing.
Please have a look on my code. May be then you will get the idea of how to do....
HTML Code
CSS Code
I am using anything slider in my client website. What i am facing that i have numbers in navigation control. I want to change the navigation numbers to bullets. Can some one guide me how can i do that.
Here is the URL of my work.
Kindly help me out to sort the problem. I will be very grateful.
Thanks in Advance
That's not a hard coded thing.
Please have a look on my code. May be then you will get the idea of how to do....
Code:
<script type="text/javascript">
$(function(){
$('#slider').anythingSlider({
height: '573',
expand: true,
startStopped: false,
resizeContents: true,
pauseOnHover: true,
buildArrows: false,
autoPlayLocked: false,
enableKeyboard: true,
hashTags: false,
navigationFormatter:function(i,panel){
return'<img src="images/slider/slider-item-'+['1','2','3','4','4'][i-1]+'-thumb.jpg" alt="" />';
}
})
.anythingSliderFx({
'.slider-caption-top':['caption-Top','300px','400','easeOutExpo'],
'.slider-caption-left':['caption-Left','300px','400','easeInQuad'],
'.slider-caption-right':['caption-Right','300px','400','easeInQuad'],
'.slider-caption-bottom':['caption-Bottom','300px','400','easeOutExpo']});
$(".thumbNav").hide();
$('#slider-wrapper').hover(function(){
//$(".slideforward").stop(true,true).fadeIn();
//$(".slidebackward").stop(true,true).fadeIn();
$(".thumbNav").stop(true,true).fadeIn();
},function(){
//$(".slideforward").fadeOut();
//$(".slidebackward").fadeOut();
$(".thumbNav").fadeOut();
});
//$(".slideforward").click(function(){$('#slider').data('AnythingSlider').goForward();});
//$(".slidebackward").click(function(){$('#slider').data('AnythingSlider').goBack();});
});
</script>
Code:
<div id="slider-wrapper" class="fluid">
<!--start slider images-->
<ul id="slider">
<li>
<div class="slider-item item_1">
<!--start slider 1 caption -->
<div class="slider-caption-left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.</p>
<a href="javascript:void(0);">More</a>
</div>
<!--end slider 1 caption -->
</div>
</li>
<li>
<div class="slider-item item_2">
<!--start slider 2 caption -->
<div class="slider-caption-bottom caption-content">
<p>
<span>the perfect</span>
</p>
<p class="pictured">
<strong>photography slider</strong>
</p>
</div>
<!--end slider 2 caption -->
</div>
</li>
<li>
<div class="slider-item item_3">
<!--start slider 3 caption -->
<div class="slider-caption-top caption-content">
<p>
<span>Boost Your Creativity</span>
</p>
<p class="pictured">
<strong>We blow your Mind</strong>
</p>
</div>
<!--end slider 3 caption -->
</div>
</li>
<li>
<div class="slider-item item_4">
<!--start slider 4 caption -->
<div class="slider-caption-right caption-content">
<p>
<span>Colors of Life</span>
</p>
</div>
<!--end slider 4 caption -->
</div>
</li>
<li>
<div class="slider-item item_5">
<!--start slider 4 caption -->
<div class="slider-caption-right caption-content">
<p>
<span>Colors of Life</span>
</p>
</div>
<!--end slider 4 caption -->
</div>
</li>
</ul>
<!--end slider images-->
<!--slider navigation-->
<div class="pauseButton"></div>
<!--end slider navigation-->
</div>
Code:
div.anythingSlider {
display: block;
width: 700px;
height: 573px;
margin: 0 auto;
overflow: hidden; /* needed for Opera and Safari */
}
.nextButton, .prevButton {
overflow: hidden;
padding: 0;
position: absolute;
top: 75px;
margin:0;
cursor:pointer;
display: none;
background: url(../images/slider_controls.png) no-repeat;
}
.pauseButton, .playButton {
height:19px;
width: 24px;
bottom: 10px;
position:absolute;
cursor:pointer;
overflow: hidden;
margin:0;
padding:0;
display: none;
}
.nextButton {
right: 0;
background-position: 0 0;
width: 30px;
height: 415px;
}
.nextButton:hover {
right: 0;
background-position: 0 -420px;
width: 30px;
height: 415px;
}
.prevButton {
left: 0;
background-position: 0 -936px;
width: 30px;
height: 415px;
}
.prevButton:hover {
left: 0;
background-position: 0 -1356px;
width: 30px;
height: 415px;
}
.pauseButton {
left:50%;
background-position: 0 -840px;
width: 24px;
height: 19px;
}
.pauseButton:hover {
left:50%;
background-position: 0 -864px;
width: 24px;
height: 19px;
}
.playButton {
left:50%;
background-position: 0 -888px;
width: 24px;
height: 19px;
}
.playButton:hover {
left:50%;
background-position: 0 -912px;
width: 24px;
height: 19px;
}
div.anythingSlider .start-stop {
display:none !important;
}
div.anythingSlider .thumbNav {
padding: 0;
position: absolute;
top: 538px;
margin-right: -80px;
right: 50%;
display: none;
}
div.anythingSlider .thumbNav li {
display: inline;
margin-left: 10px;
}
div.anythingSlider .thumbNav a{
display: inline-block;
text-decoration: none;
height: 17px;
width: 17px;
line-height:17px;
background-repeat: repeat-x;
text-align: center;
outline: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2px;
font-size: 10px;
}
/**** DO NOT CHANGE BELOW THIS LINE ****/
/* anythingSlider viewport window */
div.anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
div.anythingSlider {
position: relative;
padding: 0px;
}
/* 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;
overflow: hidden;
float: left;
padding: 0;
margin: 0;
}
.slidertip{
outline: none;
position: relative;
text-decoration: none !important;
}
span.slidertip { display:inline-block; /* IE trick */ }
.slidertip:hover .tooltip{
opacity:1 !important;
visibility:visible;
}
.tooltip{
padding-top: 8px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
position:absolute;
opacity:0;
text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4);
visibility:hidden;
white-space:nowrap;
width:88px !important;
white-space:normal !important;
background: url(../images/slidertip-bg.png) no-repeat;
z-index:9999;
height: 106px;
}
.tooltip.center{
left:-48px;
margin-left:50%;
right:auto;
}
.tooltip.top{
bottom:100%;
margin-bottom:0px;
top:auto;
}
#slider-wrapper {
position:relative !important; /*position must be relative*/
margin-bottom:0;
min-height:415px;
overflow:hidden;
}
.slider-item {
display:block;
background-color: transparent;
background-repeat: no-repeat;
background-position: center top;
position: relative;
min-height: 415px;
width: 669px;
}
.slide1-content{
background: url(../images/slide1-effect.png) no-repeat 150px 50px;
width: 669px;
height: 514px;
}
/* Caption Directions */
.slider-caption-top {
top: -275px;
position: absolute;
left: 50%;
margin-left: -480px;
}
.slider-caption-left {
position: absolute;
left: -50%;
margin-left: -150px;
top: 152px;
width: 230px;
}
.slider-caption-right {
position: absolute;
right: -50%;
margin-right: -480px;
top: 125px;
}
.slider-caption-bottom {
bottom: -275px;
position: absolute;
left: 50%;
margin-left: -480px;
}
.caption-content {
text-shadow:1px 1px 0px #000;
letter-spacing:1px;
}
.caption-content span, .caption-content a.primary {
float: left;
}
.caption-content a.primary {
clear: both;
display: block;
position: relative;
}
.caption-content span {
clear: both;
color: #f5f5f5;
}
.caption-content strong {
float: left;
clear: left;
padding: 5px 9px 5px 9px;
}
.caption-content p {
float: none;
}
.caption-content p.pictured {
margin-bottom: 0;
}
Comment