Hi Slider is a powerful jQuery image slider maker that enables you to create and add more than one image sliders onto the same web page.
For more info: http://www.hislider.com/faq/is-it-possible-to-add-more-than-one-jquery-slider-onto-the-same-web-page.html
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Is it possible to add more than one jQuery sliders created by Hi Slider onto the same web page?
1.
2. Yes, with the "Add prefix URL" feature in Hi Slider, you
add MORE THAN ONE jQuery image sliders into a
same webpage (e.g., examples.html), but you need to
specify the path and the slider ID.
You should output the sliders to the folder at the same
path of the webpage (examples.html), for example:
E:hislider.comshowcase.
P.S: The output folder "showcase" and the webpage
"example.html" must be in the same path.
3. (1) After you finish customizing the JavaScript photo slider (e.g., slider1), click
"Refresh" to save all the settings and then click "Publish" to enter into the output
interface;
4. (2) In the next screen, choose "Basic version (HTML), define the output path -
E:hislider.comshowcaseslider1;
(3) Then you need to input the prefix URL – showcase/slider1;
P.S: You should pay attention to the "Slash", do use "/" instead of ""
(4) Define the Slider ID (1), you need specific slider ID to differentiate from other
sliders on the same web page;
5.
6. (5) Click the "Publish" button to output the slider;
(6) Then publish slider2, slider3 following the above steps, and the output details should
be as follows:
Save to folder: E:hislider.comshowcaseslider1 prefix URL:
showcase/slider1 Slider ID: 1
Save to folder: E:hislider.comshowcaseslider2 prefix URL:
showcase/slider2 Slider ID: 2
Save to folder: E:hislider.comshowcaseslider3 prefix URL:
showcase/slider3 Slider ID: 3
7. (7) Now insert the below HTML code to the head section of your webpage
(examples.html), between < head > and < /head >;
<script type="text/javascript" src="showcase/
slider1/sliderengine/jquery.js"></script><script type="text/javascript"
src="showcase/ slider1/sliderengine/jquery.hislider.js"></script>
<script type="text/javascript" src="showcase/
slider2/sliderengine/jquery.js"></script><script type="text/javascript"
src="showcase/ slider2/sliderengine/jquery.hislider.js"></script>
<script type="text/javascript" src="showcase/
slider3/sliderengine/jquery.js"></script><script type="text/javascript"
src="showcase/ slider3/sliderengine/jquery.hislider.js"></script>
8. (8) Insert the below HTML code into the webpage where you want to display
the jQuery photo slidshow;
<div id="hislider1" style=" max-width:938px;max-height:400px;height:100%;
margin: 0 auto;"></div>
<div id="hislider2" style=" max-width:938px;max-height:400px;height:100%;
margin: 0 auto;"></div>
<div id="hislider3" style=" max-width:938px;max-height:400px;height:100%;
margin: 0 auto;"></div>
(9) At last, upload all the output folders and files (including examples.html) to the
correct path on your server.