207 lượt xem 09/08/2024
Slider siêu đẹp được custom trong theme Flatsome. Dưới đây là đoạn snippet code custom UI Flatsome
Thông báo: Nội dung trên trang web này là những kiến thức mà mình đã sưu tầm từ nhiều nguồn trên mạng, cũng như những gì mình học hỏi và tích lũy được. Nếu bất kỳ bài viết nào trên trang vô tình vi phạm bản quyền của tác giả, xin vui lòng thông báo cho mình để mình có thể gỡ bỏ ngay lập tức. Rất mong nhận được sự thông cảm và hỗ trợ từ mọi người. Xin cảm ơn!
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | [section dark="true" padding="0px" height="80vh" class="slide-container"] [row class="slide-holder"] [col span="3" span__sm="6" class="slide-item slide-1"] <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> [/col] [col span="3" span__sm="6" class="slide-item slide-2"] <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> [button text="Click me!" color="secondary" style="outline" radius="10"] [/col] [col span="3" span__sm="6" class="slide-item slide-3"] <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> [button text="Click me!" color="secondary" style="outline" radius="10"] [/col] [col span="3" span__sm="6" class="slide-item slide-4"] <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> [button text="Click me!" color="secondary" style="outline" radius="10"] [/col] [col span="3" span__sm="6" class="slide-item slide-5"] <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> [button text="Click me!" color="secondary" style="outline" radius="10"] [/col] [col span="3" span__sm="6" class="slide-item slide-6"] <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> [button text="Click me!" color="secondary" style="outline" radius="10"] [/col] [/row] [ux_html] <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> [/ux_html] [/section] |
Bước 2: Thêm Style CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | /** 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; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .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); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .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
1 2 3 4 5 6 7 8 9 | <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> |
Bài viết mới cập nhật:
- Code thông báo gửi form thành công cho Plugin contact form 7 đẹp hơn
- Flatsome – Tạo ShortCode Review Sản Phẩm
- Chia sẻ cách chống SPAM cho Contact Form 7 hiệu quả nhất
- Chia sẽ code nút xem thêm vào mục Gallery hình ảnh Flatsome
- Nhận thông báo đơn hàng Woocommerce, Contact Form 7 qua Telegram
- Chia sẻ theme Flatsome sạch – Nguyên tem từ themeforest
- Code chức năng chặn truy cập Devtool thành công 100%
- [Thủ Thuật Flatsome] Custom Slider Flatsome cực đẹp
Chia sẻ bài viết:
Thông báo chính thức: Chào mừng bạn đến với Dev Panda, một phần của Tiến Cường WordPress! Đây là nơi lưu trữ và chia sẻ những kiến thức lập trình hữu ích, được sưu tầm từ nhiều nguồn. Dù bạn mới bắt đầu hay đã có kinh nghiệm, Dev Panda luôn mong muốn hỗ trợ bạn tạo ra các website chất lượng với WordPress, đặc biệt là theme Flatsome.
Dev Panda
Bài Viết Cùng Chủ Đề:
