html - Shopify 图像 slider - 始终扩展到用户全屏

Question

没错，我真的很感激这里的一些帮助。这段代码超出了我的理解范围网站基本上是976px； slider 最多适合这个(如果我扩展站点大小， slider 将保持在这个 976px。)在此之下的任何东西都可以正常工作。 (扩展到移动设备)

我想增加它占用的高度，我也想让它的宽度始终是用户屏幕的 100%。

调用 slider 的索引页

{% include 'slider' %}

slider .液体

{% 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 %}

样式表

/*============================================================================
  #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;
  }
}

Answer 1

我真的只是在 Retina 主题上做了这个来创建一个简短的循环视频背景。我需要它来拉伸(stretch)整个宽度，但它受到其中一个父元素的约束。看起来你们的主题不同，但概念是相同的。

您需要使用开发工具并检查元素以找出页面上的哪个元素限制了它的 100%。然后，您需要将 slider 元素移到该元素之外。然后就像设置 CSS 一样简单，将边距/填充设置为 0 等...

如果您有任何问题，请告诉我，我可以进一步帮助您。如果您发布指向该网站的链接，我可以为您查看并告诉您需要做什么。