Skip to content

Commit

Permalink
27.0.0
Browse files Browse the repository at this point in the history 
Add api $Destroy, $AppendSlides, $RemoveSlides, $ReloadSlides

RTL layout <div dir="rtl" ...>

add/update examples,
api-event-handling.html

api-play-pause-playto-goto-next-prev-autoplay-append-remove-reload-properties-destroy.html
rtl-slider.html
ul-li-slider.html
  • Loading branch information
jssor committed Feb 1, 2018
1 parent ec8ecd9 commit 6e9418d
Show file tree
Hide file tree
Showing 61 changed files with 2,253 additions and 634 deletions.
23 changes: 11 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,26 @@ Responsive Javascript Image/Text Slider/Carousel/Slideshow/Gallery/HTML5 Ad

1. [Live Demo](https://www.jssor.com)
2. [https://www.jssor.com/development](https://www.jssor.com/development)
2. [Slides HTML Code](https://www.jssor.com/development/define-slides-html-code.html)
2. [API: Options](https://www.jssor.com/development/api-options.html)
2. [API: Methods, properties & Events](https://www.jssor.com/development/api-methods-properties-events.html)
2. [API: UI Definition](https://www.jssor.com/development/api-ui-definition.html)
2. [https://www.jssor.com/help](https://www.jssor.com/help)
2. [https://www.jssor.com/tutorial](https://www.jssor.com/tutorial)
3. Support: [Ask a question on StackOverflow](https://stackoverflow.com/search?tab=relevance&q=jssor)

--------------------------------------
#### Example
```html
<script type="text/javascript" src="jssor.slider.min.js"></script>
<script>
jssor_slider1_init = function (containerId) {
var options = { $AutoPlay: 1 };
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>
<div id="jssor_slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
<div u="slides" style="position:absolute;overflow:hidden;left:0px;top:0px;width:600px;height:300px;">
<div><img u="image" src="image1.jpg" /></div>
<div><img u="image" src="image2.jpg" /></div>
<script src="jssor.slider.min.js"></script>
<div id="jssor_1" style="position:relative;top:0px;left:0px;width:980px;height:300px;overflow:hidden;">
<div data-u="slides" style="position:absolute;top:0px;left:0px;width:980px;height:300px;overflow:hidden;">
<div><img data-u="image" src="image1.jpg" /></div>
<div><img data-u="image" src="image2.jpg" /></div>
</div>
</div>
<script>
jssor_slider1_init("jssor_slider1_container");
var options = { $AutoPlay: 1 };
var jssor_1_slider = new $JssorSlider$("jssor_1", options);
</script>
```
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "jssor-slider",
"description": "Responsive Javascript Image/Content Slider/Slideshow/Carousel/Gallery/Banner/HTML5 AD",
"version": "26.8.0",
"version": "27.0.0",
"homepage": "https://www.jssor.com",
"keywords": [
"javascript",
Expand Down
2 changes: 1 addition & 1 deletion component.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "jssor-slider",
"repo": "jssor/slider",
"description": "Responsive Javascript Image/Content Slider/Slideshow/Carousel/Gallery/Banner/HTML5 AD",
"version": "26.8.0",
"version": "27.0.0",
"homepage": "https://www.jssor.com",
"keywords": [
"javascript",
Expand Down
30 changes: 15 additions & 15 deletions demos-jquery/banner-slider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,56 +101,56 @@
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
<div>
<img data-u="image" src="../img/gallery/980x380/045.jpg" />
<div u="thumb">Slide Description 001</div>
<div data-u="thumb">Slide Description 001</div>
</div>
<div>
<img data-u="image" src="../img/gallery/980x380/043.jpg" />
<div u="thumb">Slide Description 002</div>
<div data-u="thumb">Slide Description 002</div>
</div>
<div>
<img data-u="image" src="../img/gallery/980x380/046.jpg" />
<div u="thumb">Slide Description 003</div>
<div data-u="thumb">Slide Description 003</div>
</div>
<div>
<img data-u="image" src="../img/gallery/980x380/047.jpg" />
<div u="thumb">Slide Description 004</div>
<div data-u="thumb">Slide Description 004</div>
</div>
<div>
<img data-u="image" src="../img/gallery/980x380/048.jpg" />
<div u="thumb">Slide Description 005</div>
<div data-u="thumb">Slide Description 005</div>
</div>
<div>
<img data-u="image" src="../img/gallery/980x380/044.jpg" />
<div u="thumb">Slide Description 006</div>
<div data-u="thumb">Slide Description 006</div>
</div>
<div>
<img data-u="image" src="../img/gallery/980x380/050.jpg" />
<div u="thumb">Slide Description 007</div>
<div data-u="thumb">Slide Description 007</div>
</div>
<div>
<img data-u="image" src="../img/gallery/980x380/049.jpg" />
<div u="thumb">Slide Description 008</div>
<div data-u="thumb">Slide Description 008</div>
</div>
<div>
<img data-u="image" src="../img/gallery/980x380/052.jpg" />
<div u="thumb">Slide Description 009</div>
<div data-u="thumb">Slide Description 009</div>
</div>
<div>
<img data-u="image" src="../img/gallery/980x380/051.jpg" />
<div u="thumb">Slide Description 010</div>
<div data-u="thumb">Slide Description 010</div>
</div>
<div style="background-color:#ff7c28;">
<div style="position:absolute;top:50px;left:50px;width:450px;height:62px;z-index:0;font-size:16px;color:#000000;line-height:24px;text-align:left;padding:5px;box-sizing:border-box;">Photos in this slider are to demostrate jssor slider,<br />
which are not licensed for any other purpose.
</div>
<div u="thumb">Terms of use photos in this slider</div>
<div data-u="thumb">Terms of use photos in this slider</div>
</div>
</div>
<!-- Thumbnail Navigator -->
<div u="thumbnavigator" style="position:absolute;bottom:0px;left:0px;width:980px;height:50px;color:#FFF;overflow:hidden;cursor:default;background-color:rgba(0,0,0,.5);">
<div u="slides">
<div u="prototype" style="position:absolute;top:0;left:0;width:980px;height:50px;">
<div u="thumbnailtemplate" style="position:absolute;top:0;left:0;width:100%;height:100%;font-family:verdana;font-weight:normal;line-height:50px;font-size:16px;padding-left:10px;box-sizing:border-box;"></div>
<div data-u="thumbnavigator" style="position:absolute;bottom:0px;left:0px;width:980px;height:50px;color:#FFF;overflow:hidden;cursor:default;background-color:rgba(0,0,0,.5);">
<div data-u="slides">
<div data-u="prototype" style="position:absolute;top:0;left:0;width:980px;height:50px;">
<div data-u="thumbnailtemplate" style="position:absolute;top:0;left:0;width:100%;height:100%;font-family:verdana;font-weight:normal;line-height:50px;font-size:16px;padding-left:10px;box-sizing:border-box;"></div>
</div>
</div>
</div>
Expand Down
38 changes: 7 additions & 31 deletions demos-jquery/full-width-slider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,10 @@
<script type="text/javascript">
jQuery(document).ready(function ($) {

var jssor_1_SlideoTransitions = [
[{b:-1,d:1,o:-0.7}],
[{b:900,d:2000,x:-379,e:{x:7}}],
[{b:900,d:2000,x:-379,e:{x:7}}],
[{b:-1,d:1,o:-1,sX:2,sY:2},{b:0,d:900,x:-171,y:-341,o:1,sX:-2,sY:-2,e:{x:3,y:3,sX:3,sY:3}},{b:900,d:1600,x:-283,o:-1,e:{x:16}}]
];

var jssor_1_options = {
$AutoPlay: 1,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
Expand Down Expand Up @@ -68,7 +57,7 @@
});
</script>
<style>
/* jssor slider loading skin spin css */
/*jssor slider loading skin spin css*/
.jssorl-009-spin img {
animation-name: jssorl-009-spin;
animation-duration: 1.6s;
Expand All @@ -77,23 +66,19 @@
}

@keyframes jssorl-009-spin {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}


/*jssor slider bullet skin 032 css*/
.jssorb032 {position:absolute;}
.jssorb032 .i {position:absolute;cursor:pointer;}
.jssorb032 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
.jssorb032 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
.jssorb032 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
.jssorb032 .i.idn {opacity:.3;}


/*jssor slider arrow skin 051 css*/
.jssora051 {display:block;position:absolute;cursor:pointer;}
.jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
.jssora051:hover {opacity:.8;}
Expand All @@ -108,15 +93,6 @@
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:500px;overflow:hidden;">
<div>
<img data-u="image" src="../img/gallery/1300x500/001.jpg" />
<div data-u="caption" data-t="0" style="position:absolute;top:120px;left:75px;width:470px;height:220px;z-index:0;">
<img style="position:absolute;top:0px;left:0px;width:470px;height:220px;z-index:0;" src="../img/1920/c-phone-horizontal.png" />
<div style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0; overflow:hidden;">
<img data-u="caption" data-t="1" style="position:absolute;top:0px;left:0px;width:379px;height:213px;z-index:0;" src="../img/1920/c-slide-1.jpg" />
<img data-u="caption" data-t="2" style="position:absolute;top:0px;left:379px;width:379px;height:213px;z-index:0;" src="../img/1920/c-slide-3.jpg" />
</div>
<img style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0;" src="../img/1920/c-navigator-horizontal.png" />
<img data-u="caption" data-t="3" style="position:absolute;top:476px;left:454px;width:63px;height:77px;z-index:0;" src="../img/1920/hand.png" />
</div>
</div>
<div>
<img data-u="image" src="../img/gallery/1300x500/002.jpg" />
Expand Down
50 changes: 25 additions & 25 deletions demos-jquery/grid-slider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,20 +128,20 @@

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 809px; height: 456px; overflow: hidden; ">
<!-- Slides Container -->
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 456px;
<div data-u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 456px;
overflow: hidden;">
<div>
<div id="sliderh1_container" style="position: relative; top: 0px; left: 0px; width: 809px;
height: 150px;">

<!-- Slides Container -->
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 150px;
<div data-u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 150px;
overflow: hidden;">
<div><img u="image" src="../img/gallery/200x150/001.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/002.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/003.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/004.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/005.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/001.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/002.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/003.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/004.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/005.jpg" /></div>
</div>

<!--#region Bullet Navigator Skin Begin -->
Expand All @@ -160,13 +160,13 @@
<div id="sliderh2_container" style="position: relative; top: 0px; left: 0px; width: 809px;
height: 150px;">
<!-- Slides Container -->
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 150px;
<div data-u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 150px;
overflow: hidden;">
<div><img u="image" src="../img/gallery/200x150/010.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/011.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/012.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/013.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/014.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/010.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/011.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/012.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/013.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/014.jpg" /></div>
</div>

<!--#region Bullet Navigator Skin Begin -->
Expand All @@ -185,13 +185,13 @@
<div id="sliderh3_container" style="position: relative; top: 0px; left: 0px; width: 809px;
height: 150px;">
<!-- Slides Container -->
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 150px;
<div data-u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 150px;
overflow: hidden;">
<div><img u="image" src="../img/gallery/200x150/020.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/021.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/022.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/023.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/024.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/020.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/021.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/022.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/023.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/024.jpg" /></div>
</div>

<!--#region Bullet Navigator Skin Begin -->
Expand All @@ -210,13 +210,13 @@
<div id="sliderh4_container" style="position: relative; top: 0px; left: 0px; width: 809px;
height: 150px;">

<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 150px;
<div data-u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 150px;
overflow: hidden;">
<div><img u="image" src="../img/gallery/200x150/015.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/016.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/017.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/018.jpg" /></div>
<div><img u="image" src="../img/gallery/200x150/019.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/015.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/016.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/017.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/018.jpg" /></div>
<div><img data-u="image" src="../img/gallery/200x150/019.jpg" /></div>
</div>

<!--#region Bullet Navigator Skin Begin -->
Expand Down
Loading

0 comments on commit 6e9418d

Please sign in to comment.