Advertisement
victorumeh

my page slider

Feb 14th, 2022
132
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.68 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Responsive Image Slider With Next And Previous Buttons</title>
  7.     <link rel="stylesheet" href="style.css" />
  8.     <link
  9.      rel="stylesheet"
  10.      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
  11.    />
  12.   </head>
  13.   <body>
  14.     <div class="slider">
  15.       <div class="slide active">
  16.         <img src="image/sneakers (1).jpg" alt="" />
  17.         <div class="info">
  18.           <h2>Winter Mountains</h2>
  19.           <p>
  20.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  21.             eiusmod tempor incididunt ut labore et dolore magna aliqua.
  22.           </p>
  23.         </div>
  24.       </div>
  25.       <div class="slide">
  26.         <img src="image/sneakers (2).jpg" alt="" />
  27.         <div class="info">
  28.           <h2>Tropical Desert</h2>
  29.           <p>
  30.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  31.             eiusmod tempor incididunt ut labore et dolore magna aliqua.
  32.           </p>
  33.         </div>
  34.       </div>
  35.       <div class="slide">
  36.         <img src="image/sneakers (3).jpg" alt="" />
  37.         <div class="info">
  38.           <h2>Steaming Volcanoes</h2>
  39.           <p>
  40.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  41.             eiusmod tempor incididunt ut labore et dolore magna aliqua.
  42.           </p>
  43.         </div>
  44.       </div>
  45.       <div class="slide">
  46.         <img src="image/sneakers (4).jpg" alt="" />
  47.         <div class="info">
  48.           <h2>Mountain River</h2>
  49.           <p>
  50.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  51.             eiusmod tempor incididunt ut labore et dolore magna aliqua.
  52.           </p>
  53.         </div>
  54.       </div>
  55.       <div class="slide">
  56.         <img src="image/sneakers (5).jpg" alt="" />
  57.         <div class="info">
  58.           <h2>Egypt Pyramids</h2>
  59.           <p>
  60.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  61.             eiusmod tempor incididunt ut labore et dolore magna aliqua.
  62.           </p>
  63.         </div>
  64.       </div>
  65.       <div class="navigation">
  66.         <i class="fas fa-chevron-left prev-btn"></i>
  67.         <i class="fas fa-chevron-right next-btn"></i>
  68.       </div>
  69.       <div class="navigation-visibility">
  70.         <div class="slide-icon active"></div>
  71.         <div class="slide-icon"></div>
  72.         <div class="slide-icon"></div>
  73.         <div class="slide-icon"></div>
  74.         <div class="slide-icon"></div>
  75.       </div>
  76.     </div>
  77.     <script src="script.js"></script>
  78.   </body>
  79. </html>
  80.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement