Demo : Slider

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.

 
<!-- The Gallery as inline carousel, can be positioned anywhere on the page --> 
<div id="media-carousel" class="lark-carousel slide" style="width:900px;height:600px;margin:1em auto;max-width:95%"> 
    <div class="items"></div> 
    <h3 class="title"></h3> 
    <a class="prev">‹</a> 
    <a class="next">›</a> 
    <ol class="indicators"></ol> 
</div> 
<br> 

<script> 
  function initPage(langx,domx,oneplayer) { 
    var $ = domx.query; 

    require([ 
      "utilhub-toolkits-comctrls-carousels" 
    ],function(carousels) { 
      'use strict' 

      // Initialize the Gallery as video carousel: 

      var medias = [ 
        { 
          title: 'living room', 
          href: '/medias/enterprise/demos/1k_01_living_room.jpgp', 
         type: 'image/panorama+jpeg', 
         poster: '/medias/enterprise/demos/1k_01_living_room.jpgp' 
        }, 
        { 
          title: 'kitchen', 
          href: '/medias/enterprise/demos/1k_02_kitchen.jpgp', 
         type: 'image/panorama+jpeg', 
         poster: '/medias/enterprise/demos/1k_02_kitchen.jpgp' 
        }, 
        { 
          title: 'bathroom', 
          href: '/medias/enterprise/demos/1k_03_bathroom.jpgp', 
         type: 'image/panorama+jpeg', 
         poster: '/medias/enterprise/demos/1k_03_bathroom.jpgp' 
        }, 
        { 
          title: 'washroom', 
          href: '/medias/enterprise/demos/1k_04_washroom.jpgp', 
         type: 'image/panorama+jpeg', 
         poster: '/medias/enterprise/demos/1k_04_washroom.jpgp' 
        }, 
        { 
          title: 'toilet', 
          href: '/medias/enterprise/demos/1k_05_toilet.jpgp', 
         type: 'image/panorama+jpeg', 
         poster: '/medias/enterprise/demos/1k_05_toilet.jpgp' 
        } 
         
      ]; 

      var players = []; 
      var playingPlayer; 
      function onSlide(e) { 
        if (playingPlayer) { 
          playingPlayer.stop(); 
          ///playingPlayer.pause(); 
        } 

        players[e.toIndex].resize(); 
      } 

      function renderMediaItem(item, callback) { 
        item.altText = item.altText || item.title; 

        let playerElement = $("<div class=\"u-oneplayer\"/>")[0], 
            player = new oneplayer.Player(playerElement,{ 
                picker : false, 
                autoplay : false, 
                fileOptions :{ 
                  type : item.type, 
                  url : item.href 
                }, 
                poster : item.poster, 

            }); 

        player.on("pause",function(){ 
          playingPlayer = null; 
        }); 

        player.on("play",function(){ 
          playingPlayer = player; 
        }); 

        players.push(player); 
        return playerElement; 
      } 


      $('#media-carousel').plugin("utilhub.toolkits.comctrls.carousel",{ 
          cycle : { 
            interval:0 
          }, 
          data : { 
            items: medias  
          }, 
          mode : "slide", 
          start : 0, 
          onjumped : onSlide, 

          item : { 
            template : renderMediaItem 
          }, 
         indicators : { 
            indicator : { 
              template : "<li " +  
                "<% if (title) { %>" +   
                  "title = \"<%= title %>\""+  
                "<% } %>" +   
                "<% if (poster) { %>" +   
                  " style = \"background: url('<%= poster %>'\""+  
                "<% } %>"+  
             "/>" 
            } 
         } 
      }); 
    }); 
  } 
</script> 

<link type="text/css" rel="stylesheet" href="/lib/tpl/skydoku/assets/oneplayer/css/oneplayer-all.css"> 

<style> 
    .lark-carousel.slide { 
          width:680px; 
          height:480px; 
          margin:1em auto;     
          max-width: 100%; 
         max-height: 100%; 
    } 
    .lark-carousel.slide .indicators { 
          z-index: 100; 
          bottom: 30px; 
          background: #00000080; 
          margin: 0; 
          padding: 0; 
          right: 0; 
          left: 0; 
          height: 80px; 
     } 

     .uop-poster{ 
        background-size: cover; 
     } 

      .lark-carousel.slide > .indicators > li { 
          width : 60px; 
          height: 60px; 
          background-size: 100% 100% !important; 
      } 

</style>