آخرین ارسالی های انجمن
عنوان | پاسخ | بازدید | توسط |
تکذیب حمله سایبری درباره اختلال اخیر اینترنت | 0 | 45 | admin |
بهترین بازی های اندروید، لیست 158 بازی جدید و نصب آنها | 0 | 152 | admin |
بهترین ترفند های جالب و مخفی اندروید که باید بدانید و استفاده کنید | 0 | 415 | admin |
سیستم عامل ویندوز فون چیست ؟ | 0 | 583 | admin |
گزینه های خرید تبلت 4G ساپورت – زیر یک میلیون تومان | 0 | 1141 | admin |
آشنایی با HyperOS – پلتفرم جدید شیائومی برای یکپارچه کردن دیوایسهای شرکت | 0 | 1058 | admin |
ابزار نمایش شعر تصادفی از شاعران برای وبلاگ و سایت | 0 | 783 | admin |
قفل کردن انتخاب متن | 0 | 614 | admin |
تمام ویژگی های CSS و کاربرد آن ها | 0 | 860 | admin |
چگونه سئو کار شویم؟ | 0 | 748 | admin |
آموزش اجرای نرم افزارهای اندروید در ویندوز | 0 | 628 | admin |
بهترین ترفندهای اندروید ۱۳؛ قابلیتهایی که نیاز دارید! | 0 | 872 | admin |
دوره آموزش طراحی سایت | 0 | 1044 | admin |
طرز تهیه سیب زمینی ساده | 0 | 1153 | admin |
۲۵ ترفند مخفی ویندوز ۱۱ که باید از آن استفاده کنیم | 0 | 783 | admin |
آرشیو اسکریپت سایت ها , اسلایدر ,
82 بازدید

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 طراحی وب مدیریت دسکتاپ پی دی اف البوم تلگرام برنامه قالب های وردپرس ابزار وبلاگ و سایت بازیهای اندروید اس ام اس متن و اشعار عاشقانه گود دانلود چت هاستينگ سریال اخبار ورزشی انیمیشن ایمیل آنتی ویروس
چی شد که سر از گود دانلود درآوردی؟
نظرات ارسال شده