Chia Sẻ Tạo Slide Ảnh Siêu Đẹp Không Dùng Plugin Mẫu 1 - Thủ Thuật Wordpress

Đăng bởi Thuấn Luviet vào lúc 17/08/2025

Bạn đã quá chán vì slide website quá đơn giản và khó thể hiện hết nội dung marketing. Có một giải pháp là sử dụng các dạng slide ảnh đẹp, gọn gàng.

Bài viết này, Luviet sẽ giúp bạn tự tạo slide carousel đẹp bằng html, css và một đoạn script nhỏ.

Trước khi bắt đầu, hãy ủng hộ kênh bằng cách chia sẻ đường link website này lên trang cá nhân của bạn nhé.

Tôi đang thực hiện nó ở trên wordpress dùng theme flatsome. Cho nên nếu bạn dùng các theme khác thì hãy tham khảo các hướng dẫn tùy chỉnh của nhà phát triển nhé.

Slide Ảnh Website Để Làm Gì?

Slide ảnh trên website giúp thu hút sự chú ý của người đọc, nó làm nổi bật những nội dung quan trọng, và tạo ra trải nghiệm trực quan, sinh động hơn. Slide Carousel giúp truyền tải thông điệp một cách hiệu quả, giới thiệu sản phẩm, dịch vụ từ đó thúc đẩy hành động từ phía người đọc.

Cách Tạo Slide Carousel Ảnh Đẹp Không Dùng Plugin - Mẫu Code-1

Bước 1: Chuẩn bị các ảnh slide và ảnh icon cùng mô tả ngắn

- Ảnh slide nên là ảnh vuông hoặc ảnh 3:4 để bố cục đẹp hơn, kích thước ảnh slide nên từ 720px trở lên để có chất lượng tốt, dung lượng arh website nên dưới 350kb để tối ưu tốc độ load trang.

- Ảnh icon nên là ảnh định dạng svg để tránh vỡ ảnh ở kích thước quá nhỏ.

- Tải các ảnh lên wordpress ở thư viện media và lấy link ảnh hoặc id ảnh.

Bước 2: Copy code sau vào phần soạn thảo code của wordpress. Lưu lại và chuyển sang chế độ ux-builder nhé.

Bước 3: Copy css slide carousel bên dưới dán vào css của wordpress

    /** Custom Slide **/
.options {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    width: calc(100% - 100px);
}

.options .option {
    position: relative;
    overflow: hidden;
    min-width: 50px;
    margin: 0 10px;
    padding: 0;
    background-size: 120%;
    cursor: pointer;
    transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
    border: 1px solid rgba(246, 243, 229, 0.1);
}

.option .fill {
    height: 100%;
}

.options .option:not(.active) {
    flex-grow: 1;
    border-radius: 30px;
}

.options .option.active {
    flex-grow: 10000;
    transform: scale(1);
    max-width: 800px;
    margin: 0px;
    border-radius: 40px;
    background-size: auto 100%;
}

.options .option.active .overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 70%);
}

.res-text {
    font-size: inherit !important;
}

.option .label {
    height: 150px !important;
}

.option.active .info {
    opacity: 1;
    transition: all 0.5s ease;
    transition-delay: 0.4s;
}

.option:not(.active) .info {
    opacity: 0;
    transition: all 0s ease;
    transition-delay: 0s;
}
.option .icon,
.option .img-inner,
.option img {width: 99px !important;
}
@media screen and (max-width: 600px) {
		.options {width: calc(100% - 10px);}    
		.options .option {transition: max-height 0.5s ease;}
  .options .option.active {max-height: 900px;transition: max-height 0.5s ease;}
.options .option:not(.active) {        max-height: 150px;        transition: max-height 0.5s ease;}
.options .option:not(.active) .icon img {max-height: 100px;width: auto !important;}
.options .option:not(.active) .icon::after {content: "25bc";color: #fff;}
}
    

Bước 4: Thêm script này để tạo hiệu ứng slide chuyên nghiệp hơn

     /** Custom Slide 
jQuery(function($){
  var $options = $(".option");
  var currentIndex = 0;
  var autoSlide;
  var resumeTimeout;

  // Hàm active theo index
  function activateSlide(index) {
    $options.removeClass("active");
    $options.eq(index).addClass("active");
  }

  // Auto chuyển slide
  function startAutoSlide() {
    clearInterval(autoSlide); // tránh trùng
    autoSlide = setInterval(function(){
      currentIndex = (currentIndex + 1) % $options.length;
      activateSlide(currentIndex);
    }, 4000); // 4 giây
  }

  // Khi user click
  $options.click(function(){
    clearInterval(autoSlide);   // dừng auto ngay
    clearTimeout(resumeTimeout); // clear timeout trước đó nếu có

    currentIndex = $(this).index();
    activateSlide(currentIndex);

    // Sau 10 giây thì resume auto
    resumeTimeout = setTimeout(function(){
      startAutoSlide();
    }, 10000);
  });

  // Khởi động auto ban đầu
  startAutoSlide();
});
**/

Chú ý: Do script nên bạn cần copy từ jQuery ... đến }); và dán trong đoạn code script là: <script>  .... </script>

Bước 5: Điều chỉnh slide theo ý muốn

- Thời gian chuyển giữa các slide: activateSlide(currentIndex);

 }, 4000); // 4 giây : 4000 là 4 giây

- Thời gian dừng khi bấm vào ảnh thủ công:

startAutoSlide(); }, 10000); 10000 là 10 giây

Bước 6: Lưu Lại Và Kiểm Tra

Cung Cấp Mẫu Website Wordpress Cài Đặt Online Trên Toàn Việt Nam

Luviet là đơn vị chuyên thiết kế website, cho nên chúng tôi có sẵn hàng chục ngàn mẫu website đủ các ngành nghề để bạn lựa chọn.

Nhận copy, clone hoặc sao chép website trên tất cả các nền tảng về wordpress, giá cả hợp lý, nhanh và bảo mật.

Bạn đang cần tự thiết kế website mà chưa biết học ở đâu?

Không cần mất 5 năm để học và tạo ra 1 website nữa, bạn chỉ cần mua mẫu website theo ý mình, làm theo hướng dẫn chi tiết từng bước. 

Chỉ cần biết cầm chuột bấm vào các nút hướng dẫn trên video. Chắc chắn bạn sẽ làm được

Bạn lo lắng vì website làm ra giống với người khác?

Không sao, tôi đã có sẵn 1 seri video hướng dẫn bạn tự làm các hình ảnh, logo, ảnh slide website để giúp bạn tự làm website đẹp hơn.

Thiết kế hình ảnh bằng Canva Online

Tôi Không Muốn Cài Đặt Website - Luviet Có Cài Giúp?

- Có, chúng tôi có nhân sự giúp bạn mua tên miền, hosting và cài đặt website 100% như demo cho bạn. Với chi phí từ 500k bạn sẽ bắt đầu có 1 website trong vòng 12h.

Website Có Bảo Hành?

- Có, chúng tôi bảo hành đổi website khác nếu website bị lỗi và không giống như demo. Và hoàn tiền 50% nếu có sai khác.

- Không bảo hành sau 24h khi luviet bàn giao code, mật khẩu cho bạn. Nếu có lỗi thì chúng tôi sẽ kiểm tra backup 1 lần miễn phí cho bạn.

Luviet Thiết Kế Website Ở Đâu?

Luviet hiện nay có trụ sở tại Phường Bảo Vinh, Đồng Nai.

Hotline: 0914878680

Website: https://luviet.com

Zalo OA: https://zalo.me/1501073926693571291

Tags: huong-dan , kien-thuc-css , thu-thuat , thu-thuat-wordpress , tin-tuc ,