• Thế giới của tôi
  • Công nghệ
  • Nghệ thuật
  • Giải trí
  • Chế tạo Diy
  • Video
  • Phòng trưng bày
  • Quảng cáo
Thế giới của tôi
  • Trang chủ
  • Công nghệ

    Bán hàng online hiệu quả qua Instagram

    Hướng dẫn trỏ tên miền Namesilo về VPS Vultr

    Trang web tạo mật khẩu ngẫu nhiên cực hay

    Hướng dẫn bật nén Gzip trong Nginx cực đơn giản

    Cấu hình plugin Wp Rocket hay

    Hướng dẫn trỏ tên miền Name về VPS Vultr

    Tên miền

    Bật tính năng của ảnh trong wordpress 3.0

    Tầm quan trọng hình ảnh sản phẩm trong bán hàng online

  • Nghệ thuật
  • Giải trí
  • Chế tạo Diy
  • Video
  • Phòng trưng bày
No Result
View All Result
  • Trang chủ
  • Công nghệ

    Bán hàng online hiệu quả qua Instagram

    Hướng dẫn trỏ tên miền Namesilo về VPS Vultr

    Trang web tạo mật khẩu ngẫu nhiên cực hay

    Hướng dẫn bật nén Gzip trong Nginx cực đơn giản

    Cấu hình plugin Wp Rocket hay

    Hướng dẫn trỏ tên miền Name về VPS Vultr

    Tên miền

    Bật tính năng của ảnh trong wordpress 3.0

    Tầm quan trọng hình ảnh sản phẩm trong bán hàng online

  • Nghệ thuật
  • Giải trí
  • Chế tạo Diy
  • Video
  • Phòng trưng bày
No Result
View All Result
Thế Giới Của Tôi
No Result
View All Result
Home Wordpress

Một mẫu slider đẹp

Mai Linh by Mai Linh
29 Tháng Sáu, 2023
9 min read
0
Share on FacebookShare on Twitter

Xem nhanh tại đây.

  1. Code HTML

Bữa giờ có anh em hỏi mình cách hiển thị lượt view bài viết như trên website của mình, thì nay mình xin chia sẻ với anh em cách làm nhé.

    1. Code HTML

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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<section class="services-area pt-100 pb-70">
  <div class="container">
    <div class="section-title text-center">
    </div>
    <div class="row pt-45">
    
        <div class="col-md-7 infmi">
        
          <div class="row">
            <div class="col">
            
               <!-- Add more slides as needed -->
<div class="sliki">              
<div class="demo-cont">
  <!-- slider start -->
  <div class="fnc-slider example-slider">
    <div class="fnc-slider__slides">
      <!-- slide start -->
      <div class="fnc-slide m--blend-green m--active-slide">
        <div class="fnc-slide__inner">
          
          
          <div class="fnc-slide__content">
            
            
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-dark">
        <div class="fnc-slide__inner">
        
          <div class="fnc-slide__content">
            
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-red">
        <div class="fnc-slide__inner">
          
          
          <div class="fnc-slide__content">
            
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-blue">
        <div class="fnc-slide__inner">
          
          <div class="fnc-slide__content">
            
          </div>
        </div>
      </div>
      <!-- slide end -->
         <!-- slide start -->
      <div class="fnc-slide m--blend-red">
        <div class="fnc-slide__inner">
          
          
          <div class="fnc-slide__content">
            
          </div>
        </div>
      </div>
      <!-- slide end -->
    </div>
    <nav class="fnc-nav">
      <div class="fnc-nav__bgs">
        <div class="fnc-nav__bg m--navbg-green m--active-nav-bg"></div>
        <div class="fnc-nav__bg m--navbg-dark"></div>
        <div class="fnc-nav__bg m--navbg-red"></div>
        <div class="fnc-nav__bg m--navbg-blue"></div>
         <div class="fnc-nav__bg m--navbg-red"></div>
      </div>
      <div class="fnc-nav__controls">
        <button class="fnc-nav__control">
          Black Widow
          <span class="fnc-nav__control-progress"></span>
        </button>
        <button class="fnc-nav__control">
          Captain America
          <span class="fnc-nav__control-progress"></span>
        </button>
        <button class="fnc-nav__control">
          Iron Man
          <span class="fnc-nav__control-progress"></span>
        </button>
        <button class="fnc-nav__control">
          Thor
          <span class="fnc-nav__control-progress"></span>
        </button>
                <button class="fnc-nav__control">
          Iron Man
          <span class="fnc-nav__control-progress"></span>
        </button>
      </div>
    </nav>
  </div>
  <!-- slider end -->
  </div>
<!-- Add more slides as needed -->
            </div>
            
          </div>
          
        </div>
        </div>
        
        
        
        <div class="col-md-5 infmi">
          <div class="row kimike">
            <div class="col-sm-8 col-md-6">
              <div class="row">
                <div class="col-sm-12">
                  <!-- management house -->
 
                 <a class="dl02" href="#" target="_blank" rel="noopener noreferrer"><div class="xfe-quan-ly web_mangament" data-name="充值"><span class="active"><img alt="" src="https://ngoinhaweb.com/wp-content/uploads/2023/06/quan-ly-vip.jpg" width="352" height="auto"></span></div></a>
                
                  <!-- dowload -->
                </div>
              </div>
            </div>
            <div class="col-4 col-sm-4 col-md-6">
              <div class="row">
                <div class="col-12 col-sm-12">
                   <!-- solution -->
                  
                 <a class="dl02" href="#" target="_blank" rel="noopener noreferrer"><div class="xfe-solution web_lib" data-name="充值"><span class="normal"></span><span class="active"><img alt="" src="https://ngoinhaweb.com/wp-content/uploads/2023/06/giai-phap.jpg" width="352" height="auto"></span></div></a>
                
                  <!-- Card -->
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                 <!-- pricing -->
                 <a class="dl02" href="#" target="_blank" rel="noopener noreferrer"><div class="xfe-solution web_lib" data-name="充值"><span class="normal"></span><span class="active"><img alt="" src="https://ngoinhaweb.com/wp-content/uploads/2023/06/bang-gia.jpg" width="352" height="auto"></span></div></a>
                 <!-- pay -->
                </div>
              </div>
            </div>
            <div class="col-8 col-sm-12 col-md-12">
              <div class="row">
                <div class="col-12 col-sm-12">
                   <!-- banner event -->
                  <div class="xfe-layer-169" data-name="版本广告图"><div class="adv_warpper"><a title="" target="_blank" rel="noopener noreferrer" href="#"><img alt="" src="https://ngoinhaweb.com/wp-content/uploads/2023/06/khuyen-mai.jpg" width="707" height="auto"></a></div></div>
                   <!-- banner event -->
                </div>
              </div>
            </div>
          </div>
      
    </div>
  </div>
  <div class="service-shape"><img src="https://ngoinhaweb.com/wp-content/uploads/2023/06/nen-home-page-scaled.jpg" alt="Images"></div>
</section>

Code CSS chưa Responsive đầy đủ
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
/*only screen and (min-width: 768px) and (max-width: 1023px)
.demo-cont {
    top: 27vh !important;
    height: 30vh !important;
    margin-left: -2rem !important;
    margin-right: 0vh;
}
.fnc-slider {
     height:  30vh !important;
}*/
@media only screen and (min-width: 1024px) {
/**/
.infmi {
    float: left;
    z-index: 100;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 100%;
    width: 50%; /*chỉ màn nhỏ slider rộng 100%*/
}
.fnc-slide__inner {
    position: relative!important;
    height: 100%;
    width: 100%;
    background-size: contain;
}
.fnc-nav__control {
    width: 143px !important;
    height: 44px !important;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 0.5rem;
}
.xfe-quan-ly.web_mangament {
    width: 21rem !important;
}
 
.xfe-solution.web_lib {
    width: 21rem !important;
    margin-left: -0.6rem !important;
    margin-right: 9.4rem !important;
    margin-bottom: 0.4rem !important;
    margin-top: 0rem !important;
}
.kimike {
    margin-left: 6.2rem !important;
    margin-right: -4.5rem !important;
    margin-top: -11vh !important;
    height: 42vh !important;
}
.xfe-layer-169 {
    width: 100% !important;
    margin-top: 0vh !important;
    margin-left: 0vh !important;
}
/**/
.demo-cont {
    margin-top: 16vh !important;
    height: 42vh !important;
    margin-right: -8rem !important;
    margin-left: -3.5rem !important;
    overflow: hidden !important;
}
.fnc-slider {
     height:  42vh !important;
}
 
.pb-70 {
    padding-bottom: 2vh !important;
}
/*hết slider tùy chỉnh*/
}
 
@media only screen and (min-width: 767px) and (max-width: 1023px) {
/*.fnc-nav__control {
    width: 114px;
    height: 35px;
    font-size: 13px;
}
.fnc-slider {
    height: 48.5vh;
}
.demo-cont {
    height: 48.5vh;
    margin-left: -4rem;
    margin-right: 0vh;
}
.pt-100 {
    padding-top: 4vh;
}
.xfe-quan-ly.web_mangament {
    width: 21rem;
}
.xfe-solution.web_lib {
    width: 21rem;
    margin-left: -0.8rem;
    margin-bottom: 0.4rem;
}
.xfe-layer-169 {
    width: 103%;
}*/
.infmi {
    float: left;
    z-index: 100;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 100%;
    width: 100%!important; /*chỉ màn nhỏ slider rộng 100%*/
}
.fnc-slide__inner {
    position: relative!important;
    height: 100%;
    width: 100%;
    background-size: cover;
}
.fnc-nav__control {
    width: 143px !important;
    height: 44px !important;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 0.5rem;
}
.xfe-quan-ly.web_mangament {
    width: 21rem !important;
}
 
.xfe-solution.web_lib {
    width: 21rem !important;
    margin-left: -0.6rem !important;
    margin-right: 9.4rem !important;
    margin-bottom: 0.4rem !important;
    margin-top: 0rem !important;
}
.kimike {
    margin-left: 6.2rem !important;
    margin-right: -4.5rem !important;
    margin-top: -11vh !important;
    height: 42vh !important;
}
.xfe-layer-169 {
    width: 100% !important;
    margin-top: 0vh !important;
    margin-left: 0vh !important;
}
/**/
.demo-cont {
    margin-top: 47vh !important;
    height: 56vh !important;
    margin-left: 5.5rem !important;
    margin-right: 8.2vh !important;
    overflow: hidden !important;
}
.fnc-slider {
     height:  42vh !important;
}
 
.pb-70 {
    padding-bottom: 2vh !important;
}
}

Để slider chạy được thì cần khai báo CSS và JS ở trong function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function enqueue_coccoc_scripts_and_styles() {
  // Enqueue dynamic.css
  wp_enqueue_style('dynamic-css', get_stylesheet_directory_uri() . '/livestyle/css/dynamic.css');
// wp_enqueue_style('slider-css', get_stylesheet_directory_uri() . '/livestyle/css/slider.css');
  //wp_enqueue_style('service-css', get_stylesheet_directory_uri() . '/livestyle/css/owl.carousel.min.css');
 
  // Enqueue coccoc.js
  wp_enqueue_script('coccoc-js', get_stylesheet_directory_uri() . '/livestyle/js/coccoc.js', array('jquery'), '', true);
// wp_enqueue_script('slider-js', get_stylesheet_directory_uri() . '/livestyle/js/slider.js', array('jquery'), '', true);
  
  //wp_enqueue_script('service-js', get_stylesheet_directory_uri() . '/livestyle/js/owl.carousel.min.js', array('jquery'), '', true);
  //wp_enqueue_script('dich-vu-home', get_stylesheet_directory_uri() . '/livestyle/js/dich-vu-home.js', array('jquery'), '', true);
  
  // Check if it's the home page
  if (is_front_page()) {
    // Enqueue slider.css
    wp_enqueue_style('slider-css', get_stylesheet_directory_uri() . '/livestyle/css/slider.css');
 
    // Enqueue slider.js
    wp_enqueue_script('slider-js', get_stylesheet_directory_uri() . '/livestyle/js/slider.js', array('jquery'), '', true);
  }
}
add_action('wp_enqueue_scripts', 'enqueue_coccoc_scripts_and_styles');

Chi tiết file css 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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
.fnc {
    /* you can add color names and their values here and then simply add classes like .m--blend-$colorName to .fnc-slide to apply specific color for mask blend mode
    
     .demo-cont {
    overflow: hidden;
    position: relative;
    top: 27vh;
    height: 50vh;
    perspective: 1500px;
    background: #000;
    margin-left: -2rem;
    margin-right: 0vh;
}
.fnc-slider {
     overflow: hidden;
     box-sizing: border-box;
     position: relative;
     height:  50vh;
}
    
    */
}
 
.example-slider {
     z-index: 2;
     transform: translate3d(0, 0, 0);
     transition: transform 0.7s;
}
/**/
.example-slider .fnc-slide-1 .fnc-slide__inner, .example-slider .fnc-slide-1 .fnc-slide__mask-inner {
     background-image: url('https://ngoinhaweb.com/wp-content/uploads/2023/05/20230517113709311.jpg');
}
.example-slider .fnc-slide-2 .fnc-slide__inner, .example-slider .fnc-slide-2 .fnc-slide__mask-inner {
     background-image: url('https://ngoinhaweb.com/wp-content/uploads/2023/05/20230520025844284.jpg');
}
.example-slider .fnc-slide-3 .fnc-slide__inner, .example-slider .fnc-slide-3 .fnc-slide__mask-inner {
     background-image: url('https://ngoinhaweb.com/wp-content/uploads/2023/05/20230519121138280.jpg');
}
.example-slider .fnc-slide-3 .fnc-slide__inner:before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.1);
}
.example-slider .fnc-slide-4 .fnc-slide__inner, .example-slider .fnc-slide-4 .fnc-slide__mask-inner {
     background-image: url('https://ngoinhaweb.com/wp-content/uploads/2023/05/20230515120036996.jpg');
}
.example-slider .fnc-slide-4 .fnc-slide__inner:before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.2);
}
.example-slider .fnc-slide-5 .fnc-slide__inner, .example-slider .fnc-slide-5 .fnc-slide__mask-inner {
     background-image: url('https://ngoinhaweb.com/wp-content/uploads/2023/05/20230520025844284.jpg');
}
.example-slider .fnc-slide__heading, .example-slider .fnc-slide__action-btn, .example-slider .fnc-nav__control {
     font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
/**/
.fnc-slider *, .fnc-slider *:before, .fnc-slider *:after {
     box-sizing: border-box;
}
.fnc-slider__slides {
     position: relative;
     height: 100%;
     transition: transform 1s 0.6666666667s;
}
.fnc-slider .m--blend-dark .fnc-slide__inner {
     background-color: #8a8a8a;
}
 
.fnc-slider .m--navbg-dark {
     background-color: #575757;
}
.fnc-slider .m--blend-green .fnc-slide__inner {
     background-color: #6d9b98;
}
 
.fnc-slider .m--navbg-green {
     background-color: #42605e;
}
.fnc-slider .m--blend-red .fnc-slide__inner {
     background-color: #ea2329;
}
 
.fnc-slider .m--navbg-red {
     background-color: #990e13;
}
.fnc-slider .m--blend-blue .fnc-slide__inner {
     background-color: #59aecb;
}
 
.fnc-slider .m--navbg-blue {
     background-color: #2d7791;
}
.fnc-slide {
     overflow: hidden;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     transform: translate3d(0, 0, 0);
}
.fnc-slide.m--before-sliding {
     z-index: 2 !important;
     transform: translate3d(100%, 0, 0);
}
.fnc-slide.m--active-slide {
     z-index: 1;
     transition: transform 1s 0.6666666667s ease-in-out;
     transform: translate3d(0, 0, 0);
}
.fnc-slide__inner {
     position: relative;
     height: 100%;
     background-size: cover;
     background-position: center top;
     transform: translate3d(0, 0, 0);
}
.m--global-blending-active .fnc-slide__inner, .m--blend-bg-active .fnc-slide__inner {
     background-blend-mode: luminosity;
}
.m--before-sliding .fnc-slide__inner {
     transform: translate3d(-100%, 0, 0);
}
.m--active-slide .fnc-slide__inner {
     transition: transform 1s 0.6666666667s ease-in-out;
     transform: translate3d(0, 0, 0);
}
 
.fnc-slide__content {
     z-index: 2;
     position: absolute;
     left: 40%;
     top: 40%;
}
 
.fnc-nav {
     z-index: 5;
     position: absolute;
     right: 0;
     bottom: 0;
}
.fnc-nav__bgs {
     z-index: -1;
     overflow: hidden;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
}
.fnc-nav__bg {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
}
.fnc-nav__bg.m--nav-bg-before {
     z-index: 2 !important;
     transform: translateX(100%);
}
.fnc-nav__bg.m--active-nav-bg {
     z-index: 1;
     transition: transform 1s 0.6666666667s;
     transform: translateX(0);
}
.fnc-nav__controls {
     font-size: 0;
}
.fnc-nav__control {
     overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 146px;
    height: 35px;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    background: transparent;
    border: none;
    padding-left: 0.2rem;
    outline: none;
    cursor: pointer;
}
.fnc-nav__control.m--active-control {
     background: #1f2833;
}
.fnc-nav__control-progress {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 2px;
     background: #fff;
     transform-origin: 0 50%;
     transform: scaleX(0);
     transition-timing-function: linear !important;
}
.m--with-autosliding .m--active-control .fnc-nav__control-progress {
     transform: scaleX(1);
}
.m--prev-control .fnc-nav__control-progress {
     transform: translateX(100%);
     transition: transform 0.5s !important;
}
.m--reset-progress .fnc-nav__control-progress {
     transform: scaleX(0);
     transition: transform 0s 0s !important;
}
.m--autosliding-blocked .fnc-nav__control-progress {
     transition: all 0s 0s !important;
     transform: scaleX(0) !important;
}

Chi tiết file js của 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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
(function() {
 
  var $$ = function(selector, context) {
    var context = context || document;
    var elements = context.querySelectorAll(selector);
    return [].slice.call(elements);
  };
 
  function _fncSliderInit($slider, options) {
    var prefix = ".fnc-";
 
    var $slider = $slider;
    var $slidesCont = $slider.querySelector(prefix + "slider__slides");
    var $slides = $$(prefix + "slide", $slider);
    var $controls = $$(prefix + "nav__control", $slider);
    var $controlsBgs = $$(prefix + "nav__bg", $slider);
    var $progressAS = $$(prefix + "nav__control-progress", $slider);
 
    var numOfSlides = $slides.length;
    var curSlide = 1;
    var sliding = false;
    var slidingAT = +parseFloat(getComputedStyle($slidesCont)["transition-duration"]) * 1000;
    var slidingDelay = +parseFloat(getComputedStyle($slidesCont)["transition-delay"]) * 1000;
 
    var autoSlidingActive = false;
    var autoSlidingTO;
    var autoSlidingDelay = 5000; // default autosliding delay value
    var autoSlidingBlocked = false;
 
    var $activeSlide;
    var $activeControlsBg;
    var $prevControl;
 
    function setIDs() {
      $slides.forEach(function($slide, index) {
        $slide.classList.add("fnc-slide-" + (index + 1));
      });
 
      $controls.forEach(function($control, index) {
        $control.setAttribute("data-slide", index + 1);
        $control.classList.add("fnc-nav__control-" + (index + 1));
      });
 
      $controlsBgs.forEach(function($bg, index) {
        $bg.classList.add("fnc-nav__bg-" + (index + 1));
      });
    };
 
    setIDs();
 
    function afterSlidingHandler() {
      $slider.querySelector(".m--previous-slide").classList.remove("m--active-slide", "m--previous-slide");
      $slider.querySelector(".m--previous-nav-bg").classList.remove("m--active-nav-bg", "m--previous-nav-bg");
 
      $activeSlide.classList.remove("m--before-sliding");
      $activeControlsBg.classList.remove("m--nav-bg-before");
      $prevControl.classList.remove("m--prev-control");
      $prevControl.classList.add("m--reset-progress");
      var triggerLayout = $prevControl.offsetTop;
      $prevControl.classList.remove("m--reset-progress");
 
      sliding = false;
      var layoutTrigger = $slider.offsetTop;
 
      if (autoSlidingActive && !autoSlidingBlocked) {
        setAutoslidingTO();
      }
    };
 
    function performSliding(slideID) {
      if (sliding) return;
      sliding = true;
      window.clearTimeout(autoSlidingTO);
      curSlide = slideID;
 
      $prevControl = $slider.querySelector(".m--active-control");
      $prevControl.classList.remove("m--active-control");
      $prevControl.classList.add("m--prev-control");
      $slider.querySelector(prefix + "nav__control-" + slideID).classList.add("m--active-control");
 
      $activeSlide = $slider.querySelector(prefix + "slide-" + slideID);
      $activeControlsBg = $slider.querySelector(prefix + "nav__bg-" + slideID);
 
      $slider.querySelector(".m--active-slide").classList.add("m--previous-slide");
      $slider.querySelector(".m--active-nav-bg").classList.add("m--previous-nav-bg");
 
      $activeSlide.classList.add("m--before-sliding");
      $activeControlsBg.classList.add("m--nav-bg-before");
 
      var layoutTrigger = $activeSlide.offsetTop;
 
      $activeSlide.classList.add("m--active-slide");
      $activeControlsBg.classList.add("m--active-nav-bg");
 
      setTimeout(afterSlidingHandler, slidingAT + slidingDelay);
    };
 
 
 
    function controlClickHandler() {
      if (sliding) return;
      if (this.classList.contains("m--active-control")) return;
      if (options.blockASafterClick) {
        autoSlidingBlocked = true;
        $slider.classList.add("m--autosliding-blocked");
      }
 
      var slideID = +this.getAttribute("data-slide");
 
      performSliding(slideID);
    };
 
    $controls.forEach(function($control) {
      $control.addEventListener("click", controlClickHandler);
    });
 
    function setAutoslidingTO() {
      window.clearTimeout(autoSlidingTO);
      var delay = +options.autoSlidingDelay || autoSlidingDelay;
      curSlide++;
      if (curSlide > numOfSlides) curSlide = 1;
 
      autoSlidingTO = setTimeout(function() {
        performSliding(curSlide);
      }, delay);
    };
 
    if (options.autoSliding || +options.autoSlidingDelay > 0) {
      if (options.autoSliding === false) return;
      
      autoSlidingActive = true;
      setAutoslidingTO();
      
      $slider.classList.add("m--with-autosliding");
      var triggerLayout = $slider.offsetTop;
      
      var delay = +options.autoSlidingDelay || autoSlidingDelay;
      delay += slidingDelay + slidingAT;
      
      $progressAS.forEach(function($progress) {
        $progress.style.transition = "transform " + (delay / 1000) + "s";
      });
    }
    
    $slider.querySelector(".fnc-nav__control:first-child").classList.add("m--active-control");
 
  };
 
  var fncSlider = function(sliderSelector, options) {
    var $sliders = $$(sliderSelector);
 
    $sliders.forEach(function($slider) {
      _fncSliderInit($slider, options);
    });
  };
 
  window.fncSlider = fncSlider;
}());
 
/* not part of the slider scripts */
 
/* Slider initialization
options:
autoSliding - boolean
autoSlidingDelay - delay in ms. If audoSliding is on and no value provided, default value is 5000
blockASafterClick - boolean. If user clicked any sliding control, autosliding won't start again
*/
fncSlider(".example-slider", {autoSlidingDelay: 4000});
 
var $demoCont = document.querySelector(".demo-cont");
 
[].slice.call(document.querySelectorAll(".fnc-slide__action-btn")).forEach(function($btn) {
  $btn.addEventListener("click", function() {
    $demoCont.classList.toggle("credits-active");
  });
});
 
document.querySelector(".demo-cont__credits-close").addEventListener("click", function() {
  $demoCont.classList.remove("credits-active");
});
 
document.querySelector(".js-activate-global-blending").addEventListener("click", function() {
  document.querySelector(".example-slider").classList.toggle("m--global-blending-active");
});

 

URL xem thêm https://codepen.io/ajjujaiswal/pen/rKLdLz

Chúc các bạn thành công.

Previous Post

Code meta filed chọn màu nền cho nhãn truyện tranh
Mai Linh

Mai Linh

chuyên wordpress, function, php, code, ...

No Result
View All Result

Bài viết mới

  • Một mẫu slider đẹp
  • Cách tạo vị trí menu wordpress
  • Khai báo custom post type trong wordpress
  • Sửa lỗi Because app requires SDK version >=2.15.1 <3.0.0 version solving failed
  • Cách đặt nhân vật tiếng trung phồn thể cho game Jx3 Quốc tế

Phản hồi gần đây

    Chuyên mục

    • Bảo mật website
    • Bẻ khóa theme plugin
    • Cắt giấy
    • Chụp ảnh
    • Chụp ảnh sản phẩm
    • Code tiện ích cho website
    • Code trang trí mở rộng
    • Công cụ Tools
    • Công nghệ
    • CSS
    • Digital Marketing
    • Function
    • Game Jx2
    • Game Jx3
    • Game Online
    • Gian hàng online
    • Hosting
    • HTML
    • Instagram
    • Kirigami
    • Kirigami 0 độ
    • Kirigami 180 độ
    • Kirigami 360 độ
    • Kirigami 90 độ
    • Mã độc hại website
    • Marketing Online
    • Máy chủ ảo VPS
    • Origami
    • Paper Craft
    • Phần mềm máy tính cơ bản
    • Php
    • Quilling
    • SEO
    • SEO Offpage
    • SEO Onpage
    • Share theme plugin
    • Shopee
    • Sửa ảnh
    • Tăng doanh thu bán hàng
    • Tên miền
    • Thông tin thế giới của tôi
    • Tối ưu tốc độ web
    • Windows
    • Wordpress

    Recent News

    Một mẫu slider đẹp

    29 Tháng Sáu, 2023

    Cách tạo vị trí menu wordpress

    20 Tháng Tư, 2023
    • Giới thiệu
    • Quảng cáo
    • Bảo mật
    • Liên hệ

    © 2019 Thế Giới Của Tôi - Thiết kế & xây dựng bởi Ngôi Nhà Web.vn.

    No Result
    View All Result
    • Thế giới của tôi
    • Công nghệ
    • Nghệ thuật
    • Giải trí
    • Chế tạo Diy
    • Video
    • Phòng trưng bày
    • Quảng cáo

    © 2019 Thế Giới Của Tôi - Thiết kế & xây dựng bởi Ngôi Nhà Web.vn.