Skip to content

semilicon/io.lightslider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 

Repository files navigation

A light jQuery library for slideshow.

Usage

For using io.lightslider you need connect jQuery and Hammer.js library in your code.

<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>	
</script>

Connect io.lightslider:

<script src="./dist/io.lightslider.min.js"></script>
<link rel="stylesheet" href="./dist/io.lightslider.min.css" />

Then put in your code this template:

<div id="myslider" class="io-lightslider io-ls-animated-slow">
	<div class="io-ls-field">
		<div class="io-ls-container">
			<div class="io-ls-wrapper">
				<div class="io-ls-slide">
					<!--slide1 contain-->
				</div><div class="io-ls-slide">
					<!--slide2 contain-->
				</div><div class="io-ls-slide">
					<!--slide3 contain-->
				</div>
			</div>
		</div>
	</div>
	<div class="io-ls-controls">
		<div class="io-ls-arrows_container"></div>
		<div class="io-ls-bullet_container"></div>
	</div>
</div>
<script>$(function(){io.lightslider.init('#myslider');});</script>

In this template you can change next parts:

  • id="myslider" - 'myslider' - identificator of your slider;
  • 'io-ls-animated-slow' - type of animation, can be 'io-ls-animated-slow'/'io-ls-animated-fast'/'io-ls-animated-none', more in Configuration;
  • you can add configuration options in slider main tag, more in Configurations;
  • <!--slide{1,2,3} contain--> - put here contant of your slides, it can be anything;
  • <div class="io-ls-arrows_container"></div> - you can delete this tag if you don't want show navigative arrows on your slider;
  • <div class="io-ls-arrows_container"></div> - you can add class 'io-ls-arrow-withbg' to this tag, more in Configurations;
  • <div class="io-ls-bullet_container"></div> - you can delete this tag if you don't want show navigative bullet on your slider;
  • <div class="io-ls-bullet_container"></div> - you can add class 'io-ls-static' to this tag, more in Configurations;

Attention: Slider have default fixed height (600px), it not adaptive to slides contant. You need mark height or use some height option, more in Configurations;

Example of '<!--slide1 contain-->':

<div class="io-ls-bgimg" style="background-image: url('https://github.com/semilicon/io.lightslider/demo/img/img1.jpg');"></div>

Configurations

Slider have several important options that are often in demand.

This option adds to main slider tag like attributes:

  • data-slider-height="400" - set slider height in 'px', dafault: 600;
  • data-slider-window-height="true" - set slider height to window height (ignor option data-slider-height), dafault: false;
  • data-slider-first-turn-height="true" - set slider height to put it in one (first) turn of page (ignor option data-slider-height and data-slider-window-height), dafault: false;
  • data-slider-with-cycle="false" - cycle slider, dafault: true;
  • data-slider-timeout="5000" - set autoPlay and autoPlay duration timeout in miliseconds, dafault: off;
  • data-slider-autoplay-ignore-hover="true" - ignore hover for autoPlay hover pause, dafault: false;

Slider display can be changed with the following built-in classes.

For tag with class 'io-lightslider' you can use:

  • 'io-ls-animated-slow' - slide slow speed scrolling;
  • 'io-ls-animated-fast' - slide fast speed scrolling;
  • 'io-ls-animated-none' - slide no scrolling, animated by fade in/out;

For tag with class 'io-ls-arrows_container' you can use:

  • 'io-ls-arrow-withbg' - it create wrapper with bg around arrow;

For tag with class 'io-ls-bullet_container' you can use:

  • 'io-ls-static' - put bullets under the slider (dafault: bullets on slider);

Contributions

Feel encouraged to report issues or submit pull requests. When you're ready to do either, read our contribution guidelines.

License

MIT

About

A light jQuery library for slideshow.

Resources

License

Stars

Watchers

Forks

Packages

No packages published