Chia Sẻ Code Slidder Chuyển Hình Ảnh Tự Động - Sử dụng cả 3 CSS, HTML, JS

Chào bạn chúng ta lại gặp nhau trong chuỗi seri chia sẻ miễn phí bộ code Chia Sẻ Code Slidder Chuyển Hình Ảnh Tự Động - Sử dụng cả 3 CSS, HTML, JS hìn

Chào bạn chúng ta lại gặp nhau trong chuỗi seri chia sẻ miễn phí bộ code Chia Sẻ Code Slidder Chuyển Hình Ảnh Tự Động - Sử dụng cả 3 CSS, HTML, JS hình ảnh chuyển động rất mượt màng, kèm theo bộ text, chuyên mục chia sẻ code HTML, CSS và JS...
Chia Sẻ Code Slidder Chuyển Hình Ảnh Tự Động - Sử dụng cả 3 CSS, HTML, JS

Hướng dẫn các thực hiện.

- Nếu như bạn làm theo mà nó không được hiển thị thì như trong phần DEMO thì bạn liên hệ ngáy với chúng tôi nhé, để được hỗ trọ tận tâm...


- Các bược dán mã code chắc mình không cần phải chia sẻ nữa đúng ko ạk
- Nếu bạn muốn chỉ hiển thị ở mục trang chủ thì sử dụng thẻ điều kiện sau.
<b:if cond='data:view.isHomepage'> </b:if>

+ Bước 1: Copy CSS


.mySlides{display:none}
.mySlides img {vertical-align:middle;width:100%}
.wrap-dot{text-align:center;margin-top:10px}
.slideshow-container{max-width:1000px;position:relative;margin:auto}
.slideshow-container .prev,.slideshow-container .next{cursor:pointer;position:absolute;top:50%;padding:7px 15px;margin:-22px 5px 0 5px;color:white;font-weight:bold;font-size:18px;transition:0.6s ease;border-radius:50%;user-select:none}
.slideshow-container .next{right:0}
.slideshow-container .prev:hover,.slideshow-container .next:hover{background-color:rgba(0,0,0,0.8)}
.slideshow-container .text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center}
.wrap-dot .dot{cursor:pointer;height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.6s ease}
.wrap-dot .dot.active{background-color:#f89000;width:30px;border-radius:20px}
.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}
@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}}
@media only screen and (max-width:300px){.slideshow-container .prev,.slideshow-container .next,.slideshow-container .text{font-size:11px}}

+ Bước 2: Copy HTML


<div class='slideshow-container'>
<div class='mySlides fade'>
  <a href='#'>
  <img src='https://www.w3schools.com/howto/img_snow_wide.jpg'/>
  <div class='text'>Caption Text</div>
  </a>
</div>

<div class='mySlides fade'>
  <a href='#'>
  <img src='https://www.w3schools.com/howto/img_mountains_wide.jpg'/>
  <div class='text'>Caption Two</div>
  </a>
</div>

<div class='mySlides fade'>
  <a href='#'>
  <img src='https://www.w3schools.com/howto/img_nature_wide.jpg'/>
  <div class='text'>Caption Three</div>
  </a>
</div>
<a class='prev' onclick='prevSlide()'>&#10094;</a>
<a class='next' onclick='showSlides()'>&#10095;</a>
</div>

<div class='wrap-dot'>
  <span class='dot'></span>
  <span class='dot'></span>
  <span class='dot'></span>
</div>

+ Bước 3: Copy JS


<script>/*<![CDATA[*/ 
var timeOut = 2e3,
    slideIndex = 0,
    autoOn = !0;

function autoSlides() {
    timeOut -= 20, 1 == autoOn && timeOut < 0 && showSlides(), setTimeout(autoSlides, 20)
}

function prevSlide() {
    timeOut = 2e3;
    var e = document.getElementsByClassName("mySlides"),
        s = document.getElementsByClassName("dot");
    for (i = 0; i < e.length; i++) e[i].style.display = "none", s[i].className = s[i].className.replace(" active", "");
    --slideIndex > e.length && (slideIndex = 1), 0 == slideIndex && (slideIndex = 3), e[slideIndex - 1].style.display = "block", s[slideIndex - 1].className += " active"
}

function showSlides() {
    timeOut = 2e3;
    var e = document.getElementsByClassName("mySlides"),
        s = document.getElementsByClassName("dot");
    for (i = 0; i < e.length; i++) e[i].style.display = "none", s[i].className = s[i].className.replace(" active", "");
    ++slideIndex > e.length && (slideIndex = 1), e[slideIndex - 1].style.display = "block", s[slideIndex - 1].className += " active"
}
autoSlides();
/*]]>*/</script>

* Trên đây là bộ code slider cho bạn cần để tham khảo thêm trong quá trình thiết kế website chuyên nghiệp hơn.  

Chúc bạn thành công!