ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้

รบกวนอีกนิดนะครับอย่าหาว่าโง่เลย

ถาม-ตอบ แนะนำไอเดีย โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา รบกวนอีกนิดนะครับอย่าหาว่าโง่เลย

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

รบกวนอีกนิดนะครับอย่าหาว่าโง่เลย

http://tympanus.net/Development/ParallaxContentSlider/
โหลด DEMO มาแลล้วแต่เอาไปใช้ไม่เป็นอะครับ คือผมจะแปลงรูปใหม่ ให้เอามาใสในตัวเว็บที่ผมมีอยู่แล้วนี้ทำไงครับ

Inwdesign 05-03-2015 21:58:15

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ตัวนี้ต้องอาศัยความเข้าใจใน css ถึงจะปรับแต่งได้ตามต้องการ วิธีใช้ก็ตามที่ไฟล์ตัวอย่างที่ดาวน์โหลดมาเลย
หรือจะเข้าไปดูทีหน้านี้ก็ได้

http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/

Some headline

Some description

Some headline

Some description

คงต้องลองทำตามดู ไม่เคยใช้เหมือนกัน

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://tympanus.net/Development/ParallaxContentSlider/css/style2.css">
    <script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script>
</head>
<body>

  
<div style="margin:auto;width:700px;height:400px;"> 
<div id="da-slider" class="da-slider">

	<div class="da-slide">
		<h2>Some headline</h2>
		<p>Some description</p>
		<a href="#" class="da-link">Read more</a>
		<div class="da-img">
			<img src="https://www.ninenik.com/images/logo_01_Fri.gif" alt="image01" />
		</div>
	</div>
	
	<div class="da-slide">
		<h2>Some headline</h2>
		<p>Some description</p>
		<a href="#" class="da-link">Read more</a>
		<div class="da-img">
			<img src="https://www.ninenik.com/images/logo_01_Thu.gif" alt="image01" />
		</div>
	</div>	
	

	
	<nav class="da-arrows">
		<span class="da-arrows-prev"></span>
		<span class="da-arrows-next"></span>
	</nav>
	
</div>    
</div>     

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script>
<script type="text/javascript">
    $(function() {

        $('#da-slider').cslider();

    });
</script>	
		        
</body>
</html>

ninenik 05-03-2015

ความคิดเห็นที่ 2

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <link rel="stylesheet" href="http://tympanus.net/Development/ParallaxContentSlider/css/style2.css">  
    <script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script>  
</head>  
<body>  
  
    
<div style="margin:auto;width:700px;height:400px;">   
<div id="da-slider" class="da-slider">  
  
    <div class="da-slide">  
        <h2>Some headline</h2>  
        <p>Some description</p>  
        <a href="#" class="da-link">Read more</a>  
        <div class="da-img">  
            <img src="https://www.ninenik.com/images/logo_01_Fri.gif" alt="image01" />  
        </div>  
    </div>  
      
    <div class="da-slide">  
        <h2>Some headline</h2>  
        <p>Some description</p>  
        <a href="#" class="da-link">Read more</a>  
        <div class="da-img">  
            <img src="https://www.ninenik.com/images/logo_01_Thu.gif" alt="image01" />  
        </div>  
    </div>      
      
  
      
    <nav class="da-arrows">  
        <span class="da-arrows-prev"></span>  
        <span class="da-arrows-next"></span>  
    </nav>  
      
</div>      
</div>       
  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script>  
<script type="text/javascript">  
    $(function() {  
  
        $('#da-slider').cslider();  
  
    });  
</script>   
                  
</body>  
</html>

inwdesign 06-03-2015 23:10

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน