html5 - light slider issue 1920px resolution -
i using lightslider plugin when using keyboard "ctrl -" added white gap space , 1920px resolutions right click white added white gap space body me. please visit site: http://brasilplay.streamrepublic.com/brasilplay_web01/ , screen shot:
<script> $(document).ready(function() { $("#content-slider").lightslider({ loop:true, keypress:true }); $("#content-slider1").lightslider({ loop:true, keypress:true }); $("#content-slider2").lightslider({ loop:true, keypress:true }); $('#image-gallery').lightslider({ gallery:true, item:1, thumbitem:9, slidemargin: 0, speed:500, auto:true, loop:true, onsliderload: function() { $('#image-gallery').removeclass('cs-hidden'); } }); }); </script>/***light weight slider***/ .slide { position: relative; } .slidelabelbg { background: url(../images/label_bg.png) center center no-repeat; width: 100%; background-size: cover; position: absolute; bottom: 0; line-height: 48px; } .slidelabelbg h4 { font-family: "neosanspro-bold"; color: #ffffff; font-size: 11px; text-align: center; padding: 0px 6px; } .item ul { list-style: none outside none; padding-left: 0; margin: 0; } .content-slider li { text-align: center; color: #fff; width: auto !important; } .content-slider1 li { text-align: center; color: #fff; width: auto !important; } .content-slider2 li { text-align: center; color: #fff; width: auto !important; } .lsslideouter { overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .lightslider:before, .lightslider:after { content: " "; display: table; } .lightslider { overflow: hidden; margin: 0; } .lsslidewrapper { max-width: 100%; overflow: hidden; position: relative; } .lsslidewrapper > .lightslider:after { clear: both; } .lsslidewrapper .lsslide { -webkit-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition: 1s; -webkit-transition-property: -webkit-transform, height; -moz-transition-property: -moz-transform, height; transition-property: transform, height; -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .lsslidewrapper .lsfade { position: relative; } .lsslidewrapper .lsfade > * { position: absolute !important; top: 0; left: 0; z-index: 9; margin-right: 0; width: 100%; } .lsslidewrapper.usingcss .lsfade > * { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .lsslidewrapper .lsfade > *.active { z-index: 10; } .lsslidewrapper.usingcss .lsfade > *.active { opacity: 1; } /** gallery */ .lsslideouter .lspager.lsgallery { list-style: none outside none; padding-left: 0; margin: 0; overflow: hidden; transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .lsslideouter .lspager.lsgallery li { overflow: hidden; -webkit-transition: border-radius 0.12s linear 0s 0.35s linear 0s; transition: border-radius 0.12s linear 0s 0.35s linear 0s; } .lsslideouter .lspager.lsgallery li.active, .lsslideouter .lspager.lsgallery li:hover { border-radius: 5px; } .lsslideouter .lspager.lsgallery img { display: block; height: auto; max-width: 100%; } .lsslideouter .lspager.lsgallery:before, .lsslideouter .lspager.lsgallery:after { content: " "; display: table; } .lsslideouter .lspager.lsgallery:after { clear: both; } /* end of gallery*/ /* slider actions */ .lsaction > { width: 32px; display: block; top: 50%; height: 32px; background-image: url('../images/controls.png'); cursor: pointer; position: absolute; z-index: 99; margin-top: -16px; opacity: 0.5; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; } .lsaction > a:hover { opacity: 1; } .lsaction > .lsprev { background-position: 0 0; left: 10px; } .lsaction > .lsnext { background-position: -32px 0; right: 10px; } .lsaction > a.disabled { pointer-events: none; } .cs-hidden { height: 1px; opacity: 0; filter: alpha(opacity=0); overflow: hidden; } /* vertical */ .lsslideouter.vertical { position: relative; } .lsslideouter.vertical.nopager { padding-right: 0px !important; } .lsslideouter.vertical .lsgallery { position: absolute !important; right: 0; top: 0; } .lsslideouter.vertical .lightslider > * { width: 100% !important; max-width: none !important; } /* vertical controlls */ .lsslideouter.vertical .lsaction > { left: 50%; margin-left: -14px; margin-top: 0; } .lsslideouter.vertical .lsaction > .lsnext { background-position: 31px -31px; bottom: 10px; top: auto; } .lsslideouter.vertical .lsaction > .lsprev { background-position: 0 -31px; bottom: auto; top: 10px; } /* vertical */ /* rtl */ .lsslideouter.lsrtl { direction: rtl; } .lsslideouter .lightslider, .lsslideouter .lspager { padding-left: 0; list-style: none outside none; } .lsslideouter.lsrtl .lightslider, .lsslideouter.lsrtl .lspager { padding-right: 0; } .lsslideouter .lightslider > *, .lsslideouter .lsgallery li { float: left; } .lsslideouter.lsrtl .lightslider > *, .lsslideouter.lsrtl .lsgallery li { float: right !important; } /* rtl */ @-webkit-keyframes rightend { 0% { left: 0; } 50% { left: -15px; } 100% { left: 0; } } @keyframes rightend { 0% { left: 0; } 50% { left: -15px; } 100% { left: 0; } } @-webkit-keyframes topend { 0% { top: 0; } 50% { top: -15px; } 100% { top: 0; } } @keyframes topend { 0% { top: 0; } 50% { top: -15px; } 100% { top: 0; } } @-webkit-keyframes leftend { 0% { left: 0; } 50% { left: 15px; } 100% { left: 0; } } @keyframes leftend { 0% { left: 0; } 50% { left: 15px; } 100% { left: 0; } } @-webkit-keyframes bottomend { 0% { bottom: 0; } 50% { bottom: -15px; } 100% { bottom: 0; } } @keyframes bottomend { 0% { bottom: 0; } 50% { bottom: -15px; } 100% { bottom: 0; } } .lsslideouter .rightend { -webkit-animation: rightend 0.3s; animation: rightend 0.3s; position: relative; } .lsslideouter .leftend { -webkit-animation: leftend 0.3s; animation: leftend 0.3s; position: relative; } .lsslideouter.vertical .rightend { -webkit-animation: topend 0.3s; animation: topend 0.3s; position: relative; } .lsslideouter.vertical .leftend { -webkit-animation: bottomend 0.3s; animation: bottomend 0.3s; position: relative; } .lsslideouter.lsrtl .rightend { -webkit-animation: leftend 0.3s; animation: leftend 0.3s; position: relative; } .lsslideouter.lsrtl .leftend { -webkit-animation: rightend 0.3s; animation: rightend 0.3s; position: relative; } /*/ grab cursor */ .lightslider.lsgrab > * { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lightslider.lsgrabbing > * { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } /**end lidght weight slider**/<body ng-app = "myapp" ng-controller = "hellocontroller"> <div class="programmain"> <div class="programarrow"><h1 translate="programs_m"></h1></div> <div class="programitemmain"> <div class="programrowmain"> <h3 translate="novel"></h3> <div class="item"> <ul id="content-slider" class="content-slider"> <li> <div class="slide"> <img src="assets/images/r1.png" alt="nada serÁ como antes"> <div class="slidelabelbg"><h4 translate="nothing_before"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r2.png" alt="sol nascente"> <div class="slidelabelbg"><h4 translate="sunny_sun"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r3.png" alt="a lei amor"> <div class="slidelabelbg"><h4 translate="law_love"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r4.png" alt="rock story"> <div class="slidelabelbg"><h4 translate="rock_story"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r5.png" alt="a regra jogo"> <div class="slidelabelbg"><h4 translate="rule_of_game"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r6.png" alt="totalmente de mais"> <div class="slidelabelbg"><h4 translate="totally_awesome"></h4></div> </div> </li> </ul> </div> </div> <div class="programrowmain"> <h3 translate="show"></h3> <div class="item"> <ul id="content-slider1" class="content-slider1"> <li> <div class="slide"> <img src="assets/images/r21.png" alt="domingÃo faustÃo"> <div class="slidelabelbg"><h4 translate="domingao_faust"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r22.png" alt="the voice kids"> <div class="slidelabelbg"><h4 translate="the_voice_kids"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r23.png" alt="adnight"> <div class="slidelabelbg"><h4 translate="adnight"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r24.png" alt="caldeirÃo huck"> <div class="slidelabelbg"><h4 translate="huck_cauldron"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r25.png" alt="altas horas"> <div class="slidelabelbg"><h4 translate="high_hours"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r26.png" alt="estrelas"> <div class="slidelabelbg"><h4 translate="stars"></h4></div> </div> </li> </ul> </div> </div> <div class="programrowmain"> <h3 translate="news"></h3> <div class="item"> <ul id="content-slider2" class="content-slider2"> <li> <div class="slide"> <img src="assets/images/r31.png" alt="jornal da globo"> <div class="slidelabelbg"><h4 translate="globo_journal"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r32.png" alt="jornal nacional"> <div class="slidelabelbg"><h4 translate="national_journal"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r33.png" alt="profissÃo repÓrter"> <div class="slidelabelbg"><h4 translate="profession_reporter"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r34.png" alt="jornal hoje"> <div class="slidelabelbg"><h4 translate="newspaper_today"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r35.png" alt="bom dia brasil"> <div class="slidelabelbg"><h4 translate="good_morning_brazil"></h4></div> </div> </li> <li> <div class="slide"> <img src="assets/images/r36.png" alt="globo news"> <div class="slidelabelbg"><h4 translate="globo_news_avila"></h4></div> </div> </li> </ul> </div> </div> </div> </div> <body>
Comments
Post a Comment