آموزش استفاده از اسلایدر Owl Carousel در سایت

حجت میرزائی آموزش طراحی سایت ۱ نظر 4,506 بازدید

در این پست از پی سی گرام به آموزش استفاده از اسلایدر Owl Carousel در سایت می پردازیم با استفاده از این اسلایدر زیبا شما میتوانید اسلایدشویی داشته باشید که سازگار با موبایل و تاچ می باشد. اکثر سایتهای بزرگ و معروف از این اسلایدر در سایت های خود استفاده میکنند.

آموزش استفاده از اسلایدر Owl Carousel در سایت

برای اینکه بتوانیم در وب سایت خود یک اسلایدر قوی و حرفه ای داشته باشیم بی شک OWl Carousel یک گزینه عالی است. با این اسلایدر شما هم میتوانید تصاویر و هم ویدئوهای خود را بصورت اسلاید به کاربر نمایش دهید.

از دیگر ویژگی های مهم و کلیدی اسلایدر OWL Carousel قابلیت تاچ آن می باشد که باعث میشود که به راحتی در Device های مختلف از جمله گوشی و تبلت قابل نمایش باشد.

در ادامه با آموزش نحوه کار با اسلاید OWL Carousel با شما هستیم.

برای اینکه بتوانیم از این اسلایدر استفاده کنیم ابتدا نیاز هست که فایل ها و پیش نیاز های آن را در صفحه وب خود درج کنیم.

که برای این کار یا میتونیم به سایت owlcarousel2 مراجعه کنیم و فایل های مورد نیاز را دانلود کنیم و یا اینکه میتوانیم از CDN های زیر استفاده کنیم:

افزودن امکان استفاده از اسلایدر OWL Carousel به وب سایت:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.theme.default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.theme.green.min.css" />
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/owl.carousel.min.js"></script>

با درج کدهای بالا در تگ Head خود میتوانید استایل های css و کدهای جاوااسکریپت مورد نیاز افزونه OWL Carousel را به صفحه سایت خود اضافه کنید.

موردهای دوم و سوم یعنی owl.theme.default.min.css و همچنین owl.theme.green.min.css” اختیاری هستند.

و در صورت استفاده نکردن از این دو مورد هم اسلایدر شما بدون مشکل نمایش داده خواهد شد.

افزودن اسلایدر با OWL Carousel به وب سایت

حال در ادامه میخواهیم که یک اسلایدر ساده را ایجاد کنیم. برای این کار میتوانید کدهای زیر را در تگ Body خود قرار دهید:

در واقع باید یک المان با کلاس owl-carousel را در فرم خود داشته باشیم. منتها از آنجا که در اکثر سایت های امروزی از بوت استرپ برای رسپانسیو کردن صفحات استفاده میشود در این آموزش با فرض استفاده از بوت استرپ کدهای زیر را برای شما آماده کرده ایم:

 <div class="container-fluid">
        <section id="demos">
            <div class="row">
                <div class="col-lg-12">
                    <div class="owl-carousel owl-theme" style="display:block !important;overflow-x: hidden">
                        <div class="item">
                            <h4>
                                <img class="img-responsive"   src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york">
                            </h4>
                        </div>
                        <div class="item">
                            <h4>
                                <img class="img-responsive"   src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago">
                            </h4>
                        </div>
                        <div class="item">
                            <h4>
                                <img class="img-responsive"   src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles">
                            </h4>
                        </div>

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

<h4>

</h4>

</div>

<h4>

</h4>

</div>

<h4>

</h4>

</div>

</section>

</div>

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

تابع راه اندازی اسلایدر OWL Carousel

در ادامه این کد را درج کرده ایم و تنظیمات مختلفی را نیز در این تابع بر روی اسلایدر خود اعمال کرده ایم:

                    <script type="text/javascript">
                        $('.owl-carousel').owlCarousel({
                            loop: true,
                            margin: 0,
                            nav: true,
                            center: true,
                            autoplay: true,
                            autoplayTimeout: 3000,
                            autoplayHoverPause: true,
                            responsive: {
                                0: {
                                    items: 1
                                },
                                600: {
                                    items: 1
                                },
                                1000: {
                                    items: 1
                                }
                            }
                        })         </script>

$('.owl-carousel').owlCarousel({

loop: true,

margin: 0,

nav: true,

center: true,

autoplay: true,

autoplayTimeout: 3000,

autoplayHoverPause: true,

responsive: {

0: {

items: 1

600: {

items: 1

1000: {

items: 1

}

}) </script>

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

پی سی گرام: مرجع تخصصی آموزش نرم افزار آموزش کار با نرم افزار | آموزش ویدویی نرم افزارهای مختلف را در پی سی گرام دنبال کنید.

آموزش استفاده از اسلایدر Owl Carousel در سایت

آموزش استفاده از اسلایدر Owl Carousel در سایت

در ادامه با آموزش نحوه کار با اسلاید OWL Carousel با شما هستیم.

افزودن امکان استفاده از اسلایدر OWL Carousel به وب سایت:

افزودن اسلایدر با OWL Carousel به وب سایت

تابع راه اندازی اسلایدر OWL Carousel

درباره حجت میرزائی

یک دیدگاه

دیدگاهتان را بنویسید لغو پاسخ