Myghtyslider chavroka 的滑块到宽度自动缩放

【问题标题】：Slider of Myghtyslider chavroka to width auto scaleMyghtyslider chavroka 的滑块到宽度自动缩放
【发布时间】：2016-11-26 16:17:46
【问题描述】：

为宽度添加css代码后，刷新浏览器时脚本不显示消失。 在“DOM”中，我注意到 clientwidht 0px

按下CTRL+浏览器出现一切后，clientWidth都是合适的形式 如何添加刚性脚本的宽度都正确显示 或 min-width, width: 100%，并且添加对我很重要的值不会扩展到整个宽度

你如何处理它的问题？

jQuery(document).ready(function($) {
			(function(){
				var windowWidth = self.innerWidth;
				var $example = $('#exampleone'),
				$frame = $('.frame', $example);
				$frame.mightySlider({
					// Navigation options
					navigation: {
						slideSize: '100%'
					}
				});
			})();
		});
.mightyslider_modern_skin {
	position: relative;
	background: #000;
}

.mightyslider_modern_skin .mSFrame {
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
}

.mightyslider_modern_skin .mSFrame .mSSlideElement {

	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.mightyslider_modern_skin .mSFrame .mSSlideElement .mSSlide {
	overflow: hidden;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.mightyslider_modern_skin.horizontal .mSFrame .mSSlideElement .mSSlide {
	float: left;
}


.slider_description {
				position: absolute;
				bottom: 20px;
				right: 20px;
				padding: 10px 20px;
				background: rgba(255,255,255,.5);
				font-weight: 500;
				text-transform: uppercase;
				color: #000;
				border: 2px solid transparent;
				border-radius: 50px;
				cursor: pointer;
				z-index: 1000;
	
				-webkit-transition: all 0.3s;
				transition: all 0.3s;
			}
			.slider_description:hover {
				background: rgba(255,255,255,.0);
				color: #FFF;
				border-color: #FFF;
			}
			
			/* Slider Styles */
			#exampleone {
				position: relative;
				top: 0;
                                left: 0px;
				bottom: 0;
				right: 0;
				height: 868px;
                                min-width: 1380px;

			}
			#exampleone .frame {

                                 min-width: 1380px;
				height: 860px;

                                -webkit-perspective: 1000px;
				perspective: 1000px;

				-webkit-perspective-origin: 50% 50%;
				perspective-origin: 50% 50%;

			}
			#exampleone .frame .slide_element {
				height: 100%;

				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			#exampleone .frame .slide_element > div {
				float: left;
				height: 100%;
                            
			}
			#exampleone .frame .mSCover img {
				max-width: none;
                                
			}

			/* Animated layers styles */
			.transparent {
				opacity: 0;
			}
			.bgImg {
				position: fixed;
                                top: 0;
				left: 0;
				width: 100%;
				height: 115%;
				background-position: 50%;
				background-repeat: no-repeat;
				background-size: cover;
				-webkit-transform: translateZ(0px) translateY(-7%);
				transform: translateZ(0px) translateY(-7%);
				z-index: 10;
			}
			.bgImg1 {
				background-image: url('http://www.wallpapermaiden.com/image/2016/06/17/hatsune-miku-undersea-vocaloid-twintail-anime-1268.png');
			}
			.bgImg2 {
				background-image: url('http://76.72.168.19/images/2015-11-28-788237.png');
			}
			.bgImg3 {
				background-image: url('https://archive-media.nyafuu.org/wg/image/1420/42/1420420990953.png');
			}
			.bgImg4 {
				background-image: url('http://www.fullhdwpp.com/wp-content/uploads/Dwarf-in-a-Hood-with-a-Magic-Weapon-42_www.FullHDWpp.com_.jpg');
			}
			.bande {
				background: url('wp-content/themes/onetone-pro/slider/assets/img/captions/bande.png') no-repeat 0 50%;
				height: 1110px;
				width: 632px;
				left: 0;
				-webkit-transform: translateZ(0px) translateX(-632px);
				transform: translateZ(0px) translateX(-632px);
				bottom: 0;
				z-index: 120;
			}
			.line {
				background: url('wp-content/themes/onetone-pro/slider/assets/img/captions/line.png') no-repeat 0 50%;
				height: 1110px;
				width: 556px;
				left: 0;
				-webkit-transform: translateZ(0px) translateX(-773px);
				transform: translateZ(0px) translateX(-773px);
				bottom: 0;
				z-index: 110;
			}
			.titres {
				left: 120px;
				bottom: 140px;
				color: #353535;
				text-transform: uppercase;
				-webkit-transform: translateZ(0px) translateX(-100%);
				transform: translateZ(0px) translateX(-100%);
				z-index: 130;
			}
			.titres .titrePartie {
				top: auto;
				bottom: 38px;
				text-align: left;
			}
			.titrePartie > span {
				position: relative !important;
				left: 0;
				display: block;
				float: left;
				clear: both;
				padding: 10px 25px;
				background-color: rgba(229, 229, 229, 0.87);
				white-space: nowrap;
				letter-spacing: 6px;
			}
			.titres .titrePartie span.l1,
			.titres .titrePartie span.l2 {
				left: -50px;
			}
			.titrePartie > span.l1 {
				padding-bottom: 0;
				font-size: 30px;
				font-weight: 300;
				line-height: 40px;
			}
			.titrePartie > span.l2 {
				font-size: 30px;
				font-weight: 500;
				line-height: 40px;
			}
			.titres .sousTitre {
				position: relative !important;
				left: -50px;
				clear: both;
				float: left;
				font-size: 11px;
				color: #353535;
				line-height: 28px;
				padding: 0 25px;
				background-color: #e4e3e5;
				letter-spacing: 2px;
				margin-top: 1em;
			}

			@media screen and (max-width:959px) {
				.titres .titrePartie {
					top: 58px;
				}

				.titrePartie > span {
					padding: 7px 20px !important;
					letter-spacing: 3px !important;
					font-size: 25px !important;
					line-height: 35px !important;
				}
			}

			@media screen and (max-width:959px) {
				.bande {
					margin-left: -70px;
				}

				.line {
					margin-left: -70px;
				}

				.titres {
					left: 0px;
				}

				.titres .titrePartie {
					top: 58px;
				}

				.titrePartie > span {
					padding: 7px 20px !important;
					letter-spacing: 3px !important;
					font-size: 25px !important;
					line-height: 35px !important;
				}

				.titres .sousTitre {
					right: 60px;
				}
			}

			@media screen and (max-width:639px) {
				.bande {
					margin-left: -100px;
				}

				.line {
					margin-left: -140px;
				}

				.titres {
					width: 100%;
					padding-right: 80px;
				}

				.titres .titrePartie {
					top: 40px;
				}

				.titrePartie > span {
					padding: 5px 15px !important;
					letter-spacing: 2px !important;
					font-size: 20px !important;
					line-height: 30px !important;
					white-space: inherit !important;
				}
				
				.titres .titrePartie > span.l1 {
					margin-right: 7px;
				}
                   }
<!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>

【问题讨论】：

  • 滑块测试：melodiatest.byethost22.com 登录 Wordpress：tester 登录密码：tester
  • 主要成就假设是，当改变分辨率或调整窗口大小时自动 dopasowywało 宽度

标签： javascript jquery html css jquery-plugins


【解决方案1】：

我解决了一旦有人遇到类似问题，我建议它不需要转储可能会干扰的 css。 修复它：

#exampleone {
				position: relative;
				top: 0;
                                left: 0px;
				bottom: 0;
				right: 0;
				height: 668px;
               
                                width: 100%;
			}
			#exampleone .frame {

                                 width: 100%;
				height: 660px;

                                -webkit-perspective: 1000px;
				perspective: 1000px;

				-webkit-perspective-origin: 50% 50%;
				perspective-origin: 50% 50%;

			}
			#exampleone .frame .slide_element {
				height: 100%;
                                width: 100% !important;
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			#exampleone .frame .slide_element > div {
				float: left;
				height: 100%;
                            
			}
			#exampleone .frame .mSCover img {
				max-width: none;
                                
			}
<div id="exampleone" class="">
  
/* class null its important*/

【讨论】：

    猜你喜欢
    • 2020-04-06
    • 2012-06-14
    • 1970-01-01
    • 2020-12-11
    • 2014-07-31
    • 2011-12-27
    • 1970-01-01
    • 2011-10-08
    • 2022-11-22
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode