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

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

کابین وب

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

فروشگاه بید اول با حراجی های شگفت انگیز

متنوع ترین کالاها با تخفیفات باورنکردنی تمامی کالاها آکبند، با گارانتی معتبر گوشی موبایل،لپ تاپ،PS4 و ... 50درصد تخفیف برای خرید هیجانی کالاها ارسال فوری به تمامی نقاط کشور و.. . .

دوره جامع آموزش پشتیبانی وب سایت

اگر سایت وردپرسی دارید این دوره به شما کمک می کند تا : کلیه خطاهای وردپرس را بشناسید و حل کنید. سایت خود را از نظر امنیتی افزایش دهید تا هک نشود. اگر سایت شما هک شده با این آموزشها می توانید مشکلات آنرا حل کنید. قالبهای حرفه ای و افزونه های جدید را آموزش ببینید. سرعت وب سایت خود را افزایش دهید. مشاوره قبل از خرید : ۰۹۱۹۰۲۸۲۹۵۱ موسوی (مدرس دوره) .

خانه » اسکریپت ها » 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>