Học thiết kế web với tài khoản VIP 365

Tất cả bài viết  |  Jquery

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

Hướng dẫn cách tạo Slide bài viết bằng Jquery

Trong bài Học lập trình web này các Bạn sẽ được Hướng dẫn cách tạo Slide bài viết bằng Jquery cho website.

Bước 1: Tạo cấu trúc HTML
 
 

Hướng dẫn cách tạo Slide bài viết bằng Jquery

Đối tác

Bài viết mới

Hình 1

Học thiết kế web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...

Chi tiết

Hình 2

Học thiết kế web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...

Chi tiết

Hình 3

Học thiết kế web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...

Chi tiết

Hình 4

Học thiết kế web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...

Chi tiết

Hình 5

Học thiết kế web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus ex. Integer eu fringilla nisi. Donec id dapibus mauris, eget dignissim turpis ...

Chi tiết
Bước 2: Tạo cấu trúc CSS
body { 
font-family:'Open Sans'; 
background-color:#fafafa;
}
h2 { 
margin:30px auto;
}
.container { 
margin:10px auto;
}

#mixedSlider {  
position: relative;
}

#mixedSlider .MS-content {  
white-space: nowrap;  
overflow: hidden;  
margin: 0 5%;
}

#mixedSlider .MS-content .item {  
display: inline-block;  
width: 33.3333%;  
position: relative;  
vertical-align: top;  
overflow: hidden;  
height: 100%;  
white-space: normal;  
padding: 0 10px;
}

@media (max-width: 991px) {  
#mixedSlider .MS-content .item {    
width: 50%;  }
}

@media (max-width: 767px) {  
#mixedSlider .MS-content .item {    
width: 100%;  
}
}

#mixedSlider .MS-content .item .imgTitle {  
position: relative;
}

#mixedSlider .MS-content .item .imgTitle .blogTitle {  
margin: 0;  
text-align: left;  
letter-spacing: 2px;  
color: #252525;  
font-style: italic;  
position: absolute;  
background-color: rgba(255, 255, 255, 0.5);  
width: 100%;  
bottom: 0;  
font-weight: bold;  
padding: 0 0 2px 10px;
}

#mixedSlider .MS-content .item .imgTitle img {  
height: auto;  
width: 100%;
}

#mixedSlider .MS-content .item p {  
font-size: 16px;  
margin: 2px 10px 0 5px;  
text-indent: 0px;
}

#mixedSlider .MS-content .item a {  
float: right;  
margin: 0 20px 0 0;  
font-size: 16px;  
font-style: italic;  
color: rgba(173, 0, 0, 0.82);  
font-weight: bold;  
letter-spacing: 1px;  
transition: linear 0.1s;
}

#mixedSlider .MS-content .item a:hover {  
text-shadow: 0 0 1px grey;
}

#mixedSlider .MS-controls button {  
position: absolute;  
border: none;  
background-color: transparent;  
outline: 0;  
font-size: 50px;  
top: 95px;  
color: rgba(0, 0, 0, 0.4);  
transition: 0.15s linear;
}

#mixedSlider .MS-controls button:hover {  
color: rgba(0, 0, 0, 0.8);
}

@media (max-width: 992px) {  
#mixedSlider .MS-controls button {    
font-size: 30px;  
}
}

@media (max-width: 767px) {  
#mixedSlider .MS-controls button {    
font-size: 20px;  
}
}

#mixedSlider .MS-controls .MS-left {  
left: 0px;
}

@media (max-width: 767px) {  
#mixedSlider .MS-controls .MS-left {    
left: -10px;  
}
}

#mixedSlider .MS-controls .MS-right {  
right: 0px;
}

@media (max-width: 767px) {  
#mixedSlider .MS-controls .MS-right {    
right: -10px;  
}
}

#basicSlider { 
position: relative; 
}

#basicSlider .MS-content {  
white-space: nowrap;  
overflow: hidden;  
margin: 0 2%;  
height: 100px;
}

#basicSlider .MS-content .item {  
display: inline-block;  
width: 20%;  
position: relative;  
vertical-align: top;  
overflow: hidden;  
height: 100%;  
white-space: normal;  
line-height: 50px;  
vertical-align: middle;
}

@media (max-width: 991px) {
#basicSlider .MS-content .item { 
width: 25%; 
}
}

@media (max-width: 767px) {
#basicSlider .MS-content .item { 
width: 35%; 
}
}

@media (max-width: 500px) {
#basicSlider .MS-content .item { 
width: 50%; 
}
}

#basicSlider .MS-content .item a {  
line-height: 50px;  
vertical-align: middle;
}

#basicSlider .MS-controls button { 
position: absolute; 
}

#basicSlider .MS-controls .MS-left {  
top: 35px;  
left: 10px;
}

#basicSlider .MS-controls .MS-right {  
top: 35px;  
right: 10px;
}
Bước 3: Gọi thư viện Bootstrap và Font awesome
 
 
 
Bước 4: Gọi thư viện JQUERY
 
Bước 5: Tạo hiệu ứng Slide bằng JQUERY
  
Xem  demo Hỏi đáp với giáo viên
Nhà đất Kim Oanh chuyên đất nền, nhà phố
Gửi bình luận
Bạn có thể quan tâm

Tạo hiệu ứng phóng to sản phẩm Học lập trình web

Hướng dẫn tạo Slidebox quảng cáo bằng Jquery Học lập trình web

Hướng dẫn tạo menu dọc cho website Học lập trình web

Cách tạo chức năng xem thêm bằng Jquery Học lập trình web

Hướng dẫn tạo Marquee bằng Jquery Học lập trình web

Hướng dẫn cách tạo hiệu ứng chữ cầu vòng Học lập trình web

Hướng dẫn cách tạo Menu dọc theo chuẩn RWD Học lập trình web

Hướng dẫn tạo chữ lật bằng JQUERY Học lập trình web

Hướng dẫn sử dụng jQuery End Page Box để tạo quảng cáo góc phải trang web Học lập trình web

Hướng dẫn tạo cửa sổ Popup đơn giản bằng JQUERY Học lập trình web