CODEWITHSUNDEEP
jqueryhtmlcsssliderabsolute
Jose
Jose

Reputation: 5200

Slider (carousel) aligning with other elements

I've built a very basic single-page website which has a nagivation, a slider (carousel with 3 images), and a footer. My problem is that, while the slider fades the images in and out of each other properly, because it is positioned absolutely I cannot get the footer out from underneath it.

The slider overlaps everything, which I guess makes sense since it's absolute.

My question is if it is wiser to keep the slider positioned absolutely (it allows the jQuery to work it's magic fading in/out) and position my footer differently... OR if I should re-work the slider completely.

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>

Sass:

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

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

Here's a sample of my page (as well as the JS working the slider) on JSfiddle: https://jsfiddle.net/josectello/7n8c5bq8/

Thank you immensely in advance.

Upvotes: 0

Views: 94

Answers (2)

Peter Girnus
Peter Girnus

Reputation: 2729

This is an easy fix.

Add this:

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

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

Change your footer to absolute positioning and give it a height like so:

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

This adds a sticky footer to the bottom of your page and avoids conflict with your slider.

See this CodePen for working solution.

Upvotes: 1

Simonyi J&#225;nos
Simonyi J&#225;nos

Reputation: 86

It's ok to keep absolute position, but make the footer's z-index higher than the imgs are, so it will be visible.

I hope i did understand your question correctly.

Upvotes: 1

Related Questions