Подскажите, пожалуйста, слайдер изображения. Всегда обращайтесь к полноэкранному пользователю

Question

так, Мне очень понравилась бы помощь здесь. этот код намного над моей головой В основном сайт 976px; ползунок максимально подходит к этому (если я расширяю размер сайта, то ползунок остается на этом 976px.) что-нибудь под этим работает. (весы для мобильных устройств)

Я хочу увеличить высоту, которую она занимает, а также я хочу сделать так, чтобы ширина всегда была 100% экрана пользователей.

индекс страницы вызова ползунок

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

Я буквально только что сделал это на Рети на тему создания короткого петлевого видео фона. Мне нужно было растянуть всю ширину, и она была ограничена одним из родительских элементов. Не похоже, что у вас одна и та же тема, но концепция такая же.

Вам нужно использовать инструменты разработчика и проверить элементы, чтобы узнать, какой элемент на странице сжимает его от 100%. Затем вам нужно переместить элемент слайдера вне этого элемента. Тогда это так же просто, как просто установка CSS, создание полей/отступов до 0 и т. Д.

Сообщите мне, если у вас есть вопросы, и я могу вам помочь. Если вы разместите ссылку на сайт, я могу посмотреть на нее и рассказать вам, что нужно сделать.