javascript - DIY Slider simple pagination -

I am searching, but I can not find anything in this document, unless I miss it Coming in I'm using this simple DIY slider and I want to display the current slide

Like this:
3 out of 5

or this:
- - X - -

  $ (". Slider"). Diyslider ({width: "400px", height: "200px", display: 1, loop: false,}); Use the button to change $ ("current-slide") // slide $ ("# -k-left"). Bind ("click", function () {$ (". Slider"). Diaslider ("move" "back");}); $ ("# Right") Tie ("click", function () {$ (". Slider"). Die cylinder ("move", "forward");});  

Try this way

HTML code

  & lt; Button ID = "go-left" & gt; & Amp; Laquo; & Lt; / Button & gt; & Lt; Button ID = "go-right" & gt; & Amp; Raquo; & Lt; / Button & gt; & Lt; Div class = "slider" & gt; & Lt ;! - Slider - & gt; & Lt; Div & gt; & Lt ;! - Mandatory diu used by slider - & gt; & Lt ;! - Each Divil is considered a slide - & gt; & Lt; Div class = "one" & gt; Div # 1 & lt; / Div & gt; & Lt; Div class = "b" & gt; Div # 2 & lt; / Div & gt; & Lt; Div square = "c" & gt; Div # 3 & lt; / Div & gt; & Lt; Div class = "d" & gt; Div # 4 & lt; / Div & gt; & Lt; Div class = "e" & gt; Div # 5 & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "counter" & gt; & Lt ;! - Counter - & gt; & Lt; Span class = "current-slide" & gt; & Lt; / Span & gt; & Lt; Duration class = "total-slides" & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; Div class = "current slide" & gt; & Lt; Span class = "cur-slide" & gt; & Lt; / Span & gt; & Lt; / Div & gt;  

JS code:

  // Hide the message while moving the slider, and counter $ ("update.l slider" ). Tie ("moved, decilider", function (event, slide, slide number) {slideNo = ""; $ ("# counter current-slide"). Text (slide number); curlide = $ ("# counter (Index == slide number) Slide + = "" + slideNumber + "" else slideNo + = "-"; Index ++;} $ (".cur-slide"). Text (Slide No);}) Start the slider $ (". Slider"). Die sider ({width: "400px", height: "200px", display: 1, loop: false, start: 1}); // First slide $ ( ". Cur-slide") from the slider index at the beginning Set the counters' slide count after typing the text ("1 - - - -"); / / slider $ ("# counter total-slides"). Text ($ (".l slider") .DisSheller ("GetSlidesCount")); // Use the button to use the slide ("# go-left"). Bind ("click", function () {$ (". Slider"). Diyslider ( "Move", "back");}) $ ("# right"). Tie ("click", function () {$ (". Slider"). Die cylinder ("move", "forward") ;});  

CSS:

  div {color: # 000; Font-size: 30px; Line-height: 1.5 AM; font-weight: bold; } Div.a {background: red; } Div.b {background: green; } Div.c {background: orange; } Div.d {Background: Black; Color: #fff; } Div.e {background: pink; } .slider {border: 3px solid # 000; }  Live demo:  
 
 Happy coding :)