Carousel/Slider images not resizing properly

Question

I have used a small script unslider.js ( http://www.expertfrontend.com/unslider/unslider.js ) to display a slider on my webpage.

I am having trouble with the slider that resizing the window does not properly resize the slide, but if the page is refreshed on that window size, its width is resized properly.

The webpage with the inline css and javascript can be viewed here:
http://www.expertfrontend.com/unslider/1.html

If you resize the window you can see that the images dont resize with it, but if you refresh the page the images are now resized according to the screen size. How can I fix this?

The HTML:

 <div class="row">
      <div class="col-lg-6 col-md-12 col-6 grid-1">
        <div class="banner">
            <ul class="list-unstyled">
               <li>
                <a href="#">
                  <div class="img-overlay">
                    <img src="img/img2.jpg" alt="Spring Collection" />
                   </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="img-overlay">
                       <img src="img/img3.jpg" alt="Men's Arrival" />
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="img-overlay">
                      <img src="img/img5.jpg" alt="Bike Rack" />
                    </div>
                  </a>
                </li>
            </ul>
            <ol class="dots"></ol>
         </div><!-- end banner -->
       </div><!-- end grid-1 -->
     </div><!-- end row -->

The CSS:

.grid-1 {width: 100%;}
    .banner { 
        position: relative; 
        overflow: hidden; 
    }
    .banner ul li {float: left;}
        .banner img {}      
        .banner .btn, .banner .dot {
        -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
        -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
        -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
        -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
        filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    }
    .banner .dots {
        position: absolute;
        right: 10px;
        bottom: 0px;
        margin-bottom: 0;
    }
        .banner .dots li {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 4px;
            text-indent: -999em;
            border: 2px solid #fff;
            border-radius: 6px;
            cursor: pointer;
            opacity: .4;
            -webkit-transition: background .5s, opacity .5s;
            -moz-transition: background .5s, opacity .5s;
            transition: background .5s, opacity .5s;
        }
            .banner .dots li.active {
                background: #fff;
                opacity: 1;
            }
    @media (max-width: 1199px) { 
        .grid-1 img {width: 100%; height: 500px; min-width: 0; max-width: 100%;}
    }
    @media (max-width: 1183px) { 
        .grid-1 {width: 100%; padding-right: 0;}
            .grid-1 img {width: 100%; height: 500px;}
    }   
    @media (max-width: 1060px) { 
        .grid-1 {max-width: 100%; min-width: 0;}
            .grid-1 img {max-width: 100%; min-width: 0;}
    }
    @media (max-width: 600px) { 
        .grid-1 img {height: 350px;}
    }
    @media (max-width: 400px) { 
    .grid-1 img {height: 300px;}
    }
    @media (max-width: 350px) { 
        .grid-1 img {height: 270px;}
    }
    @media (min-width: 1200px) { 
        .grid-1 {width: 100%;}
        .grid-1 img {width: 100%; height: auto}
    }

Live link:
http://www.expertfrontend.com/unslider/1.html

Answer 1

In the jQuery <script> block add fluid: true in the unslider options see demo:

Demo

	$(document).ready(function() {
	  $('.banner').unslider({
	    speed: 500, //  The speed to animate each slide (in milliseconds)
	    delay: 3000, //  The delay between slide animations (in milliseconds)
	    complete: function() {}, //  A function that gets called after every slide animation
	    keys: true, //  Enable keyboard (left, right) arrow shortcuts
	    dots: true, //  Display dot navigation
	    fluid: true //>>>>>>>Enable responsiveness<<<<<<<<<<
	  });

	});

	.grid-1 {
	  width: 100%;
	}
	.banner {
	  position: relative;
	  overflow: hidden;
	}
	.banner ul li {
	  float: left;
	}
	.banner img {} .banner .btn,
	.banner .dot {
	  -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
	  -moz-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
	  -ms-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
	  -o-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
	  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
	}
	.banner .dots {
	  position: absolute;
	  right: 10px;
	  bottom: 0px;
	  margin-bottom: 0;
	}
	.banner .dots li {
	  display: inline-block;
	  width: 10px;
	  height: 10px;
	  margin: 0 4px;
	  text-indent: -999em;
	  border: 2px solid #fff;
	  border-radius: 6px;
	  cursor: pointer;
	  opacity: .4;
	  -webkit-transition: background .5s, opacity .5s;
	  -moz-transition: background .5s, opacity .5s;
	  transition: background .5s, opacity .5s;
	}
	.banner .dots li.active {
	  background: #fff;
	  opacity: 1;
	}
	@media (max-width: 1199px) {
	  .grid-1 img {
	    width: 100%;
	    height: 500px;
	    min-width: 0;
	    max-width: 100%;
	  }
	}
	@media (max-width: 1183px) {
	  .grid-1 {
	    width: 100%;
	    padding-right: 0;
	  }
	  .grid-1 img {
	    width: 100%;
	    height: 500px;
	  }
	}
	@media (max-width: 1060px) {
	  .grid-1 {
	    max-width: 100%;
	    min-width: 0;
	  }
	  .grid-1 img {
	    max-width: 100%;
	    min-width: 0;
	  }
	}
	@media (max-width: 600px) {
	  .grid-1 img {
	    height: 350px;
	  }
	}
	@media (max-width: 400px) {
	  .grid-1 img {
	    height: 300px;
	  }
	}
	@media (max-width: 350px) {
	  .grid-1 img {
	    height: 270px;
	  }
	}
	@media (min-width: 1200px) {
	  .grid-1 {
	    width: 100%;
	  }
	  .grid-1 img {
	    width: 100%;
	    height: auto
	  }
	}
	

<!DOCTYPE html>
<html>

<head>
  <base href="http://www.expertfrontend.com/unslider/">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Project Title</title>
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/bootstrap-theme.css" rel="stylesheet">
  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">-->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="unslider.js"></script>


</head>

<body>
  <div id="main">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-6 grid-1">
          <div class="banner">
            <ul class="list-unstyled">
              <li>
                <a href="#">
                  <div class="img-overlay">
                    <img src="img/img2.jpg" alt="Spring Collection" />
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img-overlay">
                    <img src="img/img3.jpg" alt="Men's Arrival" />
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img-overlay">
                    <img src="img/img5.jpg" alt="Bike Rack" />
                  </div>
                </a>
              </li>
            </ul>
            <ol class="dots"></ol>
          </div>
          <!-- end banner -->
        </div>
        <!-- end grid-1 -->
      </div>
      <!-- end row -->
    </div>
    <!-- end container-fluid -->
  </div>
  <!-- end main -->


</body>

</html>

Answer 2

unslider.js still had bugs and issues with responsiveness. But I was able to solve that issue by using bootstrap's default carousel instead of unslider.js.

This can be a good starting point:
http://www.bootply.com/xDCnleagYL

The jQuery for the slider to control the interval:

$(function(){
    $('.carousel').carousel({
      interval: 2000
    });
});

In order to control the speed of the sliding image:

/* faster sliding speed */
.carousel-inner > .item {
    -webkit-transition: 0.5s ease-in-out left;
    -moz-transition: 0.5s ease-in-out left;
    -o-transition: 0.5s ease-in-out left;
    transition: 0.5s ease-in-out left;
}