ساخت اسلایدر با بوت استرپ
در این بخش ساخت اسلایدر با بوت استرپ 4 و 3 را همراه با مثال و توضیحات کامل آموزش می دهیم. با ساخت اسلایدر ، کلاس carousel ، قرار دادن caption ، دلیل کار نکردن اسلایدر و غیره.
ساخت اسلایدر
در این بخش از آموزش بوت استرپ از تاپ سایت 98 به سراغ ساخت اسلایدر می رویم.
برای ساخت اسلایدر در بوت استرپ از کلاس carousel استفاده می کنیم.
در زیر کد آماده اسلایدر بوت استرپ را مشاهده می کنید می توانید از آن استفاده نمایید.
کافی است نام و آدرس تصاویر را تغییر دهید.
ایجاد اسلایدشو و ساخت اسلایدر با بوت استرپ
در زیر با ایجاد اسلایدشو و ساخت اسلایدر با بوت استرپ 4 آشنا می شوید.
ما آن را در یک div قرار داده ایم که فقط یک چهارم صفحه را می گیرد.
می توانید 3 تصویر هم سایز را در کنار فایل html قرار دهید و نام آن را با نام تصویر در کد عوض کنید.
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="1.png" alt="Los Angeles" width="400">
</div>
<div class="carousel-item">
<img src="2.png" alt="Chicago" width="400">
</div>
<div class="carousel-item">
<img src="3.png" alt="New York" width="400">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
آموزش کلاس carousel در بوت استرپ
کلاس carousel برای ساخت اسلایدر استفاده می شود.
کلاس carousel-indicators نشان می دهد چند اسلاید در حال اجرا می باشد و کدام یک اکتیو است و کاربر در حال مشاهده آن میباشد.
کلاس carousel-inner برای اضافه کردن اسلاید به carousel بکار می رود.
کلاس carousel-item محتوای هر اسلاید را مشخص می کند.
کلاس carousel-control-prev دکمه ای که در سمت چپ قرار دارد و کاربر را به اسلاید قبلی میبرد.
کلاس carousel-control-next دکمه ای که در سمت راست قرار دارد و کاربر را به اسلاید بعدی می برد.
کلاس carousel-control-prev-icon آیکونی است که برای دیدن اسلاید قبلی کلیک می کنید.
کلاس carousel-control-next-icon آیکونی است که برای دیدن اسلاید بعدی کلیک می کنید.
کلاس slide افکتی است که هنگام جابجا شدن عکس ها مشاهده می کنید که حالت کشویی می باشد و هنگام عوض شدن عکس ها مشاهده میکنید.
قرار دادن caption
برای قرار دادن caption کافی است از کلاس carousel-caption استفاده کنید.
در زیر با نحوه قرار دادن caption (کپشن) آشنا می شوید.
کافی است در زیر تگ img کد زیر را قرار داده و متن را تغییر دهید.
<div class="carousel-item active">
<img src="1.png" alt="Los Angeles" width="400">
<div class="carousel-caption">
<h3>TopSite98</h3>
<p>caption carousel</p>
</div>
</div>
کار نکردن اسلایدر در بوت استرپ
دلایل کار نکردن اسلایدر در بوت استرپ احتمال زیاد مشکل در فراخوانی فایل های بوت استرپ است.
حتما نام و آدرس فایل های js و css بوت استرپ را چک کنید .
دلیل بعدی قرار ندادن فایل جی کوئری در کنار فایل اصلی یا آدرس اشتباه آن است.
امیدواریم این آموزش برای شما مفید باشد.
موفق باشید.
منبع: دبلیو 3 اسکولز
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
-
ناشناس
2022-08-20 11:47:04
با سلام من در فراخوانی فایل های بوت استرپ مشکل دارم. با اینکه لینکش رو توی برنامه ام قرار دادم اما باز کدم اجرا نمیشه. میشه کمکم کنین ؟
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید