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

تبلیغات
تبلیغات تبلیغات

دانلود اسلایدر لمسی و ریسپانسیو 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>

موفق باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
ثبت نام در بروکر فارکس با قابلیت واریز و برداشت به صورت ریالی کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 4 CSS , اسلایدر , اسکریپت ها
لینک کوتاه مطلب : https://www.20script.ir/?p=12992
کلمات کلیدی پست :
مطالب مرتبط
9,493اسکریپت افزایش ادد لیست یاهو نسخه 3 تاریخ : 2015/02/14
12,057اسکریپت ایجاد وب سایت املاک حرفه ای با Realcon تاریخ : 2014/09/7
8,856اسکریپت ایجاد بازار خرید و فروش خودرو Carbiz تاریخ : 2018/06/22
6,444راه اندازی سایت بازی آنلاین با AV Arcade Pro نسخه 5.5.1 تاریخ : 2014/07/16
15,801دانلود قالب سایت شخصی کبیر به صورت HTML تاریخ : 2016/06/11
26,558اسکریپت حرفه ای مدیریت پروژه RISE نسخه 2.6 تاریخ : 2020/11/7
9,836دانلود اسکریپت جامعه مجازی Crea8social نسخه 4.2.2 تاریخ : 2015/06/16
8,435نوار چسبنده Sidebar برای وردپرس تاریخ : 2014/02/18
14,986قالب متریال مدیریت وب سایت Admin.io به صورت HTML تاریخ : 2016/10/5
7,721اسکریپت ابزار سئو پیشرفته Turbo SEO Analyzer نسخه 1.4 تاریخ : 2014/10/1
6,440اشتراک گذاری سریع و امن فایل ها با اسکریپت ZipFileMe تاریخ : 2019/01/22
7,328اسکریپت برچسب ساز گوگل تاریخ : 2020/06/24
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
شرکت سئو سایت
تبلیغات
تبلیغات
تبلیغات