API tools faq
paste
asimryu

slider with pointers

asimryu
Dec 19th, 2019
282
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.12 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>slider</title>
  6.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
  7.     <style>
  8.         .wrap { width: 600px; margin: 0 auto; }
  9.         h2 { text-align: center; }
  10.         .slider { width: 100%; height: 300px; overflow: hidden; margin-bottom: 30px; position: relative;}
  11.         .slider img { width: 100%; height: 300px; position: absolute; top: 0; left: 0; }
  12.         .slider div { width: 100%; height: 20px; position: absolute; left: 0; bottom: 20px; text-align: center; }
  13.         .slider div span { color: white; cursor: pointer; }
  14.         .slider div span.active { color: red; }
  15.     </style>
  16. </head>
  17. <body>
  18.  
  19.     <div class="wrap">
  20.         <h2>Slider: Pointers</h2>
  21.         <p>
  22.             <button onclick="playSlide('left')"><i class="fas fa-chevron-left"></i></button>
  23.             <button onclick="playSlide('right')"><i class="fas fa-chevron-right"></i></button>
  24.             <button onclick="playSlide('up')"><i class="fas fa-chevron-up"></i></button>
  25.             <button onclick="playSlide('down')"><i class="fas fa-chevron-down"></i></button>
  26.         </p>
  27.         <div class="slider">
  28.             <img src="https://placeimg.com/600/300/nature" alt="nature">
  29.             <img src="https://placeimg.com/600/300/animals" alt="nature">
  30.             <img src="https://placeimg.com/600/300/arch" alt="arch">
  31.             <img src="https://placeimg.com/600/300/people" alt="people">
  32.             <img src="https://placeimg.com/600/300/tech" alt="tech">
  33.             <div></div>
  34.         </div>
  35.     </div>
  36.  
  37.     <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
  38.     <script>
  39.         var slide = $(".slider img");
  40.         var sno = 0;
  41.  
  42.         function showPointers(){
  43.             var pointers = "";
  44.             if( slide.length > 0 ) {
  45.                 for(var i=0; i<slide.length; i++ ) {
  46.                     if( i == sno ) pointers += "<span class='active'>●</span>";
  47.                     else  pointers += "<span onclick='changeSlide(" + i + ")'>●</span>";                 
  48.                 }
  49.             }
  50.             $(".slider div").html(pointers);
  51.         }
  52.         showPointers();
  53.  
  54.         function playSlide(dir){
  55.             var left_start = null, left_end = null, top_start = null, top_end = null;
  56.             if( dir == "right" ) {
  57.                 left_start = "-100%";
  58.                 left_end = "100%";
  59.                 top_start = 0;
  60.                 top_end = 0;
  61.             } else if ( dir == "left" ) {
  62.                 left_start = "100%";
  63.                 left_end = "-100%";
  64.                 top_start = 0;
  65.                 top_end = 0;
  66.             } else if ( dir == "up" ) {
  67.                 left_start = 0;
  68.                 left_end = 0;
  69.                 top_start = "100%";
  70.                 top_end = "-100%";
  71.             } else if ( dir == "down" ) {
  72.                 left_start = 0;
  73.                 left_end = 0;
  74.                 top_start = "-100%";
  75.                 top_end = "100%";
  76.             } else {
  77.                 return;
  78.             }
  79.             if( slide.length == 0 ) return;
  80.             if( $(slide[sno]).is(":animated") ) return;
  81.             $(slide[sno]).siblings("img").css({left: left_start, top: top_start});
  82.             $(slide[sno]).animate({left: left_end, top: top_end},1000);
  83.             sno++;
  84.             if( sno >= slide.length ) sno = 0;
  85.             $(slide[sno]).animate({left: 0, top: 0},1000);
  86.             showPointers();
  87.         }
  88.  
  89.         function changeSlide(pno) {
  90.             sno = pno - 1;
  91.             if( sno < 0 ) sno = slide.length - 1;
  92.             $(slide[sno]).css({left: 0, top: 0});
  93.             $(slide[sno]).siblings("img").css({left: "-100%", top: 0});
  94.             playSlide('right');
  95.         }
  96.  
  97.     </script>
  98. </body>
  99. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!