در این پست از پی سی گرام به آموزش استفاده از اسلایدر Owl Carousel در سایت می پردازیم با استفاده از این اسلایدر زیبا شما میتوانید اسلایدشویی داشته باشید که سازگار با موبایل و تاچ می باشد. اکثر سایتهای بزرگ و معروف از این اسلایدر در سایت های خود استفاده میکنند.
آموزش استفاده از اسلایدر Owl Carousel در سایت
برای اینکه بتوانیم در وب سایت خود یک اسلایدر قوی و حرفه ای داشته باشیم بی شک OWl Carousel یک گزینه عالی است. با این اسلایدر شما هم میتوانید تصاویر و هم ویدئوهای خود را بصورت اسلاید به کاربر نمایش دهید.
از دیگر ویژگی های مهم و کلیدی اسلایدر OWL Carousel قابلیت تاچ آن می باشد که باعث میشود که به راحتی در Device های مختلف از جمله گوشی و تبلت قابل نمایش باشد.
در ادامه با آموزش نحوه کار با اسلاید OWL Carousel با شما هستیم.
برای اینکه بتوانیم از این اسلایدر استفاده کنیم ابتدا نیاز هست که فایل ها و پیش نیاز های آن را در صفحه وب خود درج کنیم.
که برای این کار یا میتونیم به سایت owlcarousel2 مراجعه کنیم و فایل های مورد نیاز را دانلود کنیم و یا اینکه میتوانیم از CDN های زیر استفاده کنیم:
افزودن امکان استفاده از اسلایدر OWL Carousel به وب سایت:
|
1 2 3 4 5 6 |
<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 را در فرم خود داشته باشیم. منتها از آنجا که در اکثر سایت های امروزی از بوت استرپ برای رسپانسیو کردن صفحات استفاده میشود در این آموزش با فرض استفاده از بوت استرپ کدهای زیر را برای شما آماده کرده ایم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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> |
و در نهایت تنها چیزی که نیاز داریم این است که یک تابع جاوا اسکریپت به کد خود اضافه کنیم که عمل نمایش اسلاید ها را برای ما انجام دهد.
تابع راه اندازی اسلایدر OWL Carousel
در ادامه این کد را درج کرده ایم و تنظیمات مختلفی را نیز در این تابع بر روی اسلایدر خود اعمال کرده ایم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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 در سایت وردپرسی خودم استفاده کنم؟