我正在使用slidjs jquery插件(http://slidesjs.com/)为我的网站以幻灯片形式显示图像。我的图像是1200px x 450px(宽x高)。一切正常,预计我的滑块不会在整个屏幕宽度上扩展。这是一个快照 -
这是我执行此插件的脚本 -
// SlidesJS Required: Initialize SlidesJS with a jQuery doc ready
$('#slides').slidesjs({
width: 1200,
height: 450,
navigation: {
active: false,
effect: "fade"
},
pagination: {
active: false,
effect: "fade"
},
play: {
auto: true,
effect: "fade",
interval: 5000
},
effect: {
fade: {
speed: 1000
}
}
});
这就是CSS -
#slides {
display: none
}
#slides .slidesjs-navigation {
margin-top:3px;
}
#slides .slidesjs-previous {
margin-right: 5px;
float: left;
}
#slides .slidesjs-next {
margin-right: 5px;
float: left;
}
.slidesjs-pagination {
margin: 6px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(/img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#slides a:link,
#slides a:visited {
color: #333
}
#slides a:hover,
#slides a:active {
color: #9e2020
}
.navbar {
overflow: hidden
}
/* Prevent the slideshow from flashing on load */
#slides {
display: none
}
/* Center the slideshow */
.container {
margin: 0 auto
}
/* Show active item in the pagination */
.slidesjs-pagination .active {
color:red;
}
/* Media quires for a responsive layout */
/* For tablets & smart phones */
@media (max-width: 767px) {
body {
padding-left: 10px;
padding-right: 10px;
}
.container {
width: auto
}
}
/* For smartphones */
@media (max-width: 480px) {
.container {
width: auto
}
}
/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
.container {
width: 724px
}
}
/* For larger displays */
@media (min-width: 1200px) {
.container {
width: 1170px
}
}
还引用了所需的jQuery库,sliderjs插件js和css文件。唯一的问题是这个滑块的尺寸。我希望滑块在我的滑块容器上展开,它具有黑色背景。但我无法做到这一点。