[Thủ Thuật Flatsome] Custom Slider Flatsome cực đẹp cực chất

[Thủ Thuật Flatsome] Custom Slider Flatsome cực đẹp cực chất. Slider siêu đẹp được custom trong theme Flatsome. Hãy cùng chothemewp đi tùm hiểu cách làm nhé. Dưới đây là đoạn snippet code custom UI Flatsome

Bước 1: Thêm code HTML

Bạn có thể chèn nó trong phần editor của trang/ bài viết. Đây là đoạn chứa các element slider

Chú ý: Trong class “slide-item …” có phần “slide-1” thì thay thế bằng những con số tương ứng với vị trí từng slider


	
		
									
			

		

		

		
			


	
				
			
			
<h2>Hello world</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		
					

	

	
				
			
			
<h2>Hello world</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

		Click me!
	


		
					

	

	
				
			
			
<h2>Hello world</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

		Click me!
	


		
					

	

	
				
			
			
<h2>Hello world</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

		Click me!
	


		
					

	

	
				
			
			
<h2>Hello world</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

		Click me!
	


		
					

	

	
				
			
			
<h2>Hello world</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

		Click me!
	


		
					

	


<nav class='custom-nav'>
       <i class='icon-angle-left btn custom-prev' name="arrow-back-outline"></i>
       <i class='icon-angle-right btn custom-next' name="arrow-forward-outline"></i>
   </nav>

Hãy để chothemewp giải thích code này 1 xíu để giúp bạn rõ hơn về nó nhé.

Mã nguồn trên là một tập hợp các đoạn mã HTML và CSS được sử dụng để tạo ra một trình trình bày hiển thị theo dạng slide. Được xây dựng với mục tiêu thể hiện nội dung theo cách thức trực quan và hấp dẫn, nó sử dụng các thẻ và lớp CSS để cấu trúc hóa và trình bày thông tin.

Trong mã HTML, có sử dụng các thẻ <section>, <row>, và <col> để tạo lưới hiển thị. Mỗi slide (slide-item) bao gồm một tiêu đề (<h2>) và một đoạn văn bản mô tả (<p>), cùng với một nút (button) để thực hiện hành động nào đó khi được nhấp vào.

Các lớp CSS (chẳng hạn như slide-container, slide-holder, slide-item, custom-nav, vv.) có thể được sử dụng để tùy chỉnh giao diện, cung cấp các kiểu dáng, kích thước, màu sắc hoặc hiệu ứng để làm cho trình bày trở nên đẹp mắt và dễ dàng sử dụng hơn.

Cuối cùng, có một phần mã HTML được sử dụng để tạo các nút điều hướng (‘prev’ và ‘next’) giúp người dùng điều hướng giữa các slide một cách thuận tiện.

Mã nguồn này có thể được sử dụng trong việc tạo ra một phần giao diện người dùng cho một trình chiếu trình bày nội dung theo dạng slide, hoặc trong các ứng dụng web khác nhau mà yêu cầu tính linh hoạt và sự tương tác của người dùng.

Bước 2: Thêm Style CSS

/** Custom Slider **/
.slide-1 {
   background: url(https://picsum.photos/id/11/2500/1667.jpg) no-repeat;
   background-position: 50% 50%;
   /* Can change the position to focus on part of image */
}
.slide-2 {
   background: url(https://picsum.photos/id/10/2500/1667.jpg) no-repeat;
   background-position: 50% 50%;
}
.slide-3 {
   background: url(https://picsum.photos/id/15/2500/1667.jpg) no-repeat;
   background-position: 50% 50%;
}
.slide-4 {
   background: url(https://picsum.photos/id/33/5000/3333.jpg) no-repeat;
   background-position: 50% 50%;
}
.slide-5 {
   background: url(https://picsum.photos/id/43/1280/831.jpg) no-repeat;
   background-position: 50% 50%;
}
.slide-6 {
   background: url(https://picsum.photos/id/57/2448/3264.jpg) no-repeat;
   background-position: 50% 50%;
}
.slide-container .section-content {
   width: 100vw;
   height: 83vh;
   /* Change according to your desired height. NOTE: This may affect responsive styling; change tablet/mobile styling accordingly */
}
.slide-item {
   width: 200px;
   height: 300px;
   max-width: unset;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
   background-size: cover;
   border-radius: 20px;
   box-shadow: 0 20px 30px rgba(255, 255, 255, 0.3) inset;
   transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;
   &:nth-child(1),
   &:nth-child(2) {
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       transform: none;
       border-radius: 0;
       box-shadow: none;
       opacity: 1;
   }
   &:nth-child(3) {
       left: 50%;
   }
   &:nth-child(4) {
       left: calc(50% + 220px);
   }
   &:nth-child(5) {
       left: calc(50% + 440px);
   }
   &:nth-child(6) {
       left: calc(50% + 660px);
       opacity: 0;
   }
}
.slide-item .col-inner {
   width: min(30vw, 400px);
   position: absolute;
   top: 50%;
   left: 3rem;
   transform: translateY(-50%);
   text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
   opacity: 0;
   display: none;
}
.slide-item:nth-of-type(2) .col-inner {
   display: block;
   animation: show 0.75s ease-in-out 0.3s forwards;
}
@keyframes show {
   0% {
       filter: blur(5px);
       transform: translateY(calc(-50% + 75px));
   }
   100% {
       opacity: 1;
       filter: blur(0);
   }
}
.custom-nav {
   display: flex;
   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);
   z-index: 5;
   user-select: none;
   & .btn {
       background-color: rgba(0, 0, 0, 0.1);
       color: var(--fs-color-secondary);
       /* Can change for any color code or primary variable */
       border: 2px solid var(--fs-color-secondary);
       margin: 0 0.25rem;
       padding: 20%;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 50px;
       height: 50px;
       border-radius: 50%;
       cursor: pointer;
       &:hover {
           background-color: var(--fs-color-secondary);
           color: #fff;
       }
   }
}

Thêm code CSS cho table và mobile giúp chothemewp để hiển thị đẹp hơn nhá

.slide-item {
       width: 160px;
       height: 125px;
       top: 60%;
       transform: translateY(0%);
       &:nth-child(3) {
           left: 50%;
       }
       &:nth-child(4) {
           left: calc(50% + 170px);
       }
       &:nth-child(5) {
           left: calc(50% + 340px);
       }
       &:nth-child(6) {
           left: calc(50% + 510px);
           opacity: 0;
       }
   }
   .slide-item .col-inner {
       top: 49%;
       width: min(45vw, 400px);
   }
Mobile

.slide-item {
       width: 100px;
       height: 80px;
       top: unset;
       bottom: 15%;
       &:nth-child(3) {
           left: 50%;
       }
       &:nth-child(4) {
           left: calc(50% + 110px);
       }
       &:nth-child(5) {
           left: calc(50% + 250px);
       }
       &:nth-child(6) {
           left: calc(50% + 390px);
           opacity: 0;
       }
   }
   .slide-item .col-inner {
       left: 1rem;
       width: min(80vw, 300px);
   }
   .custom-nav {
       bottom: 0.5rem;
   }

Bước 3: Thêm JavaScript

<script>
const slider = document.querySelector('.slide-holder');
function activate(e) {
 const items = document.querySelectorAll('.slide-item');
 e.target.matches('.custom-next') && slider.append(items[0])
 e.target.matches('.custom-prev') && slider.prepend(items[items.length-1]);
}
document.addEventListener('click',activate,false);
</script>

Đoạn mã JavaScript này có chức năng điều khiển việc chuyển đổi giữa các slide trong một trình chiếu hoặc carousel được tạo bằng mã HTML trước đó.

Dòng đầu tiên const slider = document.querySelector('.slide-holder'); lấy phần tử đầu tiên có class là 'slide-holder', giả sử rằng đây là container chứa tất cả các slide.
Hàm activate(e) được định nghĩa với tham số e đại diện cho sự kiện click. Hàm này xác định xem người dùng đã nhấp vào nút ‘prev’ hay ‘next’ thông qua sự kiện click và thực hiện hành động tương ứng:
- Nếu người dùng nhấp vào nút ‘next’ (e.target.matches('.custom-next')), hàm sẽ di chuyển slide đầu tiên (items[0]) và đưa nó vào cuối danh sách với slider.append(items[0]).
- Nếu người dùng nhấp vào nút ‘prev’ (e.target.matches('.custom-prev')), hàm sẽ di chuyển slide cuối cùng (items[items.length-1]) và đưa nó lên đầu danh sách với slider.prepend(items[items.length-1]).
document.addEventListener('click', activate, false); thêm một trình nghe sự kiện click lên cả trang văn bản, để khi bất kỳ phần tử nào trên trang được nhấp vào, hàm activate() sẽ được gọi để xác định hành động cần thực hiện.

Nhìn chung, đoạn mã này làm việc để thay đổi vị trí của các slide trong trình chiếu khi người dùng nhấp vào các nút ‘prev’ hoặc ‘next’, tạo ra hiệu ứng trượt qua các slide một cách linh hoạt và tự động.

Cảm ơn các bạn đã đọc bài của chothemewp.com nhé

Đừng quên ủng hộ chothemewp nhé.

Khám Phá Kho Theme WordPress Đa Dạng và Hấp Dẫn với Giá Cực Hấp Dẫn Tại chothemewp.com

Những website kiếm tiền online giúp bạn có thu nhập $1000/tháng

Mẫu web bán khóa học đỉnh cao với chuẩn SEO 7 từ ChoThemeWP

Ưu đãi lớn: Tận hưởng 40% và 35% giảm giá khi sở hữu Theme WordPress tại Chothemewp!