如何让我的滑块扩展超过100%的屏幕宽度?

时间:2014-07-21 08:06:22

标签: jquery

我正在使用slidjs jquery插件(http://slidesjs.com/)为我的网站以幻灯片形式显示图像。我的图像是1200px x 450px(宽x高)。一切正常,预计我的滑块不会在整个屏幕宽度上扩展。这是一个快照 -

enter image description here

这是我执行此插件的脚本 -

// 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文件。唯一的问题是这个滑块的尺寸。我希望滑块在我的滑块容器上展开,它具有黑色背景。但我无法做到这一点。

0 个答案:

没有答案