Question

对，所以，我真的很感激这里的一些帮助。这段代码完全超出了我的想象基本上该网站是976px; 滑块最多适合这个（如果我扩展网站大小，滑块保持在这个976px。）在这之下的任何事情都很有效。（扩展到移动设备）

我想增加它所占用的高度，而且我想让它变宽，因此它的宽度始终是用户屏幕的100％。

enter image description here

索引页面调用滑块

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

样式表

/*============================================================================
  #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主题上做了这个，以创建一个短循环的视频背景。我需要它来拉伸整个宽度，它受到一个父元素的约束。它看起来不像你有相同的主题，但概念是相同的。

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

如果您有任何问题，请告诉我，我可以为您提供进一步的帮助。如果你发布了一个链接到网站，我可以为你看看它，并告诉你需要做什么。

Shopify图像滑块 - 始终全屏扩展到用户

1 个答案: