Bootstrap Automatic Image Slideshow Effect


➤ CSS and Javascript Include

 

<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 

➤ HTML Code

 

<!-- create a bootstrap card in a container-->
<div class="container">
  <!--Bootstrap card with slider class-->
  <div id="carousel-demo" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item">
        <a href="https://ngeonboran.blogspot.com/2018/06/1239-1247-1249.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTT_O1HDPawFMyrbgm5KYufDzZy7xiJxpkwtOepxiUvYnbCXLSAaUT3ZLy1MF0YuZEvpQGMteLeDtAIriwd93c4LKlhJo669ObeM4FydfjUy_dbusGplcApUM96jDso1572HmSlucZ7Z8/s600/Ads_0018.png" style="cursor:pointer;text-align:center"></a>
      </div>
      <div class="item">
        <a href="https://ngeonboran.blogspot.com/2018/08/1.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdWn7AjNJGjmj-tpAg7LIfUheRkEA2cv7XFt_SREtEzZ39TuxFMXFsnTZtec5JLUj2eKoX1K5WFwwZAcRzd761M1aHYWsns_XwYExbZOAdBxLJjO1R4yPNjma6yFY52jPP-ydv3d9yI9WC/s600/Ads_0016_2.png" style="cursor:pointer;"></a>
      </div>
      <div class="item active">
        <a href="https://ngeonboran.blogspot.com/2015/03/1-5-127.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTXs14nPOEn_OYL2Jg9Qg62tem_Z4sXzEMdetmKK6NgdeNOEo7zLbPgDfdeA2GDND4d_tHw5Vn6q6PvKvg_2Q4yAX0oCdNmSuSO99rBAPpYHTIPAfpMzWbaNT5nB0NyKU-7T7JhrKJ9-Qk/s600/Ads_0017_4.png" style="cursor:pointer;"></a>
      </div>
    </div>

    <!--slider control for card-->
    <a class="left carousel-control"
       href="#carousel-demo"
       data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left">
      </span>
    </a>
    <a class="right carousel-control"
       href="#carousel-demo"
       data-slide="next">
      <span class="glyphicon glyphicon-chevron-right">
      </span>
    </a>
  </div>
</div>

ความคิดเห็น

แสดงความคิดเห็น

Popular Source Code ▼

HTML Code Arrow Symbols

รูปภาพ
รวมโค้ดรหัสสัญลักษณ์ลูกศรชี้ซ้าย ลูกศรชี้ขวา ลูกศรชี้ขึ้น และลูกศรชี้ลง Html Arrow Symbols Code สามารถทำไปใช้ร่วมกับหน้า HTML ได้เลย โดยไม่ต้องเสียเวลาออกแบบหรือ Import Image เข้ามา ไม่หนักเครื่อง เพิ่มความเร็ว ไม่เปลืองพื้นที่ ไม่โหลดหนักและประหยัดอินเตอร์เน็ต ซึ่ง codeboc โดยระบุรูปสัญลักษณ์ลูกศร Html Code และชื่อลูกศร เรียงจากซ้ายไปขวา ได้ดังนี้ ➤ ลูกศรขวา - HTML Right Arrows Code → &#8594; ลูกศรชี้ขวา ➔ &#10132; ลูกศรขวาหัวกว้างหนา ➜ &#10140; ลูกศรขวาหัวรูปสามเหลี่ยมหัวมน ➝ &#10141; ลูกศรขวาหัวรูปสามเหลี่ยม ➞ &#10142; ลูกศรขวาหัวรูปสามเหลี่ยมหนา ➟ &#10143; ลูกศรขวาหัวรูปสามเหลี่ยมเส้นปะหนา ➢ &#10146; ลูกศรขวาหัวรูปสามเหลี่ยม 3D ทึบล่าง ➣ &#10147; ลูกศรขวาหัวรูปสามเหลี่ยม 3D ทึบบน ➤ &#10148; ลูกศรขวาหัวรูปสามเหลี่ยม 3D ทึบ ➦ &#10150; ลูกศรโค้งสีดำหนักขึ้นไปและลูกศรขวา ⥤ &#10596; ลูกศรขวาฉมวกแบบเข็มขึ้นและเข็มลง ➩ &#10153; ลูกศรขวาสีขาวแรเงา ➪ &#10154; ลูกศรขวาสีขาวแรเงาด้านซ้าย ᐳ &#5171; ลูกศรขวาเครื่องหมายมากกว่
Source Code »

Limit Length Text CSS HTML

รูปภาพ
การเขียน โค้ด Html กําหนดจํานวนตัวอักษร  ค่อนข้างใช้บ่อยและพบเห็นได้ในหน้าแรกหรือหน้าแสดงสินค้า ซึ่งเราสามารถเขียน Cascading Style Sheets (CSS) ให้ จํากัดตัวอักษร Html แสดงแบบ 1 บรรทัด 2 บรรทัด 3 บรรทัด หรือที่ตามต้องการได้ โดยการเขียน CSS ประกาศไว้ แล้วเรียกใช้งานผ่าน Class เช่น Class="textLimit" (ตามตัวอย่างด้านล่าง) เป็นต้น เท่านี้ก็สามารถ จำกัดตัวอักษร ให้แสดงบนหน้าเว็บได้แล้วครับ ➤   CSS  ( Cascading Style Sheets)  <style>   . textLimit   { overflow : hidden ; text - oveflow : ellipsis ; display : - webkit - box ; line - height : 16px ; /* ขนาดความสูงตัวอักษร 1 บรรทัด */ max - height : 32px ; /* ขนาดความสูงตัวอักษร 2 บรรทัด*/ - webkit - line - clamp : 2 ; /* จำนวนบรรทัดที่แสดง 2 บรรทัด */ - webkit - box - orient : vertical ; } </style> ➤ HTML Code <div class="textLimit" > Upin Sale Online Shopping อูพิน เซลล์ ออนไลน์ ช้อปปิ้ง ส่งฟรี ทั่วไทย /* ให้ตัดตัวอักษรและแสดงเพียง 2 บรรทัด*/ </div>
Source Code »

Javascript Countdown Timer

รูปภาพ
โค้ด Html CSS Javascript Countdown  นับถอยหลัง  การจับเวลานับถอยหลัง ในที่นี้จะคำนวณแบบ นับเวลาถอยหลัง โดยกำหนดค่าได้เป็นจำนวนวัน จำนวนชั่วโมง จำนวนนาที จำนวนวินาที (เหมือนตัวอย่างข้างบน) สามารถเขียนตาม ตัวอย่างโค้ด HTML ได้ดังนี้ ➤ CSS (Cascading Style Sheets)  <style>   .divStyle {     background-color:#ddd;     padding:10;     text-align: center;     font-size: 20px;   } </style> ➤ HTML Code <div class="divStyle">   <h2>นับถอยหลังวัน ชั่วโมง นาที วินาที<h/2>   <!-- แสดงข้อความเวลา-->   <p id="countDown"></p> </div> ➤ Javascript Code <script>   /*// เพิ่มจำนวนวัน add days       var d = new Date();       d.setDate(d.getDate() + 1);*/   // เพิ่มจำนวนชั่วโมง add hours   var param = new Date();   param.setHours(24);   /*// เพิ่มจำนวนนาที add minutes       var param = new Date();       param.setMinutes(30);*/   /*// เพิ่มจำนวนวินาที add seconds       var param = new Date();       param.setSeco
Source Code »