divs2slides - jQuery plagin to create sildes from DIV
January 3, 2021 ยท View on GitHub
...
<head>
....
<script type="text/javascript" src="./js/divs2slides.js">
OR
<script type="text/javascript" src="./js/divs2slides.min.js">
....
</head>
<body>
...
<div id="container">
<div class="slide">
.
.
</div>
<div class="slide">
.
.
</div>
<div class="slide">
.
.
</div>
</div>
<script>
$("#container).divs2slides({
first: 1,
nav: true, /** true,false : show or not nav buttons*/
showPlayPauseBtn: true, /** true,false */
navTxtColor: "black", /** color */
keyBoardShortCut: true, /** true,false */
showSlideNum: true, /** true,false */
showTotalSlideNum: true, /** true,false */
autoSlide:false, /** false or seconds (the pause time between slides) , F8 to active(condition: keyBoardShortCut: true) */
randomAutoSlide: false, /** true,false ,(condition: autoSlide:true */
loop: false, /** true,false */
background: false, /** false or color*/
transition: "default", /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */
transitionTime: 1 /** transition time in seconds */
</script>
...
</body>
Setting options:
| # | name | description | default value |
|---|---|---|---|
| 1 | first | The first slide that will be loaded. | 1 |
| 2 | nav | show ('true') or hide ('false') navigator buttons. | true |
| 3 | navTxtColor | color of slide number text and total slides number shown in navigator area. | "black" |
| 4 | keyBoardShortCut | if true , enable to control presentation by keyboard shortcuts. | false |
| 5 | showSlideNum | if true , show slide number in navigator area. | true |
| 6 | showTotalSlideNum | if true , show total slides number in navigator area. | true |
| 7 | autoSlide | options:'false' or number (seconds). if set 'false' it disable auto slide mode. if set number then auto slide mode will be enabled and the number will be the time between slides. | 1 |
| 8 | randomAutoSlide | if true and autoSlide mode are enabled then The slides appear in random order. | false |
| 9 | loop | if true, in presentation mode , after last slide will go to first slide. in auto slideMode, the presentation will play in loop. | false |
| 10 | background | color of presentation background. | false |
| 11 | transition | transition types options: "slid","fade","default","random". | "default" |
| 12 | transitionTime | Time delay in seconds between slides. | 1 |
keyboard shortcuts:
"Left arrow" or "Backspace" - back to previous slide.
"Right arrow" or "Space" or "Enter" - go to next slide.
"Delete" - go to first slide.
"Esc" - exit from presentation mode.
"F5" - enter to presentation mode.
"F2" - full screen mode (in presentation mode), "Esc" to exit from fullscreen mode.
"F8" - strt play auto Slide mode.