Chia Sẻ Code Slidder Chuyển Hình Ảnh Tự Động

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...

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>