Q:

extend images across slide active slide

I am creating a website for a school project and we were asked to choose a company to design a mock promotional website for. I chose CVS but you could choose anyone. I managed to use a template which I had done completing some codecamdemy classes but the tutorials didn't appear to be helpful in regards to changing the length of the images. What I want to do is to extend the images called "nyse", "mentor" and "mountain" across the length of the whole slide container, but so far, when I change it, the image doesn't seem to do anything. Can anyone tell me where it is going wrong or where to put my code to extend the images? I have tried numerous divs but no luck so far. My code is presented below. 
HTML
   <!doctype html>
<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="header">
      <div class="container">
        <a href="#" class="logo-icon">
          <img src="img/cvs.png">
        </a>

        <div class="headerNi">
      <div class="container">
        <a href="#" class="logo-icon">
          <p><a href title="Click this link to view the scheme.">NIDC Graduate Scheme</a></p>
        </a>
        <div id ="headerMission">CVS Health's Northern Ireland Development Centre, which opened in 2012,<br> 
creates software solutions for all parts of the US company,<br>
with particular focus on internet and mobile applications.</div></div>

        <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Curriculum</a></li>
          <li><a href="#">Staff Profiles</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Register</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle">More <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Graduate Scheme</a></li>
              <li><a href="#">What we look for</a></li>
              <li><a href="#">Links</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    </div>
    </div>

    <div class="slider">

      <div id="nyse-slide" class="slide">
        <div class="container">
          <div class="row">
            <div class="slide-copy col-xs-5">
              <h1>CVS is now hiring</h1>
              <p>We will soon have a nice new building.</p>

              <ul class="get-app">
                <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></a></li>
                <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></a></li>
                <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></a></li>
                <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></a></li>
              </ul>
            </div>
            <div class="slide-img col-xs-7">
              <img src="img/nyse.jpg" width="540px">
            </div>
          </div>
        </div>      
      </div>

      <div class="slide slide-feature">
        <div class="container">
          <div class="row">
            <div class="col-xs-12">
            <br></br>
                <br></br>
                  <br></br>
                    <br></br>
                      <br></br>
                        <br></br>
                          <br></br>
              <a href="#">Accountability</a>
              <p>Take responsibility for your actions.</p>
            </div>

          </div>
        </div>      
      </div> 

      <div id="mountain-slide" class="slide">
        <div class="container">
          <div class="row">
            <div class="slide-copy col-xs-5">
              <h1>Collaboration</h1>
              <p>At CVS, it's important to work together with your mentor!</p>

            </div>
            <div class="slide-img col-xs-7">
              <img src="img/mountain.png">
            </div>
          </div>
        </div>      
      </div> 

      <div id="pharm-slide" class="slide">
        <div class="container">
          <div class="row">
            <div class="slide-copy col-xs-5">
              <h1>Tenacity</h1>
              <p>Be determined.</p>

              <ul class="get-app">
                <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></a></li>
                <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></a></li>
                <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></a></li>
                <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></a></li>
              </ul>
            </div>
            <div class="slide-img col-xs-7">
              <img src="img/pharm.jpg" width="540px">
            </div>
          </div>
        </div>      
      </div> 

    </div>

    <div class="slider-nav">
      <a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
      <ul class="slider-dots">
        <li class="dot active-dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
        <li class="dot">&bull;</li>
      </ul>
      <a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
    </div> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

CSS 
  .container {
  width: 960px;
  color: gray;
}

/* Header */

.header {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #ddd;

  font-family: 'Oswald', sans-serif;
  font-weight: 300;

  font-size: 17px;
  padding: 15px;
}

/* Menu */ 

.header .menu {
  float: right;
  list-style: none;
  margin-top: 5px;
}

.menu > li {
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
}

.menu a {
  color: #898989;
}

/* Dropdown */

.dropdown-menu {
  font-size: 16px;
  margin-top: 5px;
  min-width: 105px;
}

.dropdown-menu li a {
  color: #898989;
  padding: 6px 20px;
  font-weight: 300;
}

/* Carousel */

.slider {
  position: relative;
  width: 100%;
  height: 470px;
  border-bottom: 1px solid #ddd;
}

.slide {
  background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
  background-size: cover;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  .slide {
            text-align: center;
            height: 550px;
        }

        #nyce-slide{
            background-image: url('nsce.jpg');
        } 
        #pharm-slide-feature{
            background-image: url('pharm.jpg');
        } 
        #mountain-slide-feature{
            background-image: url('mountain.jpg');
        } 
.active-slide {
    display: block;
}

.slide-copy h1 {
  color: #363636;  

  font-family: 'Oswald', sans-serif;
  font-weight: 400;

  font-size: 40px;
  margin-top: 105px;
  margin-bottom: 0px;
}

.slide-copy h2 {
  color: #b7b7b7;

  font-family: 'Oswald', sans-serif;
  font-weight: 400;

  font-size: 40px;
  margin: 5px;
}

.slide-copy p {
  color: #959595;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15em;
  line-height: 1.75em;
  margin-bottom: 15px;
  margin-top: 16px;
}

.slide-img {
  text-align: right;
}

/* Slide feature */

.slide-feature {
  text-align: center;
  background-image: url('http://devonsstudio.com/businesspeople.png');
  height: 550px;
}

.slide-feature img {
  margin-top: 112px;
  margin-bottom: 28px;
}

.slide-feature a {
  display: block;
  color: #6fc5e0;

  font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;

  font-size: 20px;
}
.slide-feature p {
color: red;
}

.slider-nav {
  text-align: center;
  margin-top: 80px;

}

.arrow-prev {
  margin-right: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}

.arrow-next {
  margin-left: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}

.slider-dots {
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
}

.slider-dots li {
  color: #bbbcbc;
  display: inline;
  font-size: 30px;
  margin-right: 5px;
}

.slider-dots li.active-dot {
  color: #363636;
}

/* App links */

.get-app {
  list-style: none;
  padding-bottom: 9px;
  padding-left: 0px;
  padding-top: 9px;
}

.get-app li {
  float: left;
  margin-bottom: 5px;
  margin-right: 5px;
}

.get-app img {
  height: 40px;
}
      color: #898989;
      padding: 6px 20px;
      font-weight: 300;
    }

    /* Carousel */

    .slider {
      position: relative;
      width: 100%;
      height: 470px;
      border-bottom: 1px solid #ddd;
    }

    .slide {
      background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
      background-size: cover;
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .active-slide {
        display: block;
    }

    .slide-copy h1 {
      color: #363636;  

      font-family: 'Oswald', sans-serif;
      font-weight: 400;

      font-size: 40px;
      margin-top: 105px;
      margin-bottom: 0px;
    }

    .slide-copy h2 {
      color: #b7b7b7;

      font-family: 'Oswald', sans-serif;
      font-weight: 400;

      font-size: 40px;
      margin: 5px;
    }

    .slide-copy p {
      color: #959595;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.15em;
      line-height: 1.75em;
      margin-bottom: 15px;
      margin-top: 16px;
    }

    .slide-img {
      text-align: right;
    }

    /* Slide feature */

    .slide-feature {
      text-align: center;
      background-image: url('http://devonsstudio.com/businesspeople.png');
      height: 550px;
    }

    .slide-feature img {
      margin-top: 112px;
      margin-bottom: 28px;
    }

    .slide-feature a {
      display: block;
      color: #6fc5e0;

      font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
      font-family: 'Oswald', sans-serif;
      font-weight: 400;

      font-size: 20px;
    }
    .slide-feature p {
    color: red;
    }

    .slider-nav {
      text-align: center;
      margin-top: 80px;

    }

    .arrow-prev {
      margin-right: 45px;
      display: inline-block;
      vertical-align: top;
      margin-top: 9px;
    }

    .arrow-next {
      margin-left: 45px;
      display: inline-block;
      vertical-align: top;
      margin-top: 9px;
    }

    .slider-dots {
      list-style: none;
      display: inline-block;
      padding-left: 0;
      margin-bottom: 0;
    }

    .slider-dots li {
      color: #bbbcbc;
      display: inline;
      font-size: 30px;
      margin-right: 5px;
    }

    .slider-dots li.active-dot {
      color: #363636;
    }

    /* App links */

    .get-app {
      list-style: none;
      padding-bottom: 9px;
      padding-left: 0px;
      padding-top: 9px;
    }

    .get-app li {
      float: left;
      margin-bottom: 5px;
      margin-right: 5px;
    }

    .get-app img {
      height: 40px;
    }

JAVASCRIPT
   var main = function() {
  $('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();
  });

  $('.arrow-next').click(function(e) {
      e.preventDefault();
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();

    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();

    if(nextSlide.length === 0) {
      nextSlide = $('.slide').first();
      nextDot = $('.dot').first();
    }

    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
  });

  $('.arrow-prev').click(function(e) {
      e.preventDefault();
    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();

    var currentDot = $('.active-dot');
    var prevDot = currentDot.prev();

    if(prevSlide.length === 0) {
      prevSlide = $('.slide').last();
      prevDot = $('.dot').last();
    }

    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide');

    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');
  });

}

$(document).ready(main);

A:

Heres a DEMO FIDDLE (You only need to add your images URLS to the CSS)
The first thing you need to do is to add e.preventDefault(); to your click evennts like this:
 $('.arrow-next').click(function(e) {
      e.preventDefault();
      //..more code
 });

 $('.arrow-prev').click(function(e) {
      e.preventDefault();
      //..more code
 });

Then you need to give each slide a unique ID and give it a background for the image, just like you have a background for the .slide-feature like this:
HTML:
 <div id="nyce-slide" class="slide">
  <!-- ...code.. -->
 </div>

 <div id="mountain-slide" class="slide">
  <!-- ...code.. -->
 </div>

 <div id="mentor-slide" class="slide">
  <!-- ...code.. -->
 </div>

CSS:
       .slide {
            text-align: center;
            height: 550px;
        }

        #nyce-slide{
            background-image: url('nyce.jpg');
        } 
        #mentor-slide{
            background-image: url('mentor.jpg');
        } 
        #mountain-slide{
            background-image: url('mountain.jpg');
        } 

Heres the final edit:
<body>
    <div class="header">
        <div class="container">
            <a href="#" class="logo-icon">
                <img src="img/cvs.png">
            </a>

            <div class="headerNi">
                <div class="container">
                    <a href="#" class="logo-icon">
                        <p><a href title="Click this link to view the scheme.">NIDC Graduate Scheme</a></p>
                    </a>
                    <div id ="headerMission">CVS Health's Northern Ireland Development Centre, which opened in 2012,<br> 
                        creates software solutions for all parts of the US company,<br>
                        with particular focus on internet and mobile applications.</div></div>

                <ul class="menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Curriculum</a></li>
                    <li><a href="#">Staff Profiles</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Register</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle">More <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Graduate Scheme</a></li>
                            <li><a href="#">What we look for</a></li>
                            <li><a href="#">Links</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="slider">

        <div id="nyce-slide" class="slide active-slide">
            <div class="container">
                <div class="row">
                    <div class="slide-copy col-xs-5">
                        <h1>CVS is now hiring</h1>
                        <p>We will soon have a nice new building.</p>

                        <ul class="get-app">
                            <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></a></li>
                            <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></a></li>
                            <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></a></li>
                            <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></a></li>
                        </ul>
                    </div>
                </div>
            </div>      
        </div>

        <div id="accountability-slide" class="slide">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <br></br>
                        <br></br>
                        <br></br>
                        <br></br>
                        <br></br>
                        <br></br>
                        <br></br>
                        <a href="#">Accountability</a>
                        <p>Take responsibility for your actions.</p>
                    </div>

                </div>
            </div>      
        </div> 

        <div id="mountain-slide" class="slide">
            <div class="container">
                <div class="row">
                    <div class="slide-copy col-xs-5">
                        <h1>Collaboration</h1>
                        <p>At CVS, it's important to work together with your mentor!</p>

                    </div>
                </div>
            </div>      
        </div> 

        <div id="mentor-slide" class="slide">
            <div class="container">
                <div class="row">
                    <div class="slide-copy col-xs-5">
                        <h1>Tenacity</h1>
                        <p>Be determined.</p>

                        <ul class="get-app">
                            <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></a></li>
                            <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></a></li>
                            <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></a></li>
                            <li><a href="#"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></a></li>
                        </ul>
                    </div>
                </div>
            </div>      
        </div> 

    </div>

    <div class="slider-nav">
        <a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
        <ul class="slider-dots">
            <li class="dot active-dot">&bull;</li>
            <li class="dot">&bull;</li>
            <li class="dot">&bull;</li>
            <li class="dot">&bull;</li>
        </ul>
        <a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
    </div> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        var main = function() {
            $('.dropdown-toggle').click(function() {
                $('.dropdown-menu').toggle();
            });

            $('.arrow-next').click(function(e) {
                e.preventDefault();
                var currentSlide = $('.active-slide');
                var nextSlide = currentSlide.next();

                var currentDot = $('.active-dot');
                var nextDot = currentDot.next();

                if (nextSlide.length === 0) {
                    nextSlide = $('.slide').first();
                    nextDot = $('.dot').first();
                }

                currentSlide.fadeOut(600).removeClass('active-slide');
                nextSlide.fadeIn(600).addClass('active-slide');

                currentDot.removeClass('active-dot');
                nextDot.addClass('active-dot');
            });

            $('.arrow-prev').click(function(e) {
                e.preventDefault();
                var currentSlide = $('.active-slide');
                var prevSlide = currentSlide.prev();

                var currentDot = $('.active-dot');
                var prevDot = currentDot.prev();

                if (prevSlide.length === 0) {
                    prevSlide = $('.slide').last();
                    prevDot = $('.dot').last();
                }

                currentSlide.fadeOut(600).removeClass('active-slide');
                prevSlide.fadeIn(600).addClass('active-slide');

                currentDot.removeClass('active-dot');
                prevDot.addClass('active-dot');
            });

        }

        $(document).ready(main);
    </script>
</body>

