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

دانلود اسلایدر لمسی و ریسپانسیو 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
کلمات کلیدی پست :
مطالب مرتبط
27,142اسکریپت دانلود Vip ایران فیلم تاریخ : 2013/10/30
4,984دانلود اسکریپت جامعه مجازی Flippy FunBox تاریخ : 2014/10/3
6,633اسکریپت سیستم مدیریت محتوای Yellow CMS تاریخ : 2014/11/26
7,507اسکریپت ثبت اعترافات بی نام Fess Up تاریخ : 2015/11/21
7,662دانلود اسکریپت فروشگاهی سایت GraphicRiver.net تاریخ : 2014/03/3
5,058مدیریت آسان افزونه ها در وردپرس تاریخ : 2016/04/21
26,884افزونه فارسی مدیریت زمینه دلخواه وردپرس Advanced Custom Fields Pro نسخه 5.9.3 تاریخ : 2020/11/5
23,860ساخت تور مجازی 360 درجه با اسکریپت 360 Virtual Tour PHP تاریخ : 2016/07/12
6,225اسکریپت آپلود فایل قدرتمند و واکنش گرا Arfaly.js تاریخ : 2015/03/16
10,730اسکریپت آپلود سنتر میهالیسم تاریخ : 2013/10/22
30,322اسکریپت انتقال فایل به سرور به صورت ریموت تاریخ : 2014/05/29
5,672ایجاد وب سایت موسیقی با اسکریپت Music Database تاریخ : 2014/03/27
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات
تبلیغات