Shopify图像滑块 - 始终向用户全屏显示 [英] Shopify image slider- Always extend to users full screen

问题描述

好吧，
我真的很感谢这里的一些帮助。这段代码远远超过了我的头
基本上这个网站是976px;
滑块最适合这个（如果我扩展站点大小，滑块保持在976px。）
任何东西在它下面都行得通。 （缩放到手机）

我想增加它占用的高度，同时我想使它成为宽度总是100％的用户屏幕。 / p>

调用滑块的索引页面

  {％include'slider'％} 
  

slider.liquid

  {％if settings.slider_home_enable％} 
< div class =flexsliderid =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]}}> 
 {％除非设置[slide_img_caption] ==空白％} 
< 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/ 
  - 投稿作者：Tyler Smith（@mbmufffin）
 ==================== ================================================== ======== * / 
 .flexslider {
 margin：0 0 $ gutter; 
 padding：0; 
} 
 .flexslider li {margin：0; } 
 .flexslider .slides> li {
 display：none; / *在JS加载之前隐藏幻灯片。避免图像跳跃* / 
 margin：0; 
职位：亲属; 
 @include backface（）; 
} 
 .flexslider .slides img {
最大宽度：100％; 
 margin：0 auto; 
 display：block; 
} 
 
 .slides {@include clearfix; } 
 html [xmlns] .slides {display：block; } 
 * html .slides {height：1％; } 
 
 / * ================无JS后备================ * / 
 .no-js .slides>李：第一个孩子{display：block; } 
 .flexslider {position：relative;缩放：1; } 
 .flex-viewport {max-height：2000px; -webkit-transition：所有1都很轻松; -moz-transition：所有1s易于使用; -o-transition：所有1都易于理解;过渡：所有1s缓解; } 
。loading .flex-viewport {max-height：300px; } 
 .flexslider .slides {zoom：1; } 
 .carousel li {margin-right：5px; } 
 
 
 
 
 
 / * ================方向导航===== =========== * / 
 .flex-direction-nav {
 margin：0; 
 padding：0; 
 list-style：none; 
} 
 
 .flex-direction-nav {* height：0; } 
 .flex-direction-nav a {
 display：block; 
 width：45px; 
位置：绝对; 
 top：0; 
 bottom：0; 
 overflow：hidden; 
 opacity：0; 
光标：指针; 
 @include转换（全部.3s缓动）; 
} 
 
 .flex-direction-nav .flex-disabled {
 opacity：0！important; 
 filter：alpha（opacity = 0）; 
 cursor：default; 
} 
 
 .flex-direction-nav a {
 text-indent：-9999px; 
背景：{
颜色：透明; 
重复：不重复; 
 size：20px auto; 
} 
 
 / * ================在oldIE中隐藏SVG箭头============== == * / 
 .lte-ie9& {
 display：none; 
 
 
& .flex-prev {
 background-image：url（data：image .....）; 
背景位置：左侧中心; 
 
 
& .flex-next {
 background-image：url（data：image ...）; 
背景位置：右侧中心; 
} 
} 
 
 / * ================ Control Nav ============ ==== * / 
 .flex-control-nav {
 position：absolute; 
底部： -  $ gutter; 
宽度：100％; 
 text-align：center; 
保证金：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; 
光标：指针; 
 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;位置：静态; overflow：hidden;} 
 .flex-control-thumbs li {width：25％;向左飘浮; margin：0;} 
 .flex-control-thumbs img {width：100％;显示：块;不透明度：.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; 
背景位置：右侧中心; 
} 
 .flex-direction-nav a.flex-next {
 right：0; 
背景位置：左侧中心; 
 
 
 
 @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;左：（ -  $天沟）+5; } 
 .flexslider：hover .flex-next {opacity：1;右：（ -  $天沟）+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;左：-45px; } 
 .flexslider：hover .flex-next {opacity：1;右：-45px; } 
} 
 
 / * ================字幕================ * / 
 .flex-caption {
 margin：0; 
位置：绝对; 
剩下：0; 
 right：0; 
 bottom：0; 
背景：＃333; 
 background：rgba（0,0,0，.6）; 
颜色：#fff; 
 text-align：center; 
 text-shadow：0 -1px 0 rgba（0,0,0，.3）; 
填充：$ gutter / 2; 
} 
 
 / * ================自定义Flexslider样式================ * / 
 .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从字面上看，这只是在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.

这篇关于Shopify图像滑块 - 始终向用户全屏显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！