Cannot make Slider to be responsive

Question

I've run into a problem.I'm trying to build a full-screen image slider with responsive images.I tried all combination:Add style height:100%,width :100% ,height:auto,width:auto in HTML,in CSS but nothing seems to work.I will show you the code maybe i've done something wrong. I cannot add code snippet because are doesn't display images and it's a lot of code and classes.This problem is driven me crazy,i`m looking for a fix for 4 hours.

HTML

<div id="showcase">
    <div id="arrow-left" class="arrow"></div>
    <div id="slider">
      <div class="slide slide1"></div>
      <div class="slide slide2 "></div>
      <div class="slide  slide3"></div>
    </div>
    <div id="arrow-right" class="arrow"></div>
  </div>

CSS

#showcase,
#slider,
.slide-content {
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

#showcase {
  position: relative;
  height: 100%;
  width: 100%;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide1 {
  background: url(/Core/img/lazar1.jpg) no-repeat center center/cover;
}

.slide2 {
  background: url(/Core/img/lazar2.jpg) no-repeat center center/cover;
}

.slide3 {
  background: url(/Core/img/lazar3.jpg) no-repeat center center/cover;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  border-style: solid;
}

#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent blue transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent blue transparent blue;
  right: 0;
  margin-right: 30px;
}

Answer 1

To fix a problem like this, for responsive design, use media queries. The page being referenced uses media queries at certain width breakpoints to reduce the height of the div containing the images so as to allow the screen to shrink width-wise while still displaying the image with an intact aspect ratio (as they are rather wide images). An example in code would look like this:

//HTML
<div id="showcase">
    <div id="arrow-left" class="arrow"></div>
    <div id="slider">
      <div class="slide slide1"></div>
      <div class="slide slide2 "></div>
      <div class="slide  slide3"></div>
    </div>
    <div id="arrow-right" class="arrow"></div>
  </div>

//CSS
#showcase,#slider{
  height:100vh;
  width:100%;
}
.slide{
  width:100vw;
  height:100vh
}
.slide1{
  background:url(http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar3-1920.jpg) no-repeat center center/cover;
}

@media screen and (max-width: 900px) {
  .slide{
    height: 80vh;
  }
}
@media screen and (max-width: 700px) {
    .slide{
    height: 70vh;
  }
}
@media screen and (max-width: 600px) {
    .slide{
    height: 60vh;
  }
}
@media screen and (max-width: 500px) {
    .slide{
    height: 50vh;
  }
}
@media screen and (max-width: 400px) {
    .slide{
    height: 40vh;
  }
}
@media screen and (max-width: 300px) {
    .slide{
    height: 30vh;
  }
}

Please be aware that these are not spectacular examples of media queries, they are simply being used to demonstrate the mechanism.