آخرین ارسالی های انجمن
عنوان | پاسخ | بازدید | توسط |
خاستگاه شعر در ادبیات فارسی | 0 | 3 | admin |
بهترین رستوران های هنری دنیا در سال 2023 | 0 | 7 | admin |
بیوگرافی ، زندگینامه مستر بین ( Mr. Bean ) | 0 | 9 | admin |
داستان های تاثیرگذار، داستان های آموزنده | 0 | 7 | admin |
پیامک و جوک های خنده دار و جالب | 0 | 11 | admin |
بیوگرافی محسن تنابنده و همسرش | 0 | 10 | admin |
فوتبالیست های ثروتمند ایرانی و خارجی | از علی دایی تا نیمار | 0 | 17 | admin |
عکس های بمب خنده؛ داغ و جدید 2022 | 0 | 16 | admin |
تصاویری دیدنی از بازیگران ایرانی و همسرانشان | 0 | 13 | admin |
عکس های دیدنی | 0 | 16 | admin |
جدیدترین عکس های بازیگران زن ترکیه | 0 | 15 | admin |
۱۰ اپلیکیشن برتر برای متحرک کردن عکس در اندروید و آیفون | 0 | 16 | admin |
طرح کلیپ آرت دوچرخه قدیمی | 0 | 26 | admin |
عکس نوشته با متن مذهبی | 0 | 27 | admin |
عکس ماشین اسپرت ایرانی خفن و جدید | 0 | 25 | admin |
آرشیو اسکریپت سایت ها , اسلایدر ,
18 بازدید

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>
موفق باشید.
دانلود
- دانلودحجم 587 کیلوبایت

برچسب ها Owl CarouselResponsiveآموزش استفاده از Owl Carouselاسلاید شو ریسپانسیواسلاید شو لمسیاسلایدر responsiveاسلایدر عکساسلایدر واکنش گرااسلایدشو لمسیاسلایدشو واکنش گرااسکریپتافزونه Owl Carouselدانلود اسلایدرریسپانسیو
ارسال نظر
ممکن است به این موارد نیز علاقه مند باشید:

ajax free HTML iPad php HTC script Samsung iPhone دانلود عکس اهنگ بازی اندروید دانلود اهنگ فیلمدانلود برنامه انتی ویروس نرم افزار ویرایش عکس اپارات رایگان سایت مرورگر برنامه کاربردی سیستم عامل ویندوز قالب html طراحی وب مدیریت دسکتاپ پی دی اف البوم تلگرام برنامه قالب های وردپرس ابزار وبلاگ و سایت بازیهای اندروید اس ام اس متن و اشعار عاشقانه گود دانلود چت هاستينگ سریال اخبار ورزشی انیمیشن ایمیل آنتی ویروس
نظرات ارسال شده