Many Thanks To π ( https://github.com/viljamis/ResponsiveSlides.js ) πββοΈ
π Try Live Demo
This slider is made with html css and js. It uses jquery to fade between images automatically and through navigation buttons or through pagination bullets. This Slider is Made/Customized for standard use, as a banner or ad slider.
NOTE: I set slider's css and settings for Demo purpose.
Try & modify it as you need.
β Add CSS (styling File) and JS (script File) links inside <head>
tag of your html file.
These files can be found in assets/css
and assets/js
folders.
<link rel="stylesheet" href="assets/css/slider.css">
<link rel="stylesheet" href="assets/css/main.css">
And because this slider is JQuery dependent. You can either download Jquery from website or use bellow cdn link.
(JQuery minified javascript file is included in assets/js
)
Add this link inside of <head>
tag.
<!-- Main Slider Script Linking -->
<script src="assets/js/slider.min.js"></script>
<!-- Jquery Script Linking -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
OR
<script src="assets/js/jquery-3.3.1.min.js"></script>
β Add Markup in your body:
<body>
<div class="container"><!-- This is Main Container for My Page. U may need it or not. Create or Modify as per your Need -->
<div class="rslides_container">
<ul class="rslides" id="slider">
<li><img src="assets/images/demoimage (1).jpg" alt="1"></li>
<li><img src="assets/images/demoimage (2).jpg" alt="2"></li>
<li><img src="assets/images/demoimage (3).jpg" alt="3"></li>
<li><img src="assets/images/demoimage (4).jpg" alt="4"></li>
<!-- Add many Images As you need -->
</ul>
</div>
</div>
<script>
// Will Add Slider Initializing Script Here
</script>
</body>
Finally
β Add this script to your file within separate <script>...</script>
tag to initialize your Image Slider.
$(function () {
// Slideshow
$("#slider").responsiveSlides({
auto: true, // Auto Slide Start
pager: true, // Bullets on Bottom
nav: true, // Prev & Next Button
speed: 700, // Slide Transition Speed (ms)
timeout: 2700, // Time Interval Between Eac Slider (ms)
maxwidth: 800, // Slider Width Max
namespace: "centered-btns" // Navigation button Location
});
});
You can add or modify slider settings in script file. following are complete list of settings you can apply.
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
For Further Guidance and Information Please Visit: http://responsiveslides.com/
Ui-Component-Minimal-Slider (Image Slider) Copyright (C) 2018 - Arslan Ameer
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/