تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات

دانلود اسلایدر لمسی و ریسپانسیو Owl Carousel

CSS , اسلایدر , اسکریپت ها

Owl Carousel نام اسلایدر لمسی و فول ریسپانسیو (واکنش گرا) می باشد که شما با استفاده از این اسلاید شو می توانید در سایت خود تصاویر خود را بصورت اسلایدر به کاربران خود نمایش دهید. جهت مشاهده پیش نمایش ، آموزش استفاده و دانلود اسلایدشو با ما باشید.

 

دانلود اسلایدر لمسی و ریسپانسیو Owl Carousel

 

آموزش استفاده از Owl Carousel :

  • ابتدا فایل های زیر را در فایل هدر خود قبل از کد </head> فراخوانی کنید.
    <link href="assets/css/bootstrapTheme.css" rel="stylesheet" />
    <link href="assets/css/custom.css" rel="stylesheet" />
    <link href="owl-carousel/owl.carousel.css" rel="stylesheet" />
    <link href="owl-carousel/owl.theme.css" rel="stylesheet" />
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/application.js"></script>
    <script src="assets/js/jquery-1.9.1.min.js"></script>
    <script src="owl-carousel/owl.carousel.js"></script>
<style>

#owl-demo .item img{
        display: block;
        width: 100%;
        height: auto;
}
</style>
<script>
    $(document).ready(function() {
      $("#owl-demo").owlCarousel({
      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      items : 1,
      itemsDesktop : false,
      itemsDesktopSmall : false,
      itemsTablet: false,
      itemsMobile : false
      });
    });
</script>
  •  سپس در هر جایی از قالب خود که میخواهید کد های زیر رو جهت نمایش اسلایدشو درج کنید.
      <div id="demo">
        <div class="container">
          <div class="row">
            <div class="span12">
              <div id="owl-demo" class="owl-carousel">
 
                <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
                <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
                <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
 
              </div>
            </div>
          </div>
        </div>
    </div>

موفق باشید.

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 4 / 5. تعداد رای : 2

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 4 CSS , اسلایدر , اسکریپت ها
لینک کوتاه مطلب : https://www.20script.ir/?p=12992
کلمات کلیدی پست :
مطالب مرتبط
9,093اسکریپت فایل دایرکتوری Aberrant File Browser تاریخ : 2014/06/26
5,148اسکریپت سیستم پشتیبانی و چت آنلاین Best Support System تاریخ : 2021/10/7
8,771اسکریپت جامعه مجازی پرسش و پاسخ Q2APHP نسخه 4.1 تاریخ : 2014/05/18
11,110افزونه صفحه ساز گرافیکی لایو کامپوسر Live Composer v1.1 تاریخ : 2015/01/10
7,142اسکریپت مدیریت کمپین انتخابات ECMS تاریخ : 2017/06/29
7,548اسکریپت راه اندازی سایت رزرو و مدیریت هتل SeaVuel تاریخ : 2018/03/6
7,516اسکریپت جامعه مجازی دوستیابی Peepmatches تاریخ : 2016/12/7
11,706اسکریپت مدیریت پایگاه داده SQL Buddy تاریخ : 2017/06/28
14,957قالب فروشگاهی Storefront برای وردپرس تاریخ : 2016/03/25
10,777سری اول فایل لایه باز آیکون فلش ها تاریخ : 2013/11/29
10,156اسکریپت سیستم مدیریت مدرسه MinorSchool نسخه 3.2 تاریخ : 2018/05/17
7,282اسکریپت راه اندازی جامعه مجازی SocialStrap نسخه 4.3 تاریخ : 2016/05/31
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
سئو سایت
تبلیغات