我想更改 skitter jquery slider 的宽度和高度。我试图用“重要!”覆盖默认的 jquery.css 宽度 100%!
它应该覆盖内联规则，但我无法控制宽度和高度。这个问题的解决方案是什么？
$(function() {
$('#slider').skitter({
theme : 'square',
navigation : true,
label : false,
dots : false,
});
}); height: 600px;
position: relative;
color: #FFF;
overflow: hidden;
}
.skitter,.skitter-square{
width:1300px !important;
margin: 0
}
.container_skitter {
width:1300px !important;
}
.box_skitter {
width:1300px !important;
}
.box_skitter img {
width:1300px !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Normalize.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Poor+Story|Raleway" rel="stylesheet">
<!--
font-family: 'Montserrat', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Poor Story', cursive;
-->
<link href="css/skitter.css" type="text/css" media="all" rel="stylesheet" />
<link rel="stylesheet" href="css/app.css">
<title>Santa</title>
</head>
<body>
<header id="main-header">
<div class="skitter" id="slider">
<ul>
<li>
<a href="#cut">
<img src="images/slide_1.jpg" class="cut" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<a href="#see-more" class="btn btn-xs btn-warning">See more</a>
</p>
</div>
</li>
<li>
<a href="#swapBlocks">
<img src="images/slide_2.jpg" class="swapBlocks" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<a href="#see-more" class="btn btn-xs btn-warning">See more</a>
</p>
</div>
</li>
<li>
<a href="#swapBarsBack">
<img src="images/slide_3.jpg" class="swapBarsBack" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<a href="#see-more" class="btn btn-xs btn-warning">See more</a>
</p>
</div>
</li>
</ul>
</div>
</header>
<!--Scripts-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>如您所见，我无法覆盖内联样式。
最佳答案
您可以只覆盖 slider 的宽度以及相应的图像宽度。 fiddle :http://jsfiddle.net/sumeshnu/5n9yz8tg/3/
.skitter,.skitter-square{
width:1300px !important;
margin: 0
}
.container_skitter {
width:1300px !important;
}
.box_skitter {
width:1300px !important;
}
.box_skitter img {
width:1300px !important;
}
#slider{
max-width: 400px !important;
height: 800px;
}
div#slider img {
max-width: 400px!important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/jquery.skitter.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Normalize.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Poor+Story|Raleway" rel="stylesheet">
<!--
font-family: 'Montserrat', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Poor Story', cursive;
-->
<link href="https://cdn.jsdelivr.net/npm/skitter-slider@5.1.4/dist/skitter.css" type="text/css" media="all" rel="stylesheet" />
<link rel="stylesheet" href="css/app.css">
<title>Santa</title>
<script>
$(document).ready(function(){
$('#slider').skitter({
theme : 'square',
navigation : true,
label : false,
dots : false,
});
});
</script>
</head>
<body>
<header id="main-header">
<div class="skitter" id="slider">
<ul>
<li>
<a href="#cut">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="cut" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<a href="#see-more" class="btn btn-xs btn-warning">See more</a>
</p>
</div>
</li>
<li>
<a href="#swapBlocks">
<img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="swapBlocks" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<a href="#see-more" class="btn btn-xs btn-warning">See more</a>
</p>
</div>
</li>
<li>
<a href="#swapBarsBack">
<img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" class="swapBarsBack" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<a href="#see-more" class="btn btn-xs btn-warning">See more</a>
</p>
</div>
</li>
</ul>
</div>
</header>
</body>
</html>关于javascript - 如何更改 jQuery Skitter.js 幻灯片的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52480510/