تغییر transition اسلایدر از fade به zoom در بوت استرپ

شاید تا حالا این سوال در ذهن شما نقش بسته باشد که چطور می توان transition اسلایدر بوت اسرپ را تغییر داد؟

البته اگر نمی دانید بوت استرپ چیست یا آشنایی کامل با آن ندارید بهتر است ابتدا مقاله بوت استرپ و کاربرد آن به بیانی ساده را مطالعه کنید و سپس به مطالعه ی این مقاله بپردازید.

همانطور که از عنوان مقاله مشخص است ما قصد داریم در این مقاله به تغییر transition اسلایدر از fade به zoom در بوت استراپ بپردازیم،و با ارائه کد مورد نظر این قسمت هرچه سریع تر شمارا به پاسخ مورد نظر خود برسانیم.

اما پیش از توضیح آن باید کمی درمورد اسلایدر خود بوت استرپ توضیح دهیم پس تا پایان مقاله با ما باشید.

ایجاد اسلایدر با بوت استرپ

پیش از یادگیری تغییر transition اسلایدر باید به یادگیری نحوه استفاده اسلایدر در بوت استرپ پرداخت.

ایجاد اسلایدر با بوت استرپ، یکی از پارامتر های جذاب در سایت به حساب می آید، که شما می توانید با روش زیر به ساخت و ایجاد آن اقدام کنید.

برای ساختن اسلایدر در بوت استرپ از کلاس carousel استفاده می شود،در ادامه کد آماده سازی اسلایدر در بوت استرپ آمده شده و شما می توانید با استفاده از آن اسلایدر خود را در کوتاه ترین زمان بسازید.

[php]
<div>
<div id="demo" data-ride="carousel"><!– Indicators –>
<ul>
<li data-target="#demo" data-slide-to="0"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul> <!– The slideshow –>
<div>
<div> <img src="1.png" alt="Los Angeles" width="400"> </div>
<div> <img src="2.png" alt="Chicago" width="400"> </div>
<div> <img src="3.png" alt="New York" width="400"> </div>
</div> <!– Left and right controls –>
<a href="#demo" data-slide="prev">
<span></span>
</a>
<a href="#demo" data-slide="next">
<span></span>
</a>
</div>
</div>
[/php]

 کلاس های carousel برای تغییر transition اسلایدر

1. این کلاس برای ساخت اسلایدر استفاده می شود.
2. کلاس carousel-indicators نشان دهنده چند اسلاید در حال اجرا است و کدام یک فعال می باشد و کاربر در حال مشاهده آن می باشد.
3. کلاس carousel-item محتوای هر اسلاید را تعیین می کند.
4. کلاس carousel-inner برای افزودن اسلاید به carousel استفاده می شود.
5. کلاس carousel-control-prev دکمه ای که در سمت چپ قرار گرفته و کاربر را به اسلاید قبلی میبرد.
6. کلاس carousel-control-next دکمه ای که در سمت راست قرار گرفته و کاربر را به اسلاید بعدی میبرد.
7. کلاس carousel-control-next-icon آیکونی می باشد که برای دیدن اسلاید بعدی روی آن کلیک می کنید.
8. کلاس carousel-control-prev-icon آیکونی می باشد که برای دیدن اسلاید قبلی روی آن کلیک می کنید.

علت کارنکردن تغییر transition اسلایدر در بوت استرپ

یکی از علت های شایع کار نکردن اسلایدر در بوت استرپ به احتمال بسیار در فراخوانی فایل های بوت استرپ می باشد، به همین منظور ابتدا نام و آدرس فایل های js و css بوت استرپ را چک کنید.

دلیل بعدی که می توان گفت قرارندادن فایل jquery در کنار فایل اصلی یا آدرس اشتباه آن می باشد.

همچنین شما با مطالعه این مقاله می توانید نحوه صحیح استفاده از بوت استرپ را بیاموزید.

تغییر transition اسلایدر از fade به zoom

حال به قسمت اصلی ماجرا می رسیم . شرکت آواتم بعد از کلی تحقیق در این زمینه یکی از ساده ترین روش ها برای این مسئله را پیدا کرده و هم اکنون در اختیار شما عزیزان قرار می دهد. با استفاده از کد زیر شما می توانید Transition اسلایدر بوت استرپ را از fade به zoom تغییر دهید.

-webkit-transform: scale(1, 1);
}
to {
-webkit-transform: scale(1.5, 1.5);
}
}

@keyframes zoom {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.5, 1.5);
}
}
.carousel-fade .carousel-item {
opacity: 0;
transition-duration: 2s;
transition-property: opacity;
}
.carousel-fade .carousel-item img {
-webkit-animation: zoom 30s;
animation: zoom 30s;
}

می توانید از کد بالا در فایل css خود استفاده کرده و یک اسلایدر جذاب طراحی کنید.

امید واریم این مقاله برای شما عزیزان مفید واقع شده باشد.