jQuery slider / Posts /

Dynamically modify the jQuery Slider


Hello I would need to use your control this way :

using demo 3 and add the number of page and content dynamically and using demo 4 inside all of them with image/description stored in a database

mathieu  11 years ago   viewed: 13893    

3 Answers


Please refer to the source code of demo 4 or demo 6 in the jquery slider download package. They are using the built-in function, init(), to start the slider dynamically. Note the slider option, initSliderByCallingInitFunc, should be set to true for using the init() function. 

Milo   10 years ago

How do I trigger the init? initSliderByCallingInitFunc=true but can't refresh (re-initialise) the slider!

Marco   5 years ago
I can think up two approaches.

Approach #1:
If your site is written with server-side language such as ASP.NET, you can implement it by the server-side scripts. After you get the data from database you create the jQuery slider HTML markup by the server side code, then render the page with the slider markup.

Approach #2:
  • Suppose your page does not have the jQuery slider content when the page is launched. So you just add this markup in your page:
    <div id="mcts1"></div>
    And also add this JavaScript function for later use:
    <script type=”text/javascript”> function addSlides(str){ var sliderElm = document.getElementById(“mcts1”); sliderElm.innerHTML = str; } </script>
  • Then your page is retrieving data from database;
  • Then your code will build the slider markup string based on the retrieved data;
  • Then you call the addSlides function by inserting this script to your page: 
    <script type=”text/javascript”>  addSlides(‘<div class="textSlide"><p>HTML Slide</p>Text text text</div><img src="slide-5.jpg" />’); </script>
    If your page is ASP.NET, above code will be like below in the code behind:
    Page.ClientScript.RegisterStartupScript(this.GetType(), "myscript1", "<script type=\"text/javascript\"><div class=\"textSlide\"><p>HTML Slide</p>Text text text</div><img src=\"slide-5.jpg\" />script>");

Salman Ali   11 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: