I couldn't get the Foundation Orbit slider to work properly, so I switched to the recommended Slick slider.

It works, but doesn't display full-width at the largest screen width; it moves to the left.

I tried using Foundation's "expanded row" class to make the slider span the width, but it doesn't work.  Can anyone tell me what I'm doing wrong?  Here's my code:

 

HTML:

<div class="expanded row">
      <div class="small-12 columns">
        <div id="index-slider" class="text-center">
          <div>
            <img src="assets/72/[email protected]" alt="Photo of Hofherr Meats butcher shop">
          </div>
          <div>
            <img src="assets/72/[email protected]" alt="Photo of rotisserie chickens"> 
          </div>
          <div>
            <img src="assets/72/[email protected]" alt="Photo of corned beed sandwich on marble rye">
          </div>
          <div>
            <img src="assets/72/[email protected]" alt="Photo of wine-tasting event held at Hofherr Meats"> 
          </div>
        </div>
      </div>
    </div>

CSS: 

.row.expanded {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#index-slider {
  width: 100%;
  height: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;

}

 

JS:

      $(document).ready(function(){
	     $('#index-slider').slick({
	       autoplay: true
	     });
      });