Home > ساخت اسلاید شو ساده و زیبا با استفاده از بوت استرپ > css > ساخت اسلاید شو ساده و زیبا با استفاده از بوت استرپ

ساخت اسلاید شو ساده و زیبا

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

آموزش :

خب تو قدم اول باید بوت استرپ و جیکوری رو فراخوانی کنید . به این صورت که این کد هارو بعد از تگ  <head> قرار بدید :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

خب حالا با استفاده از کد html زیر میتونید اسلایدر رو اضافه کنید :

          <div id="myCarousel" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                  </ol>
                <div class="carousel-inner">
                
                    <div class="item active">
                    <a href="http://netscope.ir/?p=399" >
             				<div style="width:100%;background-image: url('http://aydesign.ir/wp-content/uploads/2017/07/php.png');background-size: cover;height: 200px;">
        					</div>
    				</a>
                    </div>

                    <div class="item ">
                    <a href="http://netscope.ir/?p=552" >
    					       <div style="width:100%;background-image: url('http://aydesign.ir/wp-content/uploads/2017/07/50-source.png');background-size: cover;height: 200px;">
    					       </div>
    				</a>
                    </div>

                    <div class="item ">
                    <a href="http://netscope.ir/?p=512" >
    					       <div style="width:100%;background-image: url('http://aydesign.ir/wp-content/uploads/2017/07/instalike.png');background-size: cover;height: 200px;">
    					       </div>
    				</a>
                    </div>

                </div>
					<a class="left carousel-control" href="#myCarousel" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#myCarousel" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right"></span>
						<span class="sr-only">Next</span>
					</a>
        </div>

دقت کنید که اونجا ک من height رو 200 پیکسل دادم اندازه عکس هست و شما باید متناسب با عکس خودتون مقدارشو عوض کنید !

برای افزایش اسلاید ها میتونید div زیر رو بین اسلاید ها کپی کنید و تغییرات لازم رو انجام بدید :

                    <div class="item ">
                    <a href="http://netscope.ir/?p=552" >
    					       <div style="width:100%;background-image: url('http://aydesign.ir/wp-content/uploads/2017/07/50-source.png');background-size: cover;height: 200px;">
    					       </div>
    				        </a>
                    </div>

افزودن نظر

با افتخار قدرت گرفته از وردپرس ~ طراحی شده توسط تیم طراحی نت اسکوپ