空白を取り除くowlcarousel 2最初の項目でループがfalseの場合

Question

プラグインowlcarousel2でスライダーを作成し、ループをfalseに設定したいので、ループを止めて最後の要素を空白にします。

しかし、どういうわけか、最初のアイテムの空白を削除したい、またはそのアイテムの最初のアイテムを削除したいとします。より良い

$(document).ready(function(){ 
 
$('.slider-wrap').owlCarousel({ 
 
    center: true, 
 
    items: 3, 
 
    loop: false, 
 
    margin: 10, 
 
    nav: true, 
 
    dots: false, 
 
    touchDrag : false, 
 
    mouseDrag : false 
 
}); 
 

 
$('.slider-wrap .owl-stage').css('transform','translateX(0)'); 
 
$('.slider-wrap').on('changed.owl.carousel', function(e) { 
 
var slidIndex = (e.item.index + 1) - e.relatedTarget._clones.length/2; 
 

 
if(slidIndex == 1){ 
 
    $('.slider-wrap .owl-stage').css('background-color','yellow'); 
 
    $('.slider-wrap .owl-stage').css('transform','translateX(0)'); 
 
} 
 
}); 
 
});

.item{ 
 
    height: 100px; 
 
    background-color: red; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="slider-container"> 
 
\t \t \t \t <div class="slider-wrap owl-carousel"> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 1 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 2 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 3 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 4 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 5 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 6 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

Answer 1

がループ追加してください行うにはどのように任意の提案、 はこのようにしようとしていますが、それはうまく動作doesntの：真。

$(document).ready(function(){ 
 
$('.slider-wrap').owlCarousel({ 
 
    center: true, 
 
    items: 3, 
 
    loop: true, 
 
    margin: 10, 
 
    nav: true, 
 
    dots: false, 
 
    touchDrag : false, 
 
    mouseDrag : false 
 
}); 
 

 
$('.slider-wrap .owl-stage').css('transform','translateX(0)'); 
 
$('.slider-wrap').on('changed.owl.carousel', function(e) { 
 
var slidIndex = (e.item.index + 1) - e.relatedTarget._clones.length/2; 
 

 
if(slidIndex == 1){ 
 
    $('.slider-wrap .owl-stage').css('background-color','yellow'); 
 
    $('.slider-wrap .owl-stage').css('transform','translateX(0)'); 
 
} 
 
}); 
 
});

.item{ 
 
    height: 100px; 
 
    background-color: red; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="slider-container"> 
 
\t \t \t \t <div class="slider-wrap owl-carousel"> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 1 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 2 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 3 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 4 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 5 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t 6 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>