Slider đã trở nên cực kỳ phổ biến trong những năm gần đây. Chúng cung cấp cho các nhà quản lý trang web khả năng hiển thị nhiều nội dung hơn trên một phần tử hình ảnh xoay vòng thú vị. Nó không chỉ thu hút sự chú ý của khách truy cập mà còn cải thiện trải nghiệm người dùng bằng cách cung cấp cho người dùng khả năng truy cập nội dung đó theo tốc độ của riêng họ bằng cách kích hoạt trang trình bày tiếp theo. Chúng là một trong những cách dễ nhất để giới thiệu bất cứ điều gì về tổ chức của bạn - từ danh sách khách hàng, lời chứng thực của khách hàng, đánh giá và hình ảnh.
Sử dụng Slick Slider , bạn có thể tạo băng chuyền trượt hiển thị các trường hợp nội dung của bạn theo cách thân thiện với người dùng.
Với hướng dẫn này, hãy tạo cho mình một yếu tố thú vị và chức năng bổ sung cho thiết kế trang web của bạn.
Dưới đây là HTML, CSS và JavaScript bắt buộc:
HTML
Để tạo phần Slider của bạn, trước tiên hãy tạo lớp cha để chứa tất cả các trang trình bày riêng lẻ. Trong ví dụ này, chúng tôi sử dụng lớp cha của "testimonial-carousel". Với điều đó tại chỗ, mỗi hộp / trang trình bày riêng lẻ có thể được tạo bằng cách đánh dấu cơ bản:
Ví dụ
<section class="orange-fade p-5 margin-top-xl pos-r">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="text-center font-weight-bold text-white">Our Customers are Seeing Big Results</h2>
<p></p>
<div class="mt-5 pos-r">
<div class="carousel-controls testimonial-carousel-controls">
<div class="control prev"><i class="fa fa-chevron-left text-white"> </i></div>
<div class="control next"><i class="fa fa-chevron-right text-white"> </i></div>
</div>
<div class="testimonial-carousel">
<div class="one-slide white">
<div class="testimonial w-100 h-100 p-3 text-center">
<div class="message text-center text-gray">I have been working with Solodev for nearly 4 years and I couldn't be happier with the results!</div>
<div class="separator"> </div>
<div class="brand"><img alt="Florida Dairy Farmers" src="https://raw.githubusercontent.com/solodev/slider-boxes/master/images/img-1.png" class="mx-auto"/></div>
</div>
</div>
<div class="one-slide white">
<div class="testimonial w-100 h-100 p-3 text-center">
<div class="message text-center text-gray">The interface is easy for a novice user to make updates just as easily as an experienced developer.</div>
<div class="separator"> </div>
<div class="brand"><img alt="Florida Department of Education" src="https://raw.githubusercontent.com/solodev/slider-boxes/master/images/img-2.png" class="mx-auto"/></div>
</div>
</div>
<div class="one-slide white">
<div class="testimonial w-100 h-100 p-3 text-center">
<div class="message text-center text-gray">Solodev is a great company to partner with! We are extremely happy with the software, service, and support.</div>
<div class="separator"> </div>
<div class="brand"><img alt="Seminole County" src="https://raw.githubusercontent.com/solodev/slider-boxes/master/images/img-3.png" class="mx-auto" /></div>
</div>
</div>
<div class="one-slide white">
<div class="testimonial w-100 h-100 p-3 text-center">
<div class="message text-center text-gray">If you are looking for a great CMS company then Solodev is the right choice.</div>
<div class="separator"> </div>
<div class="brand"><img alt="Lynx" src="https://raw.githubusercontent.com/solodev/slider-boxes/master/images/img-4.png" class="mx-auto" /></div>
</div>
</div>
<div class="one-slide white">
<div class="testimonial w-100 h-100 p-3 text-center">
<div class="message text-center text-gray">Everyone on the Solodev team is very knowledgeable and they have been always been very responsive.</div>
<div class="separator"> </div>
<div class="brand"><img alt="Miami Beach VCA" src="https://raw.githubusercontent.com/solodev/slider-boxes/master/images/img-5.png" class="mx-auto" /></div>
</div>
</div>
<div class="one-slide white">
<div class="testimonial w-100 h-100 p-3 text-center">
<div class="message text-center text-gray">Solodev has been able to successfully keep us at the forefront of our industry and continually meet our ever adapting needs.</div>
<div class="separator"> </div>
<div class="brand"><img alt="Oneblood" src="https://raw.githubusercontent.com/solodev/slider-boxes/master/images/img-6.png" class="mx-auto" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>CSS
Các hộp tạo nên từng slide riêng lẻ được kiểm soát chặt chẽ bằng một số CSS cơ bản. Với bán kính đường viền nhỏ và các lề ở hai bên của hộp, chúng tôi có thể tạo một kiểu tiêu chuẩn sẽ hiển thị đẹp trên tất cả các thiết bị.
Ví dụ
/* Scss Document */
.orange-fade {
background: #ff910e;
background: linear-gradient(135deg,#ff910e 0,#ffa841 100%);
}
.pos-r {
position: relative!important;
}
.white {
background: #fff;
}
.text-white {
color: #fff!important;
}
.text-gray {
color: #363636;
}
.testimonial {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.separator {
width: 14%;
height: 3px;
margin: 1.2em auto 1em;
background: #ffc53a;
}
.one-slide {
border-radius: 3px;
margin-left: 1rem;
margin-right: 1rem;
font-size: 1.1rem;
height: 300px;
}
.one-slide img {
width: 60%;
}
.carousel-controls .control {
position: absolute;
cursor: pointer;
top: 56.4%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
c
}
.prev {
left: -1.875rem;
}
.next {
right: -1.875rem;
}
.testimonial-carousel {
&.slick-initialized {
display: block;
}
.message {
width: 100%;
font-size: .9rem;
}
.brand {
width: 100%;
}
@media (max-width: 575px) {
.one-slide {
height: 200px;
}
img {
width: 40%;
}
}
}JavaScript
Cuối cùng, chúng ta phải tự khởi tạo thanh trượt bằng cách nhắm mục tiêu lớp cha. Sử dụng các điểm ngắt đáp ứng được tích hợp sẵn của Slick Slider, chúng tôi có thể chỉ ra số lượng hộp sẽ hiển thị trên các thiết bị nhất định:
Ví dụ
$(document).ready(function() {
$(".testimonial-carousel").slick({
infinite: !0,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: !1,
arrows:true,
prevArrow: $(".testimonial-carousel-controls .prev"),
nextArrow: $(".testimonial-carousel-controls .next"),
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 3
}
}, {
breakpoint: 992,
settings: {
slidesToShow: 2
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 1
}
}]
});
});