revolution slider html
revolution slider html
xxxxxxxxxx<!DOCTYPE html><html><head> <title>Revolution Slider Demo</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/revolution-slider/css/settings.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/revolution-slider/css/layers.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/revolution-slider/css/navigation.css"></head><body> <div class="rev_slider_wrapper"> <div class="rev_slider"> <ul> <!-- Slide 1 --> <li data-transition="fade"> <img src="path/to/slide1-image.jpg" alt="Slide 1"> <div class="tp-caption tp-caption-title" data-x="left" data-hoffset="20" data-y="center" data-voffset="-30" data-start="1000" data-transform_in="x:50px;opacity:0;s:900;">Slide 1 Title</div> <div class="tp-caption tp-caption-description" data-x="left" data-hoffset="20" data-y="center" data-voffset="30" data-start="1500" data-transform_in="x:50px;opacity:0;s:900;">Slide 1 Description</div> </li> <!-- Slide 2 --> <li data-transition="fade"> <img src="path/to/slide2-image.jpg" alt="Slide 2"> <div class="tp-caption tp-caption-title" data-x="left" data-hoffset="20" data-y="center" data-voffset="-30" data-start="1000" data-transform_in="x:50px;opacity:0;s:900;">Slide 2 Title</div> <div class="tp-caption tp-caption-description" data-x="left" data-hoffset="20" data-y="center" data-voffset="30" data-start="1500" data-transform_in="x:50px;opacity:0;s:900;">Slide 2 Description</div> </li> <!-- Continue adding more slides --> </ul> </div> </div> <script src="https://cdn.jsdelivr.net/npm/revolution-slider/js/jquery.js"></script> <script src="https://cdn.jsdelivr.net/npm/revolution-slider/js/jquery.themepunch.tools.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/revolution-slider/js/jquery.themepunch.revolution.min.js"></script> <script> // Initialize Revolution Slider jQuery(document).ready(function() { jQuery('.rev_slider').revolution({ delay: 5000, // Delay between slides (optional) // Add more customization options as needed }); }); </script></body></html>Source: Grepper
Twitter 
LinkedIn