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





وینگو مارکت
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات تبلیغات

دانلود اسلایدر لمسی و ریسپانسیو 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 / 5. تعداد رای : 4

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 4 CSS , اسلایدر , اسکریپت ها
لینک کوتاه مطلب : https://www.20script.ir/?p=12992
کلمات کلیدی پست :
مطالب مرتبط
44,587اسکریپت سیستم مدیریت انبارداری Invento نسخه 2.0 تاریخ : 2016/01/21
11,432اسکریپت مدیریت پروژه Freelance Cockpit 2 نسخه 2.4.2 تاریخ : 2016/07/13
14,281اسکریپت مدیریت محتوای چندمنظوره Contao تاریخ : 2017/10/24
22,471اسکریپت دریافت ping سایت به صورت آنلاین تاریخ : 2014/06/4
34,109اسکریپت کوتاه کننده لینک و نمایش تبلیغات URL Shortener نسخه 1.8.8 تاریخ : 2018/10/11
15,253اسکریپت آواتار ساز Face Builder نسخه 1.0.4 تاریخ : 2016/06/2
14,127قالب نقد و بررسی آنلاین aReview قالب وردپرس تاریخ : 2016/03/25
13,843اسکریپت مدیریت فایل ها از طریق FTP با Monsta FTP نسخه 1.7 تاریخ : 2016/01/28
63,057اسکریپت جامعه مجازی phpfox تاریخ : 2013/10/24
2,596اسکریپت ایجاد QR کد برای منوی رستوران QR Menu Maker تاریخ : 2025/04/14
11,932قالب وردپرس مجله خبری هات تاپیکس Hot Topix تاریخ : 2016/08/27
18,848اسکریپت مدیریت هاستینگ و فروش دامنه Complete register domain and billing تاریخ : 2017/09/22
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب