Vous êtes sur la page 1sur 2

Image Slider Maker README

=========================
ImageSliderMaker.com

Using in your website


---------------------

Please first make sure you have fully extracted the contents of the zip file.
In Windows, right-click on imageslidermaker.zip and select Extract All...

To get your slider working in your web page, you must add
my-slider.css, ism-2.2.min.js and the slide images to your project
directory and paste the markup (included below) into your HTML.

The directory structure of this package:

imageslidermaker/
README.txt
example.html
ism/
css/
my-slider.css
js/
ism-2.2.min.js
image/
slides/
_u/1550129471977_593202.jpg
_u/1550129466433_353696.jpg
_u/1550129456021_128393.jpeg
_u/1550129450780_62215.jpeg
_u/1550129415697_938716.jpg
_u/1550129392800_640565.jpeg

For a working example, open example.html in your web browser or


follow the instructions below to integrate the slider into your
project.

Step by step instructions


-------------------------

1. Paste the following into the head of your HTML file:

<link href="http://fonts.googleapis.com/css?family=Montserrat|Libre+Baskerville"
rel="stylesheet" type="text/css">
<link rel="stylesheet" href="ism/css/my-slider.css"/>
<script src="ism/js/ism-2.2.min.js"></script>

2. Paste this into the body of your HTML file (at the location where:
you would like your slider to appear in the page):

<div class="ism-slider" data-transition_type="fade" id="my-slider">


<ol>
<li>
<img src="ism/image/slides/_u/1550129471977_593202.jpg">
<div class="ism-caption ism-caption-0">Traveling</div>
</li>
<li>
<img src="ism/image/slides/_u/1550129466433_353696.jpg">
<div class="ism-caption ism-caption-0">Vacation</div>
</li>
<li>
<img src="ism/image/slides/_u/1550129456021_128393.jpeg">
<div class="ism-caption ism-caption-0">Peaceful View</div>
</li>
<li>
<img src="ism/image/slides/_u/1550129450780_62215.jpeg">
<div class="ism-caption ism-caption-0">Enjoy the the beautiful island</div>
</li>
<li>
<img src="ism/image/slides/_u/1550129415697_938716.jpg">
<div class="ism-caption ism-caption-0">We welcome you all to our beautiful
and different tourist spot here in our island</div>
</li>
<li>
<img src="ism/image/slides/_u/1550129392800_640565.jpeg">
<div class="ism-caption ism-caption-0">Sibuyan Island, Phillipines</div>
</li>
</ol>
</div>
<p class="ism-badge" id="my-slider-ism-badge"><a class="ism-link"
href="http://imageslidermaker.com" rel="nofollow">generated with ISM</a></p>

3. Copy the ism/ directory into the root directory of your project.

The css, js and image paths are relative, meaning the ism/
directory should be in the same directory (path) as your HTML
file containing the slider.

Vous aimerez peut-être aussi