استفاده از Owl Carousel در لاراول

Owl Carousel چیست؟

Owl Carousel یک افزونه برای ایجاد لغزنده چرخ و فلکی واکنش گرا در وبسایت است.

کجا استفاده می‌شود؟

این افزونه برای مواقعی استفاده میشه که شما بخواید تعداد زیادی آیتم را در یک سطر نمایش بدید. به مثال زیر توجه کنید.

این یک Owl Carousel است که در عین حال که جذابیت فوق العاده ای به وبسایت شما میده، میتونه فضای کمی از وبسایت شمارو برای نمایش تعداد زیادی آیتم اشغال کنه.

چگونه از این افزونه در لاراول استفاده کنیم؟!

و اما بپردازیم به سوال اصلی و مهمی که ما بخاطرش اینجاییم.

ابتدا باید این افزونه را از طریق وبسایت Owl Carousel دانلود کنیم.

وارد وبسایت شوید و از طریق Download در بالای صفحه، افزونه رو دانلود کنید.

برای استفاده از این افزونه ما به سه فایل به نام های owl.carousel.min.css، owl.theme.default.min.css و owl.carousel.js نیاز داریم که دو فایل css نام برده شده در فایل زیپ دانلود شده و در مسیر dist/assets و فایل js نام برده شده در مسیر dist وجود دارد.

دو فایل css که در بالا از آن ها نام برده شد را باید در پروژه لاراول خود کپی کنید.

پروژه لاراول خود را باز کنید و داخل پوشه public یک دایرکتوری به نام assets ایجاد کنید. و در دایرکتوری ایجاد شده دو دایرکتوری به نام های css و js ایجاد کنید.

نکته: نام پروژه لاراولی که ایجاد کردم test است.

نکته: نام ها اهمیتی ندارند و فقط باید بتوان فایل های css و js را در پروژه link کرد.

دو فایل css که در بالا گفته شد را در دایرکتوری css کپی کنید و تک فایل js گفته شده را در دایرکتوری js.

حال شما با موفقیت فایل های مورد نیاز برای استفاده از افزونه را در پروژه خود اضاف کردید و فقط باید از آن در پروژه استفاده کنید.

حال یک view بسازید و فایل های css و js را به view مورد نظر خود لینک کنید.

فایل های css کپی شده در مرحله بالا را مانند هر فایل css دیگری در head لینک کنید.

<link rel=&quotstylesheet&quot href=&quot/assets/css/owl.carousel.min.css&quot>
<link rel=&quotstylesheet&quot href=&quot/assets/css/owl.theme.default.css&quot>

و فایل js کپی شده در مرحله بالا را بین بسته شدن تگ body و بسته شدن تگ html کپی کنید.

نکته: این افزونه با jQuery کار خواهد کرد و باید jQuery را به کد اضاف کنیم.

<script src=&quothttps://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js&quot>
<script src=&quot/assets/js/owl.carousel.js&quot>

حال برای ایجاد آیتم هایی که نیاز به نمایش آن دارید از تگ های زیر استفاده کنید.

<div class=&quotowl-carousel owl-theme&quot>
    <div class=&quotitem&quot><h4>1</h4></div>
    <div class=&quotitem&quot><h4>2</h4></div>
    <div class=&quotitem&quot><h4>3</h4></div>
    <div class=&quotitem&quot><h4>4</h4></div>
    <div class=&quotitem&quot><h4>5</h4></div>
    <div class=&quotitem&quot><h4>6</h4></div>
    <div class=&quotitem&quot><h4>7</h4></div>
    <div class=&quotitem&quot><h4>8</h4></div>
    <div class=&quotitem&quot><h4>9</h4></div>
    <div class=&quotitem&quot><h4>10</h4></div>
    <div class=&quotitem&quot><h4>11</h4></div>
    <div class=&quotitem&quot><h4>12</h4></div>
</div>

حال در مرحله آخر برای راه اندازی و دادن آپشن های انتهایی به نوع نمایش آیتم ها باید اسکریپت زیر را به انتهای برنامه خود (زیر دو اسکریپتی که در مرحله بالا به کد لینک کردیم.) اضاف کنید.

    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    })

نکته بسیار مهم: ترتیب اضاف کردن لینک اسکریپت های جاوا اسکریپت مهم است و اگر لینک هارا به ترتیب اضاف نکنید برنامه شما اجرا نخواهد شد و چیزی به شما نمایش نخواهد داد.

و کار به پایان رسید و شما میتوانید نتیجه کار خود را تماشا کنید.