خرید هاست ارزان ایران / آلمان

متنوع ترین سرویس های هاستینگ با CPANEL افزودن دامنه - ایمیل - mysql نامحدود پرداخت بصورت ماهانه / سه ماهه / شش ماهه / سالانه SSL رایگان حتی برای دامنه های IR راه اندازی آنی پشتیبانی 24 ساعته ، یکماه ضمانت بازگشت وجه امکان استفاده از شتابدهنده و پکیج تضمین امنیت وردپرس مشاوره آنلاین روی سایت | 02154109999 | talashnet.com

اپلیکیشن ساز آنلاین اپتو

ساخت اپلیکیشن بدون کدنویسی دریافت خروجی برای اندروید و آی او اس امکان ساخت اپلکیشن فروشگاهی، خبری، آموزشی، وردپرس، ووکامرس، موزیک و....تلفن تماس و پشتیبانی 03136626049 از ساعت 10 الی 17 خودت اپتو بساز و.. ..

آموزش جامع و رایگان وردپرس

آموزش افزونه و قالب های کاربردی دسترسی به تمامی محصولات با خرید اشتراک ویژه پرداخت به صورت ماهانه / یک ماهه / دوماهه / سه ماهه تهیه محصولات درخواستی مشتری پشتیبانی حتی در روزهای تعطیل / ضمانت بازگشت وجه مشاوره آنلاین روی سایت و...

کابین وب

100 قالب وردپرس کاملا اورجینال و فارسی همراه با بسته نصبی + آپدیت و پشتیبانی مادام العمر 75 افزونه پرکاربرد و پرفروش تماما فارسی و اورجینال با 99 درصد تخفیف ویژه برای کاربران قالب های 100 هزارتومانی را 1000 تومان خرید کنید . .

خانه » اسکریپت ها » CSS » دانلود اسلایدر لمسی و ریسپانسیو Owl Carousel

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

<style>

#owl-demo .item img{

display: block;

width: 100%;

height: auto;

}

</style>

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