Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
enterprise:demos:slider [2021/10/24 23:46] admin created |
enterprise:demos:slider [2021/10/25 00:00] (current) admin |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ~~Title: | ||
| + | |||
| + | ====== Demo : Slider ====== | ||
| + | ===== Overview ===== | ||
| + | This is a slider sample. | ||
| + | This is a common scene on real estate rental sites. There are panoramic photos of the living room, kitchen, bathroom, toilet, etc. of the room, and you can switch the playback with the slider. | ||
| + | |||
| + | ===== Running ===== | ||
| < | < | ||
| <!-- The Gallery as inline carousel, can be positioned anywhere on the page --> | <!-- The Gallery as inline carousel, can be positioned anywhere on the page --> | ||
| Line 11: | Line 19: | ||
| < | < | ||
| - | | + | |
| var $ = domx.query; | var $ = domx.query; | ||
| Line 17: | Line 25: | ||
| " | " | ||
| ], | ], | ||
| - | |||
| - | |||
| 'use strict' | 'use strict' | ||
| Line 26: | Line 32: | ||
| { | { | ||
| title: ' | title: ' | ||
| - | href: '/_media/ | + | href: '/medias/ |
| type: ' | type: ' | ||
| - | | + | |
| }, | }, | ||
| { | { | ||
| title: ' | title: ' | ||
| - | href: '/_media/ | + | href: '/medias/ |
| type: ' | type: ' | ||
| - | | + | |
| }, | }, | ||
| { | { | ||
| title: ' | title: ' | ||
| - | href: '/_media/ | + | href: '/medias/ |
| type: ' | type: ' | ||
| - | | + | |
| }, | }, | ||
| { | { | ||
| title: ' | title: ' | ||
| - | href: '/_media/ | + | href: '/medias/ |
| type: ' | type: ' | ||
| - | | + | |
| }, | }, | ||
| { | { | ||
| title: ' | title: ' | ||
| - | href: '/_media/ | + | href: '/medias/ |
| type: ' | type: ' | ||
| - | | + | |
| } | } | ||
| | | ||
| ]; | ]; | ||
| - | | + | |
| - | var playingPlayer; | + | var playingPlayer; |
| - | function onSlide(e) { | + | function onSlide(e) { |
| - | if (playingPlayer) { | + | if (playingPlayer) { |
| - | playingPlayer.stop(); | + | playingPlayer.stop(); |
| - | /// | + | /// |
| - | } | + | |
| - | + | ||
| - | players[e.toIndex].resize(); | + | |
| } | } | ||
| + | players[e.toIndex].resize(); | ||
| + | } | ||
| - | | + | |
| - | item.altText = item.altText || item.title; | + | item.altText = item.altText || item.title; |
| + | let playerElement = $("< | ||
| + | player = new oneplayer.Player(playerElement, | ||
| + | picker : false, | ||
| + | autoplay : false, | ||
| + | fileOptions :{ | ||
| + | type : item.type, | ||
| + | url : item.href | ||
| + | }, | ||
| + | poster : item.poster, | ||
| + | }); | ||
| + | player.on(" | ||
| + | playingPlayer = null; | ||
| + | }); | ||
| - | let playerElement = $("<div class=\"u-oneplayer\"/>" | + | player.on("play",function(){ |
| - | player = new oneplayer.Player(playerElement, | + | |
| - | | + | }); |
| - | autoplay : false, | + | |
| - | fileOptions :{ | + | |
| - | type : item.type, | + | |
| - | url : item.href | + | |
| - | }, | + | |
| - | poster : item.poster, | + | |
| - | }); | + | players.push(player); |
| + | return playerElement; | ||
| + | } | ||
| - | // player.src({ | ||
| - | // type: item.type, | ||
| - | // src: item.href | ||
| - | // }); | ||
| + | $('# | ||
| + | cycle : { | ||
| + | interval:0 | ||
| + | }, | ||
| + | data : { | ||
| + | items: medias | ||
| + | }, | ||
| + | mode : " | ||
| + | start : 0, | ||
| + | onjumped : onSlide, | ||
| - | | + | |
| - | | + | template : renderMediaItem |
| - | }); | + | }, |
| + | | ||
| + | indicator : { | ||
| + | template : "< | ||
| + | "<% if (title) { %>" | ||
| + | | ||
| + | "<% } %>" + | ||
| + | "<% if (poster) { %>" + | ||
| + | " | ||
| + | "<% } %>" | ||
| + | "/>" | ||
| + | } | ||
| + | } | ||
| + | }); | ||
| + | }); | ||
| + | } | ||
| + | </ | ||
| - | player.on("play", | + | <link type="text/css" |
| - | playingPlayer | + | |
| - | }); | + | |
| - | players.push(player); | + | < |
| - | | + | |
| + | width: | ||
| + | height: | ||
| + | margin:1em auto; | ||
| + | max-width: 100%; | ||
| + | | ||
| + | } | ||
| + | .lark-carousel.slide .indicators { | ||
| + | z-index: 100; | ||
| + | bottom: 30px; | ||
| + | background: # | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | right: 0; | ||
| + | left: 0; | ||
| + | height: 80px; | ||
| + | } | ||
| + | |||
| + | | ||
| + | background-size: | ||
| + | } | ||
| + | |||
| + | .lark-carousel.slide > .indicators > li { | ||
| + | width : 60px; | ||
| + | height: 60px; | ||
| + | background-size: | ||
| + | } | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | ===== Code ===== | ||
| + | < | ||
| + | <!-- The Gallery as inline carousel, can be positioned anywhere on the page --> | ||
| + | <div id=" | ||
| + | <div class=" | ||
| + | <h3 class=" | ||
| + | <a class=" | ||
| + | <a class=" | ||
| + | <ol class=" | ||
| + | </ | ||
| + | < | ||
| + | |||
| + | < | ||
| + | function initPage(langx, | ||
| + | var $ = domx.query; | ||
| + | |||
| + | require([ | ||
| + | " | ||
| + | ], | ||
| + | 'use strict' | ||
| + | |||
| + | // Initialize the Gallery as video carousel: | ||
| + | |||
| + | var medias = [ | ||
| + | { | ||
| + | | ||
| + | href: '/ | ||
| + | type: ' | ||
| + | | ||
| + | }, | ||
| + | { | ||
| + | title: ' | ||
| + | href: '/ | ||
| + | type: ' | ||
| + | | ||
| + | }, | ||
| + | { | ||
| + | title: ' | ||
| + | href: '/ | ||
| + | type: ' | ||
| + | | ||
| + | }, | ||
| + | { | ||
| + | title: ' | ||
| + | href: '/ | ||
| + | type: ' | ||
| + | | ||
| + | }, | ||
| + | { | ||
| + | title: ' | ||
| + | href: '/ | ||
| + | type: ' | ||
| + | | ||
| } | } | ||
| + | | ||
| + | ]; | ||
| + | |||
| + | var players = []; | ||
| + | var playingPlayer; | ||
| + | function onSlide(e) { | ||
| + | if (playingPlayer) { | ||
| + | playingPlayer.stop(); | ||
| + | /// | ||
| + | } | ||
| + | |||
| + | players[e.toIndex].resize(); | ||
| + | } | ||
| + | |||
| + | function renderMediaItem(item, | ||
| + | item.altText = item.altText || item.title; | ||
| + | |||
| + | let playerElement = $("< | ||
| + | player = new oneplayer.Player(playerElement, | ||
| + | picker : false, | ||
| + | autoplay : false, | ||
| + | fileOptions :{ | ||
| + | type : item.type, | ||
| + | url : item.href | ||
| + | }, | ||
| + | poster : item.poster, | ||
| + | |||
| + | }); | ||
| + | |||
| + | player.on(" | ||
| + | playingPlayer = null; | ||
| + | }); | ||
| + | |||
| + | player.on(" | ||
| + | playingPlayer = player; | ||
| + | }); | ||
| + | |||
| + | players.push(player); | ||
| + | return playerElement; | ||
| + | } | ||
| Line 133: | Line 289: | ||
| } | } | ||
| }); | }); | ||
| - | |||
| - | |||
| }); | }); | ||
| - | } | + | |
| </ | </ | ||
| Line 171: | Line 325: | ||
| </ | </ | ||
| - | </HTML> | + | </code> |