Very Simple Slider

Developer
Mark Peck
Size
2,682 Kb
Views
32,384
  1. Very Simple Slider Previews
  2. Very Simple Slider HTML Codes
  3. Very Simple Slider CSS Codes
  4. Very Simple Slider JS Codes

How do I make an very simple slider?

Was tired of heavy bloated jQuery slider plugins so I made my own. Has controls and finds your slide height/width automatically. Simple & basic, the way momma would have wanted.. What is a very simple slider? How do you make a very simple slider? This script and codes were developed by Mark Peck on 13 October 2022, Thursday.

Very Simple Slider Previews
IQ Test

Very Simple Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Very Simple Slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Incredibly Basic Slider</h1>
<div id="slider"> <a href="#" class="control_next">></a> <a href="#" class="control_prev"><</a> <ul> <li>SLIDE 1</li> <li style="background: #aaa;">SLIDE 2</li> <li>SLIDE 3</li> <li style="background: #aaa;">SLIDE 4</li> </ul>
</div>
<div class="slider_option"> <input type="checkbox" id="checkbox"> <label for="checkbox">Autoplay Slider</label>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Very Simple Slider - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html { border-top: 5px solid #fff; background: #58DDAF; color: #2a2a2a;
}
html, body { margin: 0; padding: 0; font-family: 'Open Sans';
}
h1 { color: #fff; text-align: center; font-weight: 300;
}
#slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px;
}
#slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none;
}
#slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; line-height: 300px;
}
a.control_prev, a.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; cursor: pointer;
}
a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease;
}
a.control_prev { border-radius: 0 2px 2px 0;
}
a.control_next { right: 0; border-radius: 2px 0 0 2px;
}
.slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px;
}

Very Simple Slider - Script Codes JS Codes

jQuery(document).ready(function ($) { $('#checkbox').change(function(){ setInterval(function () { moveRight(); }, 3000); });	var slideCount = $('#slider ul li').length;	var slideWidth = $('#slider ul li').width();	var slideHeight = $('#slider ul li').height();	var sliderUlWidth = slideCount * slideWidth;	$('#slider').css({ width: slideWidth, height: slideHeight });	$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider ul li:last-child').prependTo('#slider ul'); function moveLeft() { $('#slider ul').animate({ left: + slideWidth }, 200, function () { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveRight() { $('#slider ul').animate({ left: - slideWidth }, 200, function () { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); });
});
Very Simple Slider - Script Codes
Very Simple Slider - Script Codes
Home Page Home
Developer Mark Peck
Username doodlemarks
Uploaded October 13, 2022
Rating 4.5
Size 2,682 Kb
Views 32,384
Do you need developer help for Very Simple Slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Peck (doodlemarks) Script Codes
Name
JQuery UI Draggable Experiment
Refract Light Overlay
Subtle Wiggle Animation
Automated Browser Mockup
Hexagons in CSS
Basic line animation vivus
Styling Selects in CSS SUCKSSS
Simple Accurate Counter
A Pen by Mark Peck
CSS Navigation Menu
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!