ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: kunnarakkup ที่ 18 มกราคม 2017, 12:00:56


หัวข้อ: ช่วยดู code slide หน่อยครับ จาก boostrap
เริ่มหัวข้อโดย: kunnarakkup ที่ 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;
}


กำลังทำแบบนี้อะครับ
(https://www.mx7.com/i/b93/QYEBdk.jpg) (https://www.mx7.com/view2/zCpiwJ7WOrqHAJDV)

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

(https://www.mx7.com/i/d34/ETFgYz.jpg) (https://www.mx7.com/view2/zCpiwJ7WOGCZ2cIp)

หัวข้อ: Re: ช่วยดู code slide หน่อยครับ จาก boostrap
เริ่มหัวข้อโดย: ten1312 ที่ 18 มกราคม 2017, 15:14:17
ยังไงครับ ต้องการอะไรเพิ่มเหรอ

หัวข้อ: Re: ช่วยดู code slide หน่อยครับ จาก boostrap
เริ่มหัวข้อโดย: kunnarakkup ที่ 18 มกราคม 2017, 15:50:16
อ้างจาก: ten1312 ที่ 18 มกราคม 2017, 15:14:17
ยังไงครับ ต้องการอะไรเพิ่มเหรอ


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

แต่ตอนนี้ได้แล้วครับ ใช้ 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>

(https://www.mx7.com/i/b93/QYEBdk.jpg) (https://www.mx7.com/view2/zCpiwJ7WOrqHAJDV)

หัวข้อ: Re: ช่วยดู code slide หน่อยครับ จาก boostrap
เริ่มหัวข้อโดย: 9_MkunG ที่ 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> มันครอบรูปอยู่นี่ครับ

หัวข้อ: Re: ช่วยดู code slide หน่อยครับ จาก boostrap
เริ่มหัวข้อโดย: ten1312 ที่ 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>

หัวข้อ: Re: ช่วยดู code slide หน่อยครับ จาก boostrap
เริ่มหัวข้อโดย: nociouz ที่ 18 มกราคม 2017, 20:48:49
โค๊ด:
https://jsfiddle.net/
เถอะครับ

หัวข้อ: Re: ช่วยดู code slide หน่อยครับ จาก boostrap
เริ่มหัวข้อโดย: kunnarakkup ที่ 18 มกราคม 2017, 21:12:07
อ้างจาก: nociouz ที่ 18 มกราคม 2017, 20:48:49
โค๊ด:
https://jsfiddle.net/
เถอะครับ


ขอบคุณครับ  ^^


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com