Hi There!

I created a sample Unbounce page here:

http://unbouncepages.com/ios-slider-t…

Here’s how I did it:

1. 
   

   Download the ios-slider file they provide, and copy the contents of “jquery.iosslider.js” into a new script element in our editor. Make sure to put in the surrounding script tags.

   
   


2. 
   

   At this point I chose to copy the html structure from one of their examples: _demos/_examples/1-Default/index.html. I copied the “div” section into a custom html element in our editor.

   
   


3. 
   

   Add css styles in our page editor’s script section. I chose to copy their style section from that same index.html from step #2. Make sure to include the script tags!

   
   


4. 
   

   Upload images and make sure the css refers to these images.
   
   I put each image onto the page, saved, then previewed. In the preview page I did: right click and copied the image’s url. Now go back to the editor custom css style and update the background url locations with the values you just copied.

   
   

I hope that helps you!

Wow, that was fast!

Thanks. I’ll have a go.

I’ve deleted my previous comment because I have a few improvements to make. I’ll update this thread shortly…

I was able to get a sample working here: http://unbouncepages.com/ios-slider-t…

First, take care of your images.

1. Upload all images to your Unbounce page.


2. Include the image on your page somewhere (it doesn’t matter where).


3. Publish your Unbounce page.


4. View your published page and copy down all URLs for the images there.

Now add iosSlider to your page.

1. Visit iosscripts.com/iosslider
   


2. Download the latest version (at the very bottom of the page)


3. Copy the text from the downloaded file: iosSlider/_src/jquery.iosslider.min.js


4. Edit your Unbounce page.


5. Click on “Scripts”


6. Create a new script with placement “before body end tag”.


7. Paste the copied text into the script text window. Make sure to add “script” tags before and after. Like this: < script type="text/javascript > pasted script here < /script >

Now hide all the images on your page.

1. Edit your Unbounce page.


2. For each image on your page, look at the properties panel under “Advanced” and copy the ID. It will be something like: #lp-pom-image-24
   


3. Click on "Styles"
   
   4 Add the following stylesheet in the editor:

#lp-pom-image-20,

#lp-pom-image-22,

#lp-pom-image-23,

#lp-pom-image-24 {

display: none;

}

Note: Use the image IDs you copied from your page instead of the ones I’m using here.

5. Save.


6. Preview.


7. Your images should not be showing up now.

Now finish iosSlider setup.

I decided to borrow heavily from a sample that’s included in the iosSlider download.

1. 
   

   I used the file: iosSlider/_demos/_examples/1-Default/index.html

   
   


2. 
   

   Copy the “div” section from the html:

   
   


3. 
   

   Edit your Unbounce page.

   
   


4. 
   

   Add a custom HTML element to the page and paste the above into it.

   
   


5. 
   

   Copy the “” section from the html page above.

   
   


6. 
   

   Edit your Unbounce page.

   
   


7. 
   

   Click on “Styles” and paste the copied text into a new style.

   
   


8. 
   

   Replace all image URLs in the style code with the Image URLs you copied from the very first step in this reply.

   
   

Finally:

In the Unbounce page editor, click on “Scripts” and add a new script placed “before body end tag”:

Now publish your page and it should all be working fine.

Note: You can enable “Faster Image Serving” to speed up your page. See how here:

http://support.unbounce.com/entries/2…

I hope that helps!