Bootstrap EP.4 การใส่ Slide ให้เว็บไซต์สวยงาม
Bootstrap EP.4 การใส่ Slide ให้เว็บไซต์สวยงามในการ
ทำเว็บไซต์นั้นสิ่งที่ขาดไม่ได้คือbanner ผู้พัฒนาเว็บไซต์
อาจคิดหาวิธีทำให้ banner มีลูกเล่น ในคลิปนี้จะเป็นการ
สอนใส่ Slide คลิ๊กดูคลิปวีดีโอได้เลย
Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="" width="100%" > </div> <div class="item"> <img src="" width="100%" > </div> <div class="item"> <img src="" width="100%" > </div> <div class="item"> <img src="" width="100%" > </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> |
