Swiper Slider with right offside

index.html

<!-- Swiper -->
            <div class="sc_scroll_sclide">
                <div class="swiper sc_slider_02">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="assets/images/big-3.jpg" alt="">
                            <div class="image_sc_slide">
                                <h3>title here</h3>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="assets/images/big-3.jpg" alt="">
                            <div class="image_sc_slide">
                                <h3>title here</h3>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="assets/images/big-3.jpg" alt="">
                            <div class="image_sc_slide">
                                <h3>title here</h3>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="assets/images/big-3.jpg" alt="">
                            <div class="image_sc_slide">
                                <h3>title here</h3>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="assets/images/big-3.jpg" alt="">
                            <div class="image_sc_slide">
                                <h3>title here</h3>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>

            <style>
                @media (min-width: 576px) {
                    .sc_scroll_sclide{
                        margin-left: calc((100% - 540px) / 2);
                    }
                }
                @media (min-width: 768px) {
                    .sc_scroll_sclide{
                        margin-left: calc((100% - 720px) / 2);
                    }
                }
                @media (min-width: 992px) {
                    .sc_scroll_sclide{
                        margin-left: calc((100% - 960px) / 2);
                    }
                }
                @media (min-width: 1200px) {
                    .sc_scroll_sclide{
                        margin-left: calc((100% - 1140px) / 2);
                    }
                }
                @media (min-width: 1400px) {
                    .sc_scroll_sclide{
                        margin-left: calc((100% - 1320px) / 2);
                    }
                } 
                .sc_slider_02 .swiper-slide{
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                }
                .image_sc_slide {
                    min-height: 400px; 
                }
            </style>

//swiper slider
    var swiper = new Swiper(".sc_slider_02", {
		spaceBetween: 20,
		speed: 1400,
		loop: true,
		autoplay: {
		  delay: 2500,
		  disableOnInteraction: false
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		breakpoints: {
		  320: {
			slidesPerView: 1.2
		  },
		  768: {
			slidesPerView: 3.2
		  },
		  992: {
			slidesPerView: 3.3
		  },
		  1200: {
			slidesPerView: 3.5
		  },
		  1400: {
			slidesPerView: 3.7
		  }
		}	
    }); 

	//Replace carousel images into background images.
	$('.sc_slider_02 .swiper-slide img').each(function() {
		var imgSrc = $(this).attr('src');
		$(this).parent().css({'background-image': 'url('+imgSrc+')'});
		$(this).remove();
	});