Using two OwlCarousel2 carousels with different settings on the same Bitrix page?

Question

1C-Bitrix

Can't get  https://github.com/smashingboxes/OwlCarousel2 to be used  on the same page with different settings. I use the entire page smashingboxes.github.io/OwlCarousel2/demos/animate.html
for the slider   , and below, to display clients, I use the basic configuration of the  smashingboxes.github.io/OwlCarousel2/demos/basic.html component, I display the  whole thing through 1C-Bitrix: The problem is that the slider settings do not work. as below it picks up the settings for displaying clients: Site page:  u0145929.isp.regruhosting.ru Scripts connect the same differences in settings. Slider template with settings:

<?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>

Client output template with settings:

<?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();What is this for? Try changing the "owl-carousel" class to something else

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>