Tất cả bài viết | Lập trình Jquery

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
  
      
     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
  
      
     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
  
      
     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
  
      
     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
  
      
     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 Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất