nolimits4web/swiper breakpoints

by satodavan

HTML

<script src="https://rawgit.com/nolimits4web/Swiper/master/dist/js/swiper.jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/nolimits4web/Swiper/master/dist/css/swiper.min.css">
<div id="partners-gallery" class="swiper-container">
  <div class="swiper-wrapper">

    <div class="swiper-slide">
      <div class="partner-pict">
        1
      </div>
    </div>

    <div class="swiper-slide">
      <div class="partner-pict partner-pict--w2">
        2
      </div>
    </div>
    
    <div class="swiper-slide">
      <div class="partner-pict">
        3
      </div>
    </div>
    
    <div class="swiper-slide">
      <div class="partner-pict partner-pict--w3">
        4
      </div>
    </div>
    
    <div class="swiper-slide">
      <div class="partner-pict">
        5
      </div>
    </div>
    
    <div class="swiper-slide">
      <div class="partner-pict partner-pict--w2">
        6
      </div>
    </div>
    
    <div class="swiper-slide">
      <div class="partner-pict">
        7
      </div>
    </div>
    
    <div class="swiper-slide">
      <div class="partner-pict">
        8
      </div>
    </div>
    
    <div class="swiper-slide">
      <div class="partner-pict">
        9
      </div>
    </div>
    
  </div>
</div>

SCSS

.swiper-slide {
  text-align: center;
  width: auto;
}

.partner-pict {
  display: inline-block;
  width: 150px;
  height: 150px;
  background: #fff;
  border: 1px solid #ccc;
  
  &--w2 {
    width: 180px;
  }
  
  &--w3 {
    width: 230px;
  }
}

JavaScript

$('#partners-gallery').each(function () {
		var $swiper = $(this),
			carouselPartnersOptions = {
				slidesPerView: 'auto',
				spaceBetween: 60,
				breakpoints: {
					480: {
						slidesPerView: 1,
						spaceBetween: 0
					}
				}
			};
		
		$swiper.swiper(carouselPartnersOptions);
	});