Слайдер (карусель) выравнивается с другими элементами

Я создал очень простой одностраничный веб-сайт с навигацией, слайдером (каруселью с 3 изображениями) и нижним колонтитулом. Моя проблема в том, что, хотя ползунок правильно плавно выводит изображения друг из друга, поскольку он расположен абсолютно, я не могу вытащить нижний колонтитул из-под него.

Ползунок перекрывает все, что, я думаю, имеет смысл, поскольку он абсолютный.

Мой вопрос заключается в том, будет ли разумнее держать ползунок в абсолютном положении (это позволяет jQuery работать с его волшебным исчезновением и исчезновением) и по-другому расположить мой нижний колонтитул... ИЛИ если я должен полностью переработать ползунок.

HTML:

<div id="carousel">
  <img class="slideshow" src="img/slide2.jpg">
  <img class="slideshow" src="img/slide3.jpg">
  <img class="slideshow" src="img/slide1.jpg">
</div>

Сасс:

#carousel {
  img {
    background-position: center;
    background-repeat: none;
    background-size: cover;
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

.slideshow {
  display: hidden;
  position: absolute;
}

Вот пример моей страницы (а также JS, работающего со слайдером) на JSfiddle: https://jsfiddle.net/josectello/7n8c5bq8/

Заранее большое спасибо.


slider html jquery css absolute
person Jose    schedule 23.10.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Можно сохранить абсолютное положение, но сделайте z-индекс нижнего колонтитула выше, чем у изображений, чтобы он был виден.

Надеюсь, я правильно понял ваш вопрос.

person Simonyi János    schedule 23.10.2015
comment
Что помогает! Но тогда нижний колонтитул будет плавать перед ползунком и перемещаться при изменении размера экрана. Однако, спасибо! - person Jose; 24.10.2015
comment
Затем задайте для нижнего колонтитула абсолютную позицию и поля. - person Simonyi János; 24.10.2015

arrow_upward
1
arrow_downward

Это легко исправить.

Добавь это:

// GLOBAL
body {
  background-color: black;
  margin: 0 0 200px;
}

html {
    position: relative;
    min-height: 100%;
}

Измените нижний колонтитул на абсолютное позиционирование и задайте ему высоту следующим образом:

footer {
  @include module-style;
  position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
}

Это добавит липкий нижний колонтитул внизу страницы и позволит избежать конфликта со слайдером.

См. это CodePen для рабочего решения.

person Gothburz    schedule 23.10.2015
comment
Я посмотрел на CodePen, но он не совсем работает. Нижний колонтитул плавает в середине слайдера. Я также пробовал это в своем собственном коде, все еще получая поплавок. - person Jose; 25.10.2015