ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingช่วยดู code slide หน่อยครับ จาก boostrap
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ช่วยดู code slide หน่อยครับ จาก boostrap  (อ่าน 595 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
kunnarakkup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 886



ดูรายละเอียด
« เมื่อ: 18 มกราคม 2017, 12:00:56 »

ช่วยดู code slide หน่อยครับ จาก boostrap


html
โค๊ด:
<div class="container">
    <div class="row">
<div class="col-md-12">
                <div id="Carousel" class="carousel slide">
                
                <ol class="carousel-indicators">
                    <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#Carousel" data-slide-to="1"></li>
                    <li data-target="#Carousel" data-slide-to="2"></li>
                </ol>
                
                <!-- Carousel items -->
                <div class="carousel-inner">
                    
                <div class="item active">
                 <div class="row">
                  <div class="col-md-3 "><img src="img/1.jpg" class="thumbnail"alt="Image" style="max-width:100%;">
                      xxxxxxxxx
                      </div>
                  <div class="col-md-3"><img src="img/6.jpg" alt="Image" style="max-width:100%;"></div>
                  <div class="col-md-3"><img src="img/7.jpg" alt="Image" style="max-width:100%;"></div>
                  <div class="col-md-3"><img src="img/img-product.jpg" alt="Image" style="max-width:100%;"></div>
                 </div><!--.row-->
                </div><!--.item-->
                
                <div class="item">
                 <div class="row">
                 <div class="col-md-3"><img src="img/1.jpg" alt="Image" style="max-width:100%;"></div>
                 <div class="col-md-3"><img src="img/6.jpg" alt="Image" style="max-width:100%;"></div>
                 <div class="col-md-3"><img src="img/7.jpg" alt="Image" style="max-width:100%;"></div>
                 <div class="col-md-3"><img src="img/img-product.jpg" alt="Image" style="max-width:100%;"></div>
                 </div><!--.row-->
                </div><!--.item-->
                
                <div class="item">
                 <div class="row">
                 <div class="col-md-3"><img src="img/1.jpg" alt="Image" style="max-width:100%;"></div>
                 <div class="col-md-3"><img src="img/6.jpg" alt="Image" style="max-width:100%;"></div>
                 <div class="col-md-3"><img src="img/7.jpg" alt="Image" style="max-width:100%;"></div>
                 <div class="col-md-3"><img src="img/img-product.jpg" alt="Image" style="max-width:100%;"></div>
                 </div><!--.row-->
                </div><!--.item-->
                

                
</div>
</div>
</div><!--.container-->




css

โค๊ด:
/* The indicators */
.carousel-indicators {
right: 50%;
top: auto;
bottom: -50px;
margin-right: -19px;
}
/* The colour of the indicators */
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}


กำลังทำแบบนี้อะครับ


ตอนนี้ได้แบบนี้ครับ

« แก้ไขครั้งสุดท้าย: 18 มกราคม 2017, 12:02:13 โดย kunnarakkup » บันทึกการเข้า
ten1312
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 67
ออฟไลน์ ออฟไลน์

กระทู้: 1,486



ดูรายละเอียด
« ตอบ #1 เมื่อ: 18 มกราคม 2017, 15:14:17 »

ยังไงครับ ต้องการอะไรเพิ่มเหรอ
« แก้ไขครั้งสุดท้าย: 18 มกราคม 2017, 15:18:39 โดย ten1312 » บันทึกการเข้า

บันทึกการเรียนเขียน Program
Java :2 พย. 2559 - 19 พย. 2559 หยุดไว้ก่อน
PHP SQL HTML CSS Bootstrap : 25 พย. 2559 - ปัจจุบัน
Javascript jQuery Ajax Angular JS : เรียนผ่านๆยังไม่จริงจัง

นานาเกษตร
kunnarakkup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 886



ดูรายละเอียด
« ตอบ #2 เมื่อ: 18 มกราคม 2017, 15:50:16 »

ยังไงครับ ต้องการอะไรเพิ่มเหรอ


ผมจะทำให้ข้อความอยู่ข้างในกรอบขาวอะครับ จากภาพของผมมันอยู่นอกกรอบขาว

แต่ตอนนี้ได้แล้วครับ ใช้ a ครอบ ข้อความอะครับ แต่ยังไม่ค่อยถูกใจมันกลายเป็น คลิกตรงใหนก็เป็นลิงค์อะครับ จริงๆ จะให้ข้อความเป็นลิงค์
โค๊ด:
<div class="col-md-3">
                      <a href="#" class="thumbnail">
                      <img src="img/pic-update/ยางพาราตกต่ำ.jpg" alt="Image" style="max-width:100%;">
                     กนย.ออก 4 แนวทางดูแลราคายางพารา</p>
                      <p class="text-right" style="padding-top:10px">อ่านเพิ่มเติม</p>
                      </a></div>

« แก้ไขครั้งสุดท้าย: 18 มกราคม 2017, 15:52:45 โดย kunnarakkup » บันทึกการเข้า
9_MkunG
ก๊วนเสียว
*

พลังน้ำใจ: 21
ออฟไลน์ ออฟไลน์

กระทู้: 268



ดูรายละเอียด
« ตอบ #3 เมื่อ: 18 มกราคม 2017, 16:14:54 »

อ้างถึง
<div class="col-md-3">
                      <a href="#" class="thumbnail">
                      <img src="img/pic-update/ยางพาราตกต่ำ.jpg" alt="Image" style="max-width:100%;">
                     กนย.ออก 4 แนวทางดูแลราคายางพารา</p> p นี้ ก็ปิดอย่างเดียว ไม่มีเปิด tag นะครับ
                      <p class="text-right" style="padding-top:10px">อ่านเพิ่มเติม</p>
                      </a></div>

<a></a> มันครอบรูปอยู่นี่ครับ
บันทึกการเข้า

ten1312
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 67
ออฟไลน์ ออฟไลน์

กระทู้: 1,486



ดูรายละเอียด
« ตอบ #4 เมื่อ: 18 มกราคม 2017, 16:15:32 »

ลองดูครับ เอา div class thumbnail ครอบทั้งหมดน่าจะได้

โค๊ด:
<div class="col-md-3">
           <div  class="thumbnail">                     
                      <img src="img/pic-update/ยางพาราตกต่ำ.jpg" alt="Image" style="max-width:100%;">
                     กนย.ออก 4 แนวทางดูแลราคายางพารา</p>
                      <a href="#"><p class="text-right" style="padding-top:10px">อ่านเพิ่มเติม</p>
                      </a>
           </div>
บันทึกการเข้า

บันทึกการเรียนเขียน Program
Java :2 พย. 2559 - 19 พย. 2559 หยุดไว้ก่อน
PHP SQL HTML CSS Bootstrap : 25 พย. 2559 - ปัจจุบัน
Javascript jQuery Ajax Angular JS : เรียนผ่านๆยังไม่จริงจัง

นานาเกษตร
nociouz
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 200
ออฟไลน์ ออฟไลน์

กระทู้: 2,021



ดูรายละเอียด
« ตอบ #5 เมื่อ: 18 มกราคม 2017, 20:48:49 »

โค๊ด:
https://jsfiddle.net/
เถอะครับ
บันทึกการเข้า
kunnarakkup
สมุนแก๊งเสียว
*

พลังน้ำใจ: 3
ออฟไลน์ ออฟไลน์

กระทู้: 886



ดูรายละเอียด
« ตอบ #6 เมื่อ: 18 มกราคม 2017, 21:12:07 »

โค๊ด:
https://jsfiddle.net/
เถอะครับ


ขอบคุณครับ  ^^
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์