ijquery

اسلاید شو لمسی و ریسپانسیو

screenshot

با استفاده از این پلاگین می توانید در سایتتان یک اسلاید شو تمام لمسی و ریسپانسیو داشته باشید

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

    <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>

2-  کد html جهت استفاده پلاگین

      <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> 
    <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>

 


پیش نمایش دانلود فایل پلاگین

20 دیدگاه دربارهٔ «اسلاید شو لمسی و ریسپانسیو»

  1. با سلام دورد ویژه به شما :
    میخواستم عرض کنم میشه کدهایی بزارید که بتونیم برای ابزارک باشند یعنی کدها رو توی قسمت ابزارک دلخواه اون جا بزاریم ممنون از شما و سایت خوبتون

    1. سلام خیلی ممنون از نظرت اما باید بگم که سایت ما روی جی کوئری فعالیت داره نه روی وردپرس اما در سایت دنیای وردپرس که به زودی راه اندازی میشه قرار داده میشه درخواست های وردپرس

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

    1. سلام نیما جان شما اول بایدمقدار autoPlay:true, رو به $(“#owl-demo”).owlCarousel اضافه کنی تو فایل html که اول اسلاید اتوماتیک بشه بعد بیای زمان بندی کنی که چقدر طول بکشه عوض شه

  3. نیما جان شما فایل index.html رو باز کن و کد navigation : true, رو پیدا کن بعدش کد زیر رو اضافه کن :
    autoPlay:true,

  4. بازتاب: استفاده از اسلایدشو | هاست رایگان | خرید هاست | هاست ارزون | فروش هاست

  5. سلام
    ممنون بابت سایت خیلی خوبتون
    این دکمه های کنترلی رو چطوری میتونم بردارم
    یعنی اون نقطه ها + اون دکمه ی قبلی و بعدی رو ؟؟

  6. سلام
    من برای یک سایت میخوام از این اسلایدر استفاده کنم ولی میخوام که عرضش 100% صفحه رو پوشش بده، برای این کار کجا رو باید ادیت کنم؟

  7. با عرض سلام و خسته نباشید .

    من همه کار ها رو کامل انجام دادم ولی به شکل عجیبی عکس ها لود نمیشه !!! لطفاً راهنمایی کنید . با تشکر ویژه .

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *