I从字面上看，这只是在Retina主题上创建了一个短循环视频背景。我需要它来扩展整个宽度，并且受到其中一个父元素的约束。它看起来不像你有相同的主题，但概念是相同的。

您需要使用开发工具并检查元素以找出哪些元素页面正在收缩100％。然后您需要将滑块元素移到该元素之外。然后就像设置CSS一样简单，使margin / padding为0等等。

让我知道你是否有任何问题，我可以帮助你进一步。如果您发布了该网站的链接，我可以为您查看并告诉您需要完成的工作。

right so, i would really appreciate some help here. this code is well over my head Basically the site is 976px; the slider is fitting to this at most( if i extend the site size the slider stays at this 976px.) anything under this it works well. (scales to mobile)

i want to increase the height it takes up and also i want to make it so it is width is always 100% of the users screen.

index page calling the slider

{% include 'slider' %}

slider.liquid

{% if settings.slider_home_enable %}
  <div class="flexslider" id="heroSlider" >
    <ul class="slides">
      {% for i in (1..6) %}
        {% capture slide %}slide_{{ i }}{% endcapture %}
        {% capture slide_link %}slide_{{ i }}_link{% endcapture %}
        {% capture slide_img %}slide_{{ i }}.jpg{% endcapture %}
        {% capture slide_img_alt %}slide_{{ i }}_alt{% endcapture %}
        {% capture slide_img_caption %}slide_{{ i }}_caption{% endcapture %}
        {% if settings[slide] %}
          <li>
            <a href="{{ settings[slide_link] }}" class="slide-link">
              <img src="{{ slide_img | asset_url }}" alt="{{ settings[slide_img_alt] }}">
              {% unless settings[slide_img_caption] == blank %}
              <p class="h3 flex-caption small--hide">{{ settings[slide_img_caption] }}</p>
              {% endunless %}
            </a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
{% endif %}

stylesheet

/*============================================================================
  #FlexSlider
    - jQuery FlexSlider v2.2.0 | http://www.woothemes.com/flexslider/
    - Contributing author: Tyler Smith (@mbmufffin)
==============================================================================*/
.flexslider {
  margin: 0 0 $gutter;
  padding: 0;
}
.flexslider li { margin: 0; }
.flexslider .slides > li {
  display: none; /* Hide the slides before the JS is loaded. Avoids image jumping */
  margin: 0;
  position: relative;
  @include backface();
}
.flexslider .slides img {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.slides { @include clearfix; }
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }

/*================ No JS Fallback ================*/
.no-js .slides > li:first-child { display: block; }
.flexslider { position: relative; zoom: 1; }
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }





/*================ Direction Nav ================*/
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flex-direction-nav { *height: 0; }
.flex-direction-nav a  {
  display: block;
  width: 45px;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  @include transition(all .3s ease);
}

.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;
}

.flex-direction-nav a {
  text-indent: -9999px;
  background: {
    color: transparent;
    repeat: no-repeat;
    size: 20px auto;
  }

  /*================ Hide SVG arrows in oldIE ================*/
  .lte-ie9 & {
    display: none;
  }

  &.flex-prev {
    background-image: url("data:image.....");
    background-position: center left;
  }

  &.flex-next {
    background-image: url("data:image...");
    background-position: center right;
  }
}

/*================ Control Nav ================*/
.flex-control-nav {
  position: absolute;
  bottom: -$gutter;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    margin: 0 4px;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: middle;
  }
}

.flex-control-paging li a {
  width: 6px;
  height: 6px;
  display: block;
  background-color: #ededed;
  cursor: pointer;
  text-indent: -9999px;
  border-radius: 20px;
  border: 2px solid #fff;

  &:hover {
    background-color: #333;
  }

  &.flex-active {
    background-color: #fff;
    border-color: $colorPrimary;
    cursor: default;
  }
}

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@include at-query ($max, $medium) {
  .flex-direction-nav a {
    opacity: 1;
    width: 25px;
  }
  .flex-direction-nav a.flex-prev {
    left: 0;
    background-position: center right;
  }
  .flex-direction-nav a.flex-next {
    right: 0;
    background-position: center left;
  }
}

@include at-query ($min, $large) {
  .flex-direction-nav .flex-prev { left: 10px; }
  .flex-direction-nav .flex-next { right: 10px; }
  .flexslider:hover .flex-prev { opacity: 1; left: (-$gutter)+5; }
  .flexslider:hover .flex-next { opacity: 1; right: (-$gutter)+5; }
}

@include at-query ($min, $maxWidthBp) {
  .flex-direction-nav .flex-prev { left: 20px; }
  .flex-direction-nav .flex-next { right: 20px; }
  .flexslider:hover .flex-prev { opacity: 1; left: -45px; }
  .flexslider:hover .flex-next { opacity: 1; right: -45px; }
}

/*================ Captions ================*/
.flex-caption {
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #333;
  background: rgba(0,0,0,.6);
  color: #fff;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  padding: $gutter/2;
}

/*================ Custom Flexslider Styles ================*/
.flexslider .slides {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.slide-link {
  position: relative;
  display: block;

  img {
    display: block;
  }
}

#heroSlider {
  padding-bottom: $gutter*2;
  border-bottom: 1px solid $colorBorder;


  .flex-control-nav {
    bottom: 40px;
  }

  .flex-direction-nav a {
    bottom: $gutter*2;
  }
}

I literally just did this on the Retina theme to create a short looping video background. I needed it to stretch the entire width and it was being constrained by one of the parent elements. It doesn't look like you have the same theme but the concept is the same.

You need to use dev tools and inspect the elments to find out which element on the page is constricting it from going 100%. You then need to move your slider element outside that element. Then it's as simple as just setting the CSS, making margins/padding to 0 etc...

Let me know if you have any questions and I can help you further. If you post a link to the site, I can look at it for you and tell you what needs to be done.