یلداطوری تلاش نت - از 17 الی 30 آذر

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

دانلود اسلایدر لمسی و ریسپانسیو Owl Carousel

دانلود اسلایدر لمسی و ریسپانسیو Owl CarouselReviewed by M.J on Jun 6Rating: 5.0دانلود اسلایدر لمسی و ریسپانسیو 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>