Использование двух каруселей OwlCarousel2 с разными настройками на одной странице битрикс?

Question

[Sinner3]

Не могу добиться использования https://github.com/smashingboxes/OwlCarousel2 на одной странице с разными настройками. 
Использую для слайдер ан всю страницу smashingboxes.github.io/OwlCarousel2/demos/animate.html а ниже для вывода клиентов использую базовую настройку компонента smashingboxes.github.io/OwlCarousel2/demos/basic.html все это дело вывожу через 1С-Битрикс:
Проблема заключается в том что на настройки слайдера не работают. так как ниже он подхватывает настройки для отображения клиентов:
Страница сайта: u0145929.isp.regruhosting.ru
Скрипты подключаются одинаковые отличия в настройках.
Шаблон слайдера с настройками:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
<div class="custom1 owl-carousel owl-theme">

<?foreach($arResult["ITEMS"] as $arItem):?>
	<?
	$this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
	$this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
	?>
	  
			
    <div class="item"><img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>" title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"/>
    </div>
    
<?endforeach;?>
</div>

<script>
jQuery(document).ready(function($) {

	$('.fadeOut').owlCarousel2({
		items:1,
		animateOut:'fadeOut',
		loop:true,
		margin:10,
	});

	$('.custom1').owlCarousel2({
		animateOut: 'slideOutDown',
		animateIn: 'flipInX',
		items:1,
		margin:30,
		stagePadding:30,
		smartSpeed:450
	});

});
</script>

Шаблон вывода клиентов с настройками:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>

<h2 class="he">Наши клиенты</h2>
<div class="owl-carousel owl-theme">

<?foreach($arResult["ITEMS"] as $arItem):?>
	<?
	$this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
	$this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
	?>
	  
			
    <div class="item enjoy-kar"><img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>" title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"/>
    	<div class="info">
          <div class="info-back">
            <span><?echo $arItem["NAME"]?></span>
            <p><?echo $arItem["PREVIEW_TEXT"];?></p>
          </div>
    	</div> 
    </div>
    
<?endforeach;?>
</div>

<script>
$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

$('.owl-carousel').owlCarousel({
    rtl: false,
	loop:true,
	margin:10,
    responsiveClass:true,
	navText:[ '', '' ],
    responsive:{
        0:{
            items:2,
            nav:false
        },
        600:{
            items:4,
            nav:false
        },
        1000:{
            items:6,
            nav:false,
            loop:false
        }
    }
})
</script>

Answer 1

[Сергей]

$(".owl-carousel").owlCarousel(); Это для чего нужно? Попробуйте класс "owl-carousel" поменять на что-то другое

Comments

[Sinner3]

я в JavaScript файле и в шаблоне слайдера менял переменную(или функцию) owlCarousel на owlCarousel2, думал поможет, не разбираюсь пока в JavaScript, но не помогло. А классы только описывают отображени, в слайдере класс custom1

Answer 2

[Механик]

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>

<h2 class="he">Наши клиенты</h2>
<div class="owl-carousel owl-theme" id="carousel2">

<?foreach($arResult["ITEMS"] as $arItem):?>
  <?
  $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
  $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
  ?>
    
      
    <div class="item enjoy-kar"><img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>" title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"/>
    	<div class="info">
          <div class="info-back">
            <span><?echo $arItem["NAME"]?></span>
            <p><?echo $arItem["PREVIEW_TEXT"];?></p>
          </div>
    	</div> 
    </div>
    
<?endforeach;?>
</div>

<script>
$(document).ready(function(){
  $("#carousel2").owlCarousel();
});

$('#carousel2').owlCarousel({
    rtl: false,
  loop:true,
  margin:10,
    responsiveClass:true,
  navText:[ '', '' ],
    responsive:{
        0:{
            items:2,
            nav:false
        },
        600:{
            items:4,
            nav:false
        },
        1000:{
            items:6,
            nav:false,
            loop:false
        }
    }
})
</script>