Your SlideShare is downloading. ×
Is it possible to add more than one jQuery sliders created by Hi Slider onto the same web page?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Is it possible to add more than one jQuery sliders created by Hi Slider onto the same web page?

145
views

Published on

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. …

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

Published in: Design, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
145
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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.
  • 2. (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;
  • 3. (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;
  • 4. (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
  • 5. (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>
  • 6. (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.
  • 7. Copyright © 2013 Hi Slider. All rights reserved http://www.hislider.com/faq/is-it-possible-to-add-more- than-one-jquery-slider-onto-the-same-web-page.html
  • 8. Copyright © 2013 Hi Slider. All rights reserved http://www.hislider.com/faq/how-to-create-jquery- slider-with-swipe-support-that-tracks-touch-movements- on-iphone-and-ipad.html