• January 28, 2024
    <section class="auto-slider">
                <div id="slider">
                    <figure>
                        <img src="img/bk-cdu1.jpg" alt="Image">
                        <img src="img/bk-cdu2.jpg" alt="Image">
                        <img src="img/bk-cdu3.jpg" alt="Image">
                        <img src="img/bk-cdu4.jpg" alt="Image">
                        <img src="img/bk-cdu5.jpg" alt="Image">
                        <img src="img/bk-cdu6.jpg" alt="Image">
                        <img src="img/bk-cdu7.jpg" alt="Image">
                    </figure>
                    <div class="indicator"></div>
        </div>
    </section>
    	<style>
    	.auto-slider{
        position: relative;
        display: inline-block;
        padding: 10px 10px 20px;
        margin: 0 auto;
        overflow: hidden;
        box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
    }
    @keyframes sliding{
                0%{left: 0%; }
                20%{left: -100%;}
                40%{left: -200%;}
                60%{left: -300%;}
                80%{left: -400%;}
                100%{left: 0%;}
            }                
    @keyframes indicating{
                from{
                    left: -100%;
                }
                to{
                    left: 0;
                }
    }  
    div#slider { overflow: hidden; }
    div#slider figure img { width:25% ; float: left; }
    div#slider figure { 
      position: relative;
      width: 100%;
      margin: 0;
      animation: 25s sliding ease infinite; 
    }
    
    .indicator{
        width: 100%;
        height: 6px;
        position: absolute;   
        animation: indicating 5s ease infinite; 
    }
    	</style>


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories