Ba chấm html

(CTTĐTBP) - Sáng 11/10, đồng chí Trần Tuyết Minh - Phó Chủ tịch UBND tỉnh, Chủ tịch Hội đồng Sáng kiến ​​tỉnh chủ trì hội đồng xét công nhận sáng kiến ​​cấp tỉnh đợt 3 năm 2022

 

Ba chấm html
Thành viên Hội đồng tham gia đóng góp ý kiến
 

Tính đến ngày 11/7, Tổ thư ký Hội đồng Sáng kiến ​​tỉnh đã tiếp nhận, tổng hợp được 89 hồ sơ Sáng kiến ​​từ 12 đơn vị trên địa bàn tỉnh đề nghị xem xét công nhận. Qua xem xét, sàng lọc, Tổ thư ký đã chọn được 54 hồ sơ trình Hội đồng Sáng kiến ​​tỉnh xem xét trong đợt 3 này. Trong đó, có 28 hồ sơ đề nghị nghị quyết Hội đồng xem xét bỏ phiếu thông qua và 26 hồ sơ xem xét đề nghị tác giả bổ sung, hoàn thiện theo quy định. 35 hồ sơ còn lại sẽ trình Hội đồng xét duyệt trong đợt 4

Sau khi các thành viên Tổ chuyên gia và Hội đồng Sáng kiến ​​tỉnh phân tích, đánh giá kỹ lưỡng từng hồ sơ sáng kiến, Hội đồng hệ thống nhất tiến hành bỏ phiếu kín đối với các sáng kiến ​​đề nghị công nhận đạt tiêu chuẩn. Kết quả có 5 sáng kiến ​​được công nhận, 5 sáng kiến ​​được Hội đồng ý kiến ​​giữ lại để tiếp tục bổ sung, hoàn thiện hồ sơ xem xét trong đợt tiếp theo. /

Nếu các bạn hay lên các trang web thường mạng điện tử bán hàng, doanh nghiệp. thì các bạn hay thấy phần đầu trang web thường có một khoảng hiển thị hình ảnh, video, gif được thay đổi liên tục, đây được gọi là những thanh trượt này. Việc sử dụng thanh trượt có tác dụng rất lớn là thu hút sự chú ý của khách hàng. Người quản trị trang web thường hay đặt các nội dung quan trọng trong một thanh trượt ngay đầu trang web giúp người dùng nhanh chóng nhìn thấy điểm nổi bật của trang web

Slider thì thường thay đổi trong một khoảng thời gian định trước (thường là 4 đến 5s). Người dùng cũng có thể thao tác trực tiếp trên trang web là nhấn chuột hoặc vuốt để xem các slide tiếp theo hoặc prev về slide trước đó

Đối đầu với một lập trình viên thì chắc không còn xa lạ gì với chức năng này nhỉ. Hôm nay thì mình sẽ hướng dẫn vài cách để tạo slide nhanh, đơn giản nhé

Ba chấm html

2. Những cách tạo thanh trượt

2. 1 Use bootstrap

Cách 1. Ở đây mình muốn giới thiệu với các bạn slider mà bootstrap hỗ trợ chúng ta

Các bạn muốn sử dụng slide có sẵn của bootstrap thì các bạn cần lên trang https. //getbootstrap. com tải boostrap về hoặc có thể dùng link trực tiếp trên bootstrap của trang để lấy js, css dán vào trang web là chúng ta có thể dùng slider mà ko phải code css hay js nhé

  <div class="bd-example">
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="image1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="image2.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="image3.jpg" class="d-block w-100" alt="...">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

Ở đây mình giải thích sơ qua các phần để hiển thị 1 thanh trượt

  • carousel-inner đây là phần bao bọc các div chứa mục hình ảnh, chú thích từng ảnh mà chúng tôi muốn hiển thị
  • carousel-indicators đây là phần chứa các liên kết điều hướng mà chúng ta muốn kích thích trình chiếu hình ảnh muốn đến. Thông thường ở đây có các biểu tượng chấm tròn hoặc biểu tượng chỉ số trượt
  • carousel-control-prev. carousel-control-next đây là phần chứa liên kết trước hoặc tiếp theo qua lại các trang chiếu

Ngoài ra bạn muốn thêm chú thích cho mỗi hình ảnh thì chúng ta thêm một div có nội dung vào sau mỗi thẻ img

 <div class="carousel-caption d-none d-md-block">
    <h5>Tiêu đề caption</h5>
    <p>Nội dung caption</p>
 </div>

Rất đơn giản phải không nào, tiếp tục đến cách thứ 2 mình sẽ hướng dẫn các bạn sử dụng css, js thuần túy để code ra một thanh trượt, ở cách này yêu cầu các bạn có kiến ​​thức cơ bản về html,css,js nhé. Không khó đâu hãy tiếp tục theo dõi nhé

2. 2 Sử dụng html, css, js thuần túy

Ở cách thứ 2 chúng ta tự code ra slider run, các bạn tạo cho mình 3 file

 <div class="carousel-caption d-none d-md-block">
    <h5>Tiêu đề caption</h5>
    <p>Nội dung caption</p>
 </div>
6,
 <div class="carousel-caption d-none d-md-block">
    <h5>Tiêu đề caption</h5>
    <p>Nội dung caption</p>
 </div>
7,
 <div class="carousel-caption d-none d-md-block">
    <h5>Tiêu đề caption</h5>
    <p>Nội dung caption</p>
 </div>
8

  • File
     <div class="carousel-caption d-none d-md-block">
        <h5>Tiêu đề caption</h5>
        <p>Nội dung caption</p>
     </div>
    
    7 các bạn sử dụng css để căn chỉnh kích thước thanh trượt cũng như vị trí các ảnh, nút next, prev
* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif; margin:0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
  • File
     <div class="carousel-caption d-none d-md-block">
        <h5>Tiêu đề caption</h5>
        <p>Nội dung caption</p>
     </div>
    
    6 nơi chứa code html tĩnh, ở đây các bạn dẫn link hình ảnh đến hình ảnh
________số 8
  • Tệp
     <div class="carousel-caption d-none d-md-block">
        <h5>Tiêu đề caption</h5>
        <p>Nội dung caption</p>
     </div>
    
    8 nơi chúng ta tạo ra các sự kiện ảnh tiếp theo, ảnh trước
 <div class="carousel-caption d-none d-md-block">
    <h5>Tiêu đề caption</h5>
    <p>Nội dung caption</p>
 </div>
0

Ok rất dài dòng đúng không bạn. Với cách này, các bạn có thể dễ dàng tạo thanh trượt, hiệu ứng theo ý muốn của mình

Ba chấm html

2. 3 Sử dụng gem

Tại sao ở đây mình lại nói dùng gem nhỉ? . Mình khuyến khích các bạn là chúng ta nên thử sức với ngôn ngữ này nhé, nó rất dễ học tập, sử dụng. Khi chúng ta muốn thực hiện một chức năng nào đó thì framework của Ruby là Ruby on Rails có rất nhiều gem hỗ trợ khi chúng ta muốn lập trình

Ví dụ như một số đá quý hỗ trợ như. Phân trang(gem "kaminari"), đăng nhập(gem "devise", "omniauth", "omniauth-google-oauth2"), phân quyền(gem "cancancan"). Còn vô vàn những gem khác nhé, bài hôm nay mình muốn chia sẻ về một gem hỗ trợ tạo slide là gem "lex-slider-rails"

Muốn sử dụng gem này thì project ruby ​​on rails của các bạn add gem bên dưới và chạy lệnh bundle install để cài đặt gem

 <div class="carousel-caption d-none d-md-block">
    <h5>Tiêu đề caption</h5>
    <p>Nội dung caption</p>
 </div>
1

Để

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif; margin:0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
2 hoạt động được thì chúng ta cũng cần phải chạy các
* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif; margin:0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
3,
* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif; margin:0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
4 để add bootstrap và jquery vào project nhé

At the directory

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif; margin:0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
5 you add for mình line
* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif; margin:0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
6

Ở thư mục

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif; margin:0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
7 các bạn thêm cho mình dòng
* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif; margin:0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
8 và đoạn code js như ở dưới nhé

 <div class="carousel-caption d-none d-md-block">
    <h5>Tiêu đề caption</h5>
    <p>Nội dung caption</p>
 </div>
9

Ok đến đây cơ bản đã hoàn tất các bước cài đặt rùi các bạn muốn sử dụng thanh trượt ở đâu thì chỉ cần thêm đoạn mã html như ở dưới là chúng ta có 1 thanh trượt để sử dụng

 <div class="carousel-caption d-none d-md-block">
    <h5>Tiêu đề caption</h5>
    <p>Nội dung caption</p>
 </div>
0

Kết quả của 3 cách trên đều là chúng ta tạo ra một thanh trượt hoạt động. Rất đơn giản phải không có cái nào và dưới đây là thành quả của mình