Valery

$('.class:not(#id)').slideUp() подойдет?
:not()

У вас в background-position прописано только одно измерение, а нужно два (x и y). Фаерфокс и вебкит додумывают по-своему, поэтому и отличия.
Замените на background-position: 0 0, или на background-position: left top, или как в вашем случае будет нужно

upd: поскольку сафари на вебките, то отображает как хром: тык

В последнем проекте использовал такой код для вывода множества одинаковых каруселей:

var tileSlider = $('.tile-slider');
tileSlider.each(function(){
    var mySwiper = new Swiper(this, {
        loop: true,
        nextButton: $(this).parent().find('.tile-slider-next')[0],
        prevButton: $(this).parent().find('.tile-slider-prev')[0]
    });
});

Заверните вызов слайдера в $(document).ready():

$(document).ready(function(){
	    	var swiper = new Swiper('.swiper-container', {
	        pagination: '.swiper-pagination',
	        nextButton: '.swiper-button-next',
	        prevButton: '.swiper-button-prev',
	        simulateTouch: false,
	        paginationClickable: true,
	        spaceBetween: 30,
	        centeredSlides: true,
	        autoplay: 5000,
	        loop: true,
	        autoplayDisableOnInteraction: false,
});

codepen.io/anon/pen/YXQpZW

1. Прячем меню слева
2. При клике на гамбургер показываем меню и двигаем контент вправо

jQuery в данном примере только добавляет и убирает классы для рабочих элементов. Все стили и позиционирование пишутся в css

Нужный вам коллбэк — afterAction

owl.owlCarousel({
	navigation : false,
	singleItem : true,
	slideSpeed : 300,
	paginationSpeed : 400,
	autoPlay: true,
	transitionStyle : "fade",
	addClassActive : true,

	afterAction: function(){
		$('p').removeClass('fadeInDown');
		$('.active p').addClass('fadeInDown');
	}
});

https://jsfiddle.net/orLtLar8/42/