469,307 Members | 2,064 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,307 developers. It's quick & easy.

How to change the navigation control numbers to bullets in Anything Slider

245 100+
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....

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.         $(function(){
  3.             $('#slider').anythingSlider({
  4.                 height: '573',
  5.                 expand: true,
  6.                 startStopped: false,
  7.                 resizeContents: true,
  8.                 pauseOnHover: true,
  9.                 buildArrows: false,
  10.                 autoPlayLocked: false,
  11.                 enableKeyboard: true,
  12.                 hashTags: false,
  13.                 navigationFormatter:function(i,panel){
  14.                     return'<img src="images/slider/slider-item-'+['1','2','3','4','4'][i-1]+'-thumb.jpg" alt="" />';
  15.                 }
  16.             })
  17.             .anythingSliderFx({
  18.                 '.slider-caption-top':['caption-Top','300px','400','easeOutExpo'],
  19.                 '.slider-caption-left':['caption-Left','300px','400','easeInQuad'],
  20.                 '.slider-caption-right':['caption-Right','300px','400','easeInQuad'],
  21.                 '.slider-caption-bottom':['caption-Bottom','300px','400','easeOutExpo']});
  22.                 $(".thumbNav").hide();
  23.                 $('#slider-wrapper').hover(function(){
  24.                     //$(".slideforward").stop(true,true).fadeIn();
  25.                     //$(".slidebackward").stop(true,true).fadeIn();
  26.                     $(".thumbNav").stop(true,true).fadeIn();
  27.                 },function(){
  28.                     //$(".slideforward").fadeOut();
  29.                     //$(".slidebackward").fadeOut();
  30.                     $(".thumbNav").fadeOut();
  31.                 });
  32.                 //$(".slideforward").click(function(){$('#slider').data('AnythingSlider').goForward();});
  33.                 //$(".slidebackward").click(function(){$('#slider').data('AnythingSlider').goBack();});
  34.         });
  35.         </script>
  36.  
  37.  
HTML Code
Expand|Select|Wrap|Line Numbers
  1. <div id="slider-wrapper" class="fluid">
  2.             <!--start slider images-->
  3.             <ul id="slider">                                           
  4.                 <li>
  5.                     <div class="slider-item item_1">
  6.                     <!--start slider 1 caption -->
  7.                     <div class="slider-caption-left">
  8.                         <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>
  9.                         <a href="javascript:void(0);">More</a>
  10.                     </div>
  11.                     <!--end slider 1 caption -->
  12.                     </div>
  13.                 </li>                 
  14.                 <li>
  15.                     <div class="slider-item item_2">
  16.                         <!--start slider 2 caption -->
  17.                         <div class="slider-caption-bottom caption-content">
  18.                             <p>
  19.                                 <span>the perfect</span>
  20.                             </p>
  21.                             <p class="pictured">
  22.                                 <strong>photography slider</strong>
  23.                             </p>
  24.                         </div>
  25.                         <!--end slider 2 caption -->
  26.                     </div>
  27.                 </li>
  28.                 <li>
  29.                     <div class="slider-item item_3">
  30.                         <!--start slider 3 caption -->
  31.                         <div class="slider-caption-top caption-content">
  32.                             <p>
  33.                                 <span>Boost Your Creativity</span>
  34.                             </p>
  35.                             <p class="pictured">
  36.                                 <strong>We blow your Mind</strong>
  37.                             </p>
  38.                         </div>
  39.                         <!--end slider 3 caption -->
  40.                     </div>
  41.                 </li>
  42.                 <li>
  43.                     <div class="slider-item item_4">
  44.                     <!--start slider 4 caption -->
  45.                         <div class="slider-caption-right caption-content">
  46.                             <p>
  47.                                 <span>Colors of Life</span>
  48.                             </p>
  49.                         </div>
  50.                     <!--end slider 4 caption -->
  51.                     </div>
  52.                 </li>
  53.                 <li>
  54.                     <div class="slider-item item_5">
  55.                     <!--start slider 4 caption -->
  56.                         <div class="slider-caption-right caption-content">
  57.                             <p>
  58.                                 <span>Colors of Life</span>
  59.                             </p>
  60.                         </div>
  61.                     <!--end slider 4 caption -->
  62.                     </div>
  63.                 </li>
  64.             </ul>
  65.             <!--end slider images-->
  66.             <!--slider navigation-->
  67.             <div class="pauseButton"></div>
  68.             <!--end slider navigation-->                
  69.         </div>
  70.  
CSS Code
Expand|Select|Wrap|Line Numbers
  1. div.anythingSlider {
  2.     display: block;
  3.     width: 700px;
  4.     height: 573px;
  5.     margin: 0 auto;
  6.     overflow: hidden; /* needed for Opera and Safari */
  7. }
  8. .nextButton, .prevButton {
  9.     overflow: hidden;
  10.     padding: 0;
  11.     position: absolute;
  12.     top: 75px;
  13.     margin:0;
  14.     cursor:pointer;
  15.     display: none;
  16.     background: url(../images/slider_controls.png) no-repeat;
  17. }
  18. .pauseButton, .playButton {
  19.     height:19px;
  20.     width: 24px;
  21.     bottom: 10px;
  22.     position:absolute;
  23.     cursor:pointer;
  24.     overflow: hidden;
  25.     margin:0;
  26.     padding:0;
  27.     display: none;
  28. }
  29. .nextButton {
  30.     right: 0;
  31.     background-position: 0 0;
  32.     width: 30px;
  33.     height: 415px;
  34. }
  35. .nextButton:hover {
  36.     right: 0;
  37.     background-position: 0 -420px;
  38.     width: 30px;
  39.     height: 415px;
  40. }
  41. .prevButton {
  42.     left: 0;
  43.     background-position: 0 -936px;
  44.     width: 30px;
  45.     height: 415px;
  46. }
  47. .prevButton:hover {
  48.     left: 0;
  49.     background-position: 0 -1356px;
  50.     width: 30px;
  51.     height: 415px;
  52. }
  53. .pauseButton {
  54.     left:50%;
  55.     background-position: 0 -840px;
  56.     width: 24px;
  57.     height: 19px;
  58. }
  59. .pauseButton:hover {
  60.     left:50%;
  61.     background-position: 0 -864px;
  62.     width: 24px;
  63.     height: 19px;
  64. }
  65. .playButton {
  66.     left:50%;
  67.     background-position: 0 -888px;
  68.     width: 24px;
  69.     height: 19px;
  70. }
  71. .playButton:hover {
  72.     left:50%;
  73.     background-position: 0 -912px;
  74.     width: 24px;
  75.     height: 19px;
  76. }
  77. div.anythingSlider .start-stop {
  78.     display:none !important;
  79. }
  80. div.anythingSlider .thumbNav {
  81.     padding: 0;
  82.     position: absolute;
  83.     top: 538px;
  84.     margin-right: -80px;
  85.     right: 50%;
  86.     display: none;
  87. }
  88. div.anythingSlider .thumbNav li {
  89.     display: inline;
  90.     margin-left: 10px;
  91. }
  92. div.anythingSlider .thumbNav a{
  93.     display: inline-block;
  94.     text-decoration: none;
  95.     height: 17px;
  96.     width: 17px;
  97.     line-height:17px;
  98.     background-repeat: repeat-x;
  99.     text-align: center;
  100.     outline: 0;
  101.     border-radius: 5px;
  102.     -moz-border-radius: 5px;
  103.     -webkit-border-radius: 5px;    
  104.     padding: 2px;
  105.     font-size: 10px;
  106. }
  107.  
  108. /**** DO NOT CHANGE BELOW THIS LINE ****/
  109. /* anythingSlider viewport window */
  110. div.anythingSlider .anythingWindow {
  111.     overflow: hidden;
  112.     position: relative;
  113.     width: 100%;
  114.     height: 100%;
  115. }
  116. div.anythingSlider {
  117.     position: relative;
  118.     padding: 0px;
  119. }
  120. /* anythingSlider base UL */
  121. ul.anythingBase {
  122.     background: transparent;
  123.     list-style: none;
  124.     position: absolute;
  125.     top: 0;
  126.     left: 0;
  127.     margin: 0;
  128.     padding: 0;
  129. }
  130. ul.anythingBase li.panel {
  131.     background: transparent;
  132.     display: block;
  133.     overflow: hidden;
  134.     float: left;
  135.     padding: 0;
  136.     margin: 0;
  137. }
  138. .slidertip{
  139.     outline: none;
  140.     position: relative;
  141.     text-decoration: none !important;
  142. }
  143. span.slidertip { display:inline-block; /* IE trick */ }
  144. .slidertip:hover .tooltip{
  145.     opacity:1 !important;
  146.     visibility:visible;
  147. }
  148. .tooltip{
  149.     padding-top: 8px;
  150.     padding-right: 5px;
  151.     padding-bottom: 5px;
  152.     padding-left: 5px;
  153.     position:absolute;
  154.     opacity:0;
  155.     text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4);
  156.     visibility:hidden;
  157.     white-space:nowrap;
  158.     width:88px !important;
  159.     white-space:normal !important;
  160.     background: url(../images/slidertip-bg.png) no-repeat;
  161.     z-index:9999;
  162.     height: 106px;
  163. }
  164. .tooltip.center{
  165.     left:-48px;
  166.     margin-left:50%;
  167.     right:auto;
  168. }
  169. .tooltip.top{
  170.     bottom:100%;
  171.     margin-bottom:0px;
  172.     top:auto;
  173. }
  174. #slider-wrapper {
  175.     position:relative !important; /*position must be relative*/
  176.     margin-bottom:0;
  177.     min-height:415px;
  178.     overflow:hidden;
  179. }
  180. .slider-item {
  181.     display:block;
  182.     background-color: transparent;
  183.     background-repeat: no-repeat;
  184.     background-position: center top;
  185.     position: relative;
  186.     min-height: 415px;
  187.     width: 669px;
  188. }
  189. .slide1-content{
  190.     background: url(../images/slide1-effect.png) no-repeat 150px 50px;
  191.     width: 669px;
  192.     height: 514px;
  193. }
  194. /* Caption Directions */
  195. .slider-caption-top {
  196.     top: -275px;
  197.     position: absolute;
  198.     left: 50%;
  199.     margin-left: -480px;
  200. }
  201. .slider-caption-left {
  202.     position: absolute;
  203.     left: -50%;
  204.     margin-left: -150px;
  205.     top: 152px;
  206.     width: 230px;
  207. }
  208. .slider-caption-right {
  209.     position: absolute;
  210.     right: -50%;
  211.     margin-right: -480px;
  212.     top: 125px;
  213. }
  214. .slider-caption-bottom {
  215.     bottom: -275px;
  216.     position: absolute;
  217.     left: 50%;
  218.     margin-left: -480px;
  219. }
  220. .caption-content {
  221.     text-shadow:1px 1px 0px #000;
  222.     letter-spacing:1px;
  223. }
  224. .caption-content span, .caption-content a.primary {
  225.     float: left;
  226. }
  227. .caption-content a.primary {
  228.     clear: both;
  229.     display: block;
  230.     position: relative;
  231. }
  232. .caption-content span {
  233.     clear: both;
  234.     color: #f5f5f5;
  235. }
  236. .caption-content strong {
  237.     float: left;
  238.     clear: left;
  239.     padding: 5px 9px 5px 9px;
  240. }
  241. .caption-content p {
  242.     float: none;
  243. }
  244. .caption-content p.pictured {
  245.     margin-bottom: 0;
  246. }
  247.  
Sep 30 '11 #1

✓ answered by Dormilich

then I’d say it’s coded into the anythingSlider library.

3 4085
Dormilich
8,651 Expert Mod 8TB
this where you have 1 2 3 4 5 ?

change the text in the links.
Sep 30 '11 #2
Dormilich
8,651 Expert Mod 8TB
then I’d say it’s coded into the anythingSlider library.
Sep 30 '11 #3
neovantage
245 100+
Yes you were right. In order to change the numbers to bullets we have to use the theme minimalist-round and the relevant css.

Thanks again
Oct 6 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by bli2001 | last post: by
1 post views Thread by John | last post: by
1 post views Thread by Luke | last post: by
2 posts views Thread by =?Utf-8?B?V2FubmFiZQ==?= | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.