0
幅にCSSコードを追加すると、ブラウザを更新するとスクリプトが表示されなくなります。あなたはCtrlキーを押しながらブラウザがすべて表示されます押して、両方のclientWidthは、私は両方が正しく または最小幅を表示され、剛性スクリプトの幅を追加するにはどうすればよい、幅適切な形 したら、「DOM」で 私はclientwidht 0PXMyghtyslider chavrokaを幅自動スケールにスライダー
に気づきました：100％、私にとって重要な価値を加えることは全幅に拡大しない
あなたはそれにどのように対処するのですか？
jQuery(document).ready(function($) {
\t \t \t (function(){
\t \t \t \t var windowWidth = self.innerWidth;
\t \t \t \t var $example = $('#exampleone'),
\t \t \t \t $frame = $('.frame', $example);
\t \t \t \t $frame.mightySlider({
\t \t \t \t \t // Navigation options
\t \t \t \t \t navigation: {
\t \t \t \t \t \t slideSize: '100%'
\t \t \t \t \t }
\t \t \t \t });
\t \t \t })();
\t \t });.mightyslider_modern_skin {
\t position: relative;
\t background: #000;
}
.mightyslider_modern_skin .mSFrame {
\t -webkit-perspective: 1000px;
\t perspective: 1000px;
\t -webkit-perspective-origin: 50% 50%;
\t perspective-origin: 50% 50%;
}
.mightyslider_modern_skin .mSFrame .mSSlideElement {
\t -webkit-transform-style: preserve-3d;
\t transform-style: preserve-3d;
}
.mightyslider_modern_skin .mSFrame .mSSlideElement .mSSlide {
\t overflow: hidden;
\t -webkit-transform: translateZ(0);
\t transform: translateZ(0);
}
.mightyslider_modern_skin.horizontal .mSFrame .mSSlideElement .mSSlide {
\t float: left;
}
.slider_description {
\t \t \t \t position: absolute;
\t \t \t \t bottom: 20px;
\t \t \t \t right: 20px;
\t \t \t \t padding: 10px 20px;
\t \t \t \t background: rgba(255,255,255,.5);
\t \t \t \t font-weight: 500;
\t \t \t \t text-transform: uppercase;
\t \t \t \t color: #000;
\t \t \t \t border: 2px solid transparent;
\t \t \t \t border-radius: 50px;
\t \t \t \t cursor: pointer;
\t \t \t \t z-index: 1000;
\t
\t \t \t \t -webkit-transition: all 0.3s;
\t \t \t \t transition: all 0.3s;
\t \t \t }
\t \t \t .slider_description:hover {
\t \t \t \t background: rgba(255,255,255,.0);
\t \t \t \t color: #FFF;
\t \t \t \t border-color: #FFF;
\t \t \t }
\t \t \t
\t \t \t /* Slider Styles */
\t \t \t #exampleone {
\t \t \t \t position: relative;
\t \t \t \t top: 0;
left: 0px;
\t \t \t \t bottom: 0;
\t \t \t \t right: 0;
\t \t \t \t height: 868px;
min-width: 1380px;
\t \t \t }
\t \t \t #exampleone .frame {
min-width: 1380px;
\t \t \t \t height: 860px;
-webkit-perspective: 1000px;
\t \t \t \t perspective: 1000px;
\t \t \t \t -webkit-perspective-origin: 50% 50%;
\t \t \t \t perspective-origin: 50% 50%;
\t \t \t }
\t \t \t #exampleone .frame .slide_element {
\t \t \t \t height: 100%;
\t \t \t \t -webkit-transform-style: preserve-3d;
\t \t \t \t transform-style: preserve-3d;
\t \t \t }
\t \t \t #exampleone .frame .slide_element > div {
\t \t \t \t float: left;
\t \t \t \t height: 100%;
\t \t \t }
\t \t \t #exampleone .frame .mSCover img {
\t \t \t \t max-width: none;
\t \t \t }
\t \t \t /* Animated layers styles */
\t \t \t .transparent {
\t \t \t \t opacity: 0;
\t \t \t }
\t \t \t .bgImg {
\t \t \t \t position: fixed;
top: 0;
\t \t \t \t left: 0;
\t \t \t \t width: 100%;
\t \t \t \t height: 115%;
\t \t \t \t background-position: 50%;
\t \t \t \t background-repeat: no-repeat;
\t \t \t \t background-size: cover;
\t \t \t \t -webkit-transform: translateZ(0px) translateY(-7%);
\t \t \t \t transform: translateZ(0px) translateY(-7%);
\t \t \t \t z-index: 10;
\t \t \t }
\t \t \t .bgImg1 {
\t \t \t \t background-image: url('http://www.wallpapermaiden.com/image/2016/06/17/hatsune-miku-undersea-vocaloid-twintail-anime-1268.png');
\t \t \t }
\t \t \t .bgImg2 {
\t \t \t \t background-image: url('http://76.72.168.19/images/2015-11-28-788237.png');
\t \t \t }
\t \t \t .bgImg3 {
\t \t \t \t background-image: url('https://archive-media.nyafuu.org/wg/image/1420/42/1420420990953.png');
\t \t \t }
\t \t \t .bgImg4 {
\t \t \t \t background-image: url('http://www.fullhdwpp.com/wp-content/uploads/Dwarf-in-a-Hood-with-a-Magic-Weapon-42_www.FullHDWpp.com_.jpg');
\t \t \t }
\t \t \t .bande {
\t \t \t \t background: url('wp-content/themes/onetone-pro/slider/assets/img/captions/bande.png') no-repeat 0 50%;
\t \t \t \t height: 1110px;
\t \t \t \t width: 632px;
\t \t \t \t left: 0;
\t \t \t \t -webkit-transform: translateZ(0px) translateX(-632px);
\t \t \t \t transform: translateZ(0px) translateX(-632px);
\t \t \t \t bottom: 0;
\t \t \t \t z-index: 120;
\t \t \t }
\t \t \t .line {
\t \t \t \t background: url('wp-content/themes/onetone-pro/slider/assets/img/captions/line.png') no-repeat 0 50%;
\t \t \t \t height: 1110px;
\t \t \t \t width: 556px;
\t \t \t \t left: 0;
\t \t \t \t -webkit-transform: translateZ(0px) translateX(-773px);
\t \t \t \t transform: translateZ(0px) translateX(-773px);
\t \t \t \t bottom: 0;
\t \t \t \t z-index: 110;
\t \t \t }
\t \t \t .titres {
\t \t \t \t left: 120px;
\t \t \t \t bottom: 140px;
\t \t \t \t color: #353535;
\t \t \t \t text-transform: uppercase;
\t \t \t \t -webkit-transform: translateZ(0px) translateX(-100%);
\t \t \t \t transform: translateZ(0px) translateX(-100%);
\t \t \t \t z-index: 130;
\t \t \t }
\t \t \t .titres .titrePartie {
\t \t \t \t top: auto;
\t \t \t \t bottom: 38px;
\t \t \t \t text-align: left;
\t \t \t }
\t \t \t .titrePartie > span {
\t \t \t \t position: relative !important;
\t \t \t \t left: 0;
\t \t \t \t display: block;
\t \t \t \t float: left;
\t \t \t \t clear: both;
\t \t \t \t padding: 10px 25px;
\t \t \t \t background-color: rgba(229, 229, 229, 0.87);
\t \t \t \t white-space: nowrap;
\t \t \t \t letter-spacing: 6px;
\t \t \t }
\t \t \t .titres .titrePartie span.l1,
\t \t \t .titres .titrePartie span.l2 {
\t \t \t \t left: -50px;
\t \t \t }
\t \t \t .titrePartie > span.l1 {
\t \t \t \t padding-bottom: 0;
\t \t \t \t font-size: 30px;
\t \t \t \t font-weight: 300;
\t \t \t \t line-height: 40px;
\t \t \t }
\t \t \t .titrePartie > span.l2 {
\t \t \t \t font-size: 30px;
\t \t \t \t font-weight: 500;
\t \t \t \t line-height: 40px;
\t \t \t }
\t \t \t .titres .sousTitre {
\t \t \t \t position: relative !important;
\t \t \t \t left: -50px;
\t \t \t \t clear: both;
\t \t \t \t float: left;
\t \t \t \t font-size: 11px;
\t \t \t \t color: #353535;
\t \t \t \t line-height: 28px;
\t \t \t \t padding: 0 25px;
\t \t \t \t background-color: #e4e3e5;
\t \t \t \t letter-spacing: 2px;
\t \t \t \t margin-top: 1em;
\t \t \t }
\t \t \t @media screen and (max-width:959px) {
\t \t \t \t .titres .titrePartie {
\t \t \t \t \t top: 58px;
\t \t \t \t }
\t \t \t \t .titrePartie > span {
\t \t \t \t \t padding: 7px 20px !important;
\t \t \t \t \t letter-spacing: 3px !important;
\t \t \t \t \t font-size: 25px !important;
\t \t \t \t \t line-height: 35px !important;
\t \t \t \t }
\t \t \t }
\t \t \t @media screen and (max-width:959px) {
\t \t \t \t .bande {
\t \t \t \t \t margin-left: -70px;
\t \t \t \t }
\t \t \t \t .line {
\t \t \t \t \t margin-left: -70px;
\t \t \t \t }
\t \t \t \t .titres {
\t \t \t \t \t left: 0px;
\t \t \t \t }
\t \t \t \t .titres .titrePartie {
\t \t \t \t \t top: 58px;
\t \t \t \t }
\t \t \t \t .titrePartie > span {
\t \t \t \t \t padding: 7px 20px !important;
\t \t \t \t \t letter-spacing: 3px !important;
\t \t \t \t \t font-size: 25px !important;
\t \t \t \t \t line-height: 35px !important;
\t \t \t \t }
\t \t \t \t .titres .sousTitre {
\t \t \t \t \t right: 60px;
\t \t \t \t }
\t \t \t }
\t \t \t @media screen and (max-width:639px) {
\t \t \t \t .bande {
\t \t \t \t \t margin-left: -100px;
\t \t \t \t }
\t \t \t \t .line {
\t \t \t \t \t margin-left: -140px;
\t \t \t \t }
\t \t \t \t .titres {
\t \t \t \t \t width: 100%;
\t \t \t \t \t padding-right: 80px;
\t \t \t \t }
\t \t \t \t .titres .titrePartie {
\t \t \t \t \t top: 40px;
\t \t \t \t }
\t \t \t \t .titrePartie > span {
\t \t \t \t \t padding: 5px 15px !important;
\t \t \t \t \t letter-spacing: 2px !important;
\t \t \t \t \t font-size: 20px !important;
\t \t \t \t \t line-height: 30px !important;
\t \t \t \t \t white-space: inherit !important;
\t \t \t \t }
\t \t \t \t
\t \t \t \t .titres .titrePartie > span.l1 {
\t \t \t \t \t margin-right: 7px;
\t \t \t \t }
}<!DOCTYPE html>
<html>
<div id="exampleone" class="mightyslider_modern_skin horizontal mightySlider">
<div class="frame mSFrame mSMouseDraggable" style="overflow: hidden;">
<div class="slide_element mSSlideElement" style="transform: translateZ(0px); width: 1380px;">
<div class="slide active mSSlide" msslideloaded="1" style="width: 1380px;">
<div class="mSCaption transparent bgImg bgImg1" style="text-align: center; position: absolute; opacity: 0; transform: translate(0%, 7%) translate3d(0px, 0px, 0px); z-index: 10;" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ speed: 1000, style: { y: 0, opacity: 1 } }, { style: { zIndex: 10 } }, { delay: 5000, speed: 1000, style: { y: '7%', opacity: 0 } }, { delay: 17000 }"></div>
<div class="mSCaption transparent bgImg bgImg2" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 6000, speed: 1000, style: { y: 0, opacity: 1 } }, { style: { zIndex: 10 } }, { delay: 5000, speed: 1000, style: { y: '7%', opacity: 0 } }, { delay: 17000 }" style="position: absolute; opacity: 0; transform: translate(0%, 7%) translate3d(0px, 0px, 0px); z-index: 10;"></div>
<div class="mSCaption transparent bgImg bgImg3" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 12000, speed: 1000, style: { y: 0, opacity: 1 } }, { style: { zIndex: 10 } }, { delay: 5000, speed: 1000, style: { y: '7%', opacity: 0 } }, { delay: 17000 }" style="position: absolute; opacity: 0; transform: translate(0%, 7%) translate3d(0px, 0px, 0px); z-index: 10;"></div>
<div class="mSCaption transparent bgImg bgImg4" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 18000, speed: 1000, style: { y: 0, opacity: 1 } }, { style: { zIndex: 10 } }, { delay: 5000, speed: 1000, style: { y: '7%', opacity: 0 } }, { delay: 17000 }" style="position: absolute; opacity: 1; transform: translate3d(0px, 0px, 0px); z-index: 10;"></div>
<div class="mSCaption transparent bande" data-mightyslider="loop: true" data-msanimation="{ delay: 700, speed: 1000, style: { x: 0, opacity: 1 } }, { delay: 3300, speed: 1000, style: { x: -632, opacity: 0 } }" style="position: absolute; opacity: 0.990752; transform: translate3d(0px, 0px, 0px);"></div>
<div class="mSCaption transparent line" data-mightyslider="loop: true" data-msanimation="{ delay: 600, speed: 1000, style: { x: 217, opacity: 1 } }, { delay: 3400, speed: 1000, style: { x: -773, opacity: 0 } }" style="position: absolute; opacity: 1; transform: translate3d(217px, 0px, 0px);"></div>
<div class="mSCaption titres" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 1000, style: { x: 0 } }, { delay: 5000, style: { x: '-100%' } }, { delay: 19000 }" style="position: absolute; transform: translate(-100%, 0%) translate3d(0px, 0px, 0px);">
<h1 class="titrePartie"><span class="mSCaption transparent l1" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 1000, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0; transform: translate3d(-50px, 0px, 0px);">Une agence marketing</span>
<span class="mSCaption transparent l2" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 1100, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0; transform: translate3d(-50px, 0px, 0px);">indépendante et 100% intégrée</span></h1>
<a class="mSCaption transparent sousTitre" href="#" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 1200, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0; transform: translate3d(-50px, 0px, 0px);">Des expertises complémentaires pour une réponse globale</a>
</div>
<div class="mSCaption titres" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 7000, style: { x: 0 } }, { delay: 5000, style: { x: '-100%' } }, { delay: 19000 }" style="position: absolute; transform: translate(-100%, 0%) translate3d(0px, 0px, 0px);">
<h1 class="titrePartie"><span class="mSCaption transparent l1" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 7000, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0; transform: translate3d(-50px, 0px, 0px);">Une agence marketing</span>
<span class="mSCaption transparent l2" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 7100, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0; transform: translate3d(-50px, 0px, 0px);">experte du BtoB</span></h1>
<a class="mSCaption transparent sousTitre" href="#" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 7200, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0; transform: translate3d(-50px, 0px, 0px);">Le marketing au service des professionnels</a>
</div>
<div class="mSCaption titres" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 13000, style: { x: 0 } }, { delay: 5000, style: { x: '-100%' } }, { delay: 19000 }" style="position: absolute; transform: translate(-100%, 0%) translate3d(0px, 0px, 0px);">
<h1 class="titrePartie"><span class="mSCaption transparent l1" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 13000, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0; transform: translate3d(-50px, 0px, 0px);">Nativement</span>
<span class="mSCaption transparent l2" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 13100, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0; transform: translate3d(-50px, 0px, 0px);">data</span></h1>
<a class="mSCaption transparent sousTitre" href="#" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 13200, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0; transform: translate3d(-50px, 0px, 0px);">L'intelligence des données client au coeur de la stratégie</a>
</div>
<div class="mSCaption titres" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 19000, style: { x: 0 } }, { delay: 5000, style: { x: '-100%' } }, { delay: 19000 }" style="position: absolute; transform: translate3d(0px, 0px, 0px);">
<h1 class="titrePartie"><span class="mSCaption transparent l1" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 19000, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0.860608; transform: translate3d(43.0304px, 0px, 0px);">Expertise de</span>
<span class="mSCaption transparent l2" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 19100, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0.860608; transform: translate3d(43.0304px, 0px, 0px);">l'ultra-personnalisation</span></h1>
<a class="mSCaption transparent sousTitre" href="#" data-mightyslider="loop: true, dontDelayOnRepeat: true" data-msanimation="{ delay: 19100, speed: 1000, style: { opacity: 1, x: 50 } }, { delay: 3000, speed: 1000, style: { opacity: 0, x: -50 } }, { delay: 19000 }" style="position: absolute; opacity: 0.860608; transform: translate3d(43.0304px, 0px, 0px);">L'individualisation de votre stratégie marketing et commerciale</a>
</div>
</div>
</div>
</div>
</div>
</html>
スライダー試験：Wordpressのへ http://melodiatest.byethost22.com ログイン：ログインするテスター パスワード：テスター – Krystian
主な実績の仮定は、このようなときということです解像度を変更するか、ウィンドウのサイズを自動的に変更するdopasowywałowidth – Krystian