مشکل اجرای کتابخانه های jquery

چگونه قسمتی از سایت سه تا اسلایدر داشته باشد

jQuery(document).ready(function ($) {
$('.owl-carousel').owlCarousel({
items: 4,
animateOut: 'fadeOut',
loop: true,
margin: 20,
autoplay: true,
});
}); <section class="owl">
<div class="container">
<div class="row">
<div class="owl-title">
<h2>پربازدیدترین</h2>
</div>
<div dir="ltr" class="owl-carousel">
<div class="carousel">
<img src="./img/hard.png" alt="">
<p>هارد دیسک اکسترنال پرقدرتPower...</p>
<div>
<h6>تومان</h6>
<span>169,000</span>
</div>
</div>
<div class="carousel">
<img src="./img/hard.png" alt="">
<p>هارد دیسک اکسترنال پرقدرتPower...</p>
<div>
<h6>تومان</h6>
<span>169,000</span>
</div>
</div>
<div class="carousel">
<img src="./img/hard.png" alt="">
<p>هارد دیسک اکسترنال پرقدرتPower...</p>
<div>
<h6>تومان</h6>
<span>169,000</span>
</div>
</div>
<div class="carousel">
<img src="./img/hard.png" alt="">
<p>هارد دیسک اکسترنال پرقدرتPower...</p>
<div>
<h6>تومان</h6>
<span>169,000</span>
</div>
</div>
<div class="carousel">
<img src="./img/hard.png" alt="">
<p>هارد دیسک اکسترنال پرقدرتPower...</p>
<div>
<h6>تومان</h6>
<span>169,000</span>
</div>
</div>
<div class="carousel">
<img src="./img/hard.png" alt="">
<p>هارد دیسک اکسترنال پرقدرتPower...</p>
<div>
<h6>تومان</h6>
<span>169,000</span>
</div>
</div>
<div class="carousel">
<img src="./img/hard.png" alt="">
<p>هارد دیسک اکسترنال پرقدرتPower...</p>
<div>
<h6>تومان</h6>
<span>169,000</span>
</div>
</div>
<div class="carousel">
<img src="./img/hard.png" alt="">
<p>هارد دیسک اکسترنال پرقدرتPower...</p>
<div>
<h6>تومان</h6>
<span>169,000</span>
</div>
</div>

                    </div>
                </div>
            </div>
        </section>