cách thêm hình thu nhỏ vào các dấu chấm của thanh trượt trơn trượt đề cập đến trang trình bày hiện tại

Tôi hiện đang làm việc trên một dự án mới yêu cầu thanh trượt. Tôi đã thực hiện JS trơn cho một trong những dự án của tôi.cách thêm hình thu nhỏ vào các dấu chấm của thanh trượt trơn trượt đề cập đến trang trình bày hiện tại

Bây giờ tôi cần phải thêm hình thu nhỏ sẽ xuất hiện khi chúng ta di chấm đó sẽ liên kết đến thanh trượt

Ví dụ, bấm vào ngón tay cái đầu tiên và thanh trượt sẽ tiến tới slide đầu tiên, .... click vào thứ ba và trượt đến trang chiếu thứ ba.

HTML

<html> 
     <head> 
     <title>My Now Amazing Webpage</title> 
     <link rel="stylesheet" type="text/css" href="slick/slick.css"/> 
     <link rel="stylesheet" type="text/css" href="slick/style.css"/> 
     </head> 
    <body> 
<!-- THis is the slider code --> 
     <div class="center"> 
      <div><img alt="slide 2" src="images/img1.jpg"></div> 
      <div><img alt="slide 2" src="images/img2.jpg"></div> 
      <div><img alt="slide 2" src="images/img3.jpg"></div> 
      <div><img alt="slide 2" src="images/img4.jpg"></div> 
      <div><img alt="slide 2" src="images/img5.jpg"></div> 
     </div> 

     <script type="text/javascript" src="slick/jquery-1.11.0.min.js"></script> 
     <script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script> 
     <script type="text/javascript" src="slick/slick.min.js"></script> 

     <script type="text/javascript"> 
     $('.center').slick({ 

      centerMode: true, 
      centerPadding: '60px', 
      slidesToShow: 1, 
      dots: !0, /* It is for the navigation dots */ 
      draggable: !1, 
      responsive: [ 
      { 
       breakpoint: 768, 
       settings: { 
        arrows: false, 
        centerMode: true, 
        centerPadding: '40px', 
        slidesToShow: 1 
       } 
      }, 
      { 
       breakpoint: 480, 
       settings: { 
        arrows: false, 
        centerMode: true, 
        centerPadding: '40px', 
        slidesToShow: 1 
       } 
      } 
      ] 
     }); 
     </script> 
    </body> 
</html>

Nguồn

2014-07-25 KKGupta

Tôi không biết chính xác cách thức, nhưng những gì bạn có thể làm là thêm một thuộc tính onmouseover riêng biệt vào mỗi dấu chấm, sẽ gọi hàm javascript cần thiết. tọa độ của con trỏ chuột và hiển thị hình thu nhỏ tại tọa độ X, Y. – orb

xem liên kết sau. Rất hữu ích khi triển khai khái niệm trơn tru http://kenwheeler.github.io/slick/ – Sathiyaraj

Bạn có thể thay thế dấu chấm với hình thu nhỏ tùy chỉnh. Bạn sẽ cần phải thêm hình thu nhỏ ở đâu đó (ví dụ, trong một div ẩn bên trong wrapper trượt hình ảnh Xem mã để tham khảo:.

$('.slideme').slick({ 
    dots: true, 
    customPaging: function(slider, i) { 
    // this example would render "tabs" with titles 
    return '<button class="tab">' + $(slider.$slides[i]).find('.slide-title').text() + '</button>'; 
    }, 
});

Bạn cũng sẽ cần phải tinh chỉnh lên mẹ đẻ pager Slick css để loại bỏ dấu chấm và thêm nhiều không gian và phong cách cho hình thu nhỏ của bạn

Nguồn

2014-08-03 18:34:16 lifecoder

I không nghĩ rằng bạn cần phải thực sự làm bất cứ điều gì để "loại bỏ các dấu chấm", xem một vài ví dụ: https://jsfiddle.net/oL5bjae1/ và https://jsfiddle.net/simeydotme/9nm4ctv9/ –

Im sử dụng bên trong băng chuyền động, khi hình ảnh trang trình bày bị xóa, hình thu nhỏ cũ sẽ không bị xóa. Làm cách nào để "xóa" phân trang tùy chỉnh cũ khi tạo phân trang tùy chỉnh mới? hiện đang phải đối mặt với sự tích lũy khi các trang trình bày cũ bị xóa, hình thu nhỏ của chúng không phải là – Prefix

cách thêm hình thu nhỏ vào các dấu chấm của thanh trượt trơn trượt đề cập đến trang trình bày hiện tại

Trả lời

Các vấn đề liên quan