JQuery Slider

Developer
Ray
Size
2,471 Kb
Views
6,072
  1. JQuery Slider Previews
  2. JQuery Slider HTML Codes
  3. JQuery Slider CSS Codes
  4. JQuery Slider JS Codes

How do I make an jquery slider?

What is a jquery slider? How do you make a jquery slider? This script and codes were developed by Ray on 18 January 2023, Wednesday.

JQuery Slider Previews
IQ Test

JQuery Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Easy Slider</h2>
<div class="slider"> <a href="javascript:void(0);" class="btn_next">></a> <a href="javascript:void(0);" class="btn_prev"><</a> <ul> <li>Block 1</li> <li style="background: #827D7D;">Block 2</li> <li>Block 3</li> <li style="background: #827D7D;">Block 4</li> </ul>
</div>
<div class="auto_option"> <input type="checkbox" class="checkbox" /> <label for="checkbox">Autoplay</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>

JQuery Slider - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Tangerine);
body { margin: 0; padding: 0; background: #58DDAF; color: #2a2a2a; font-family: 'Tangerine', serif;
}
h2 { color: #fff; text-align: center; font-size: 48px; font-weight: 300;
}
.slider { position: relative; margin: 20px auto 0 auto; width: 500px; height: 300px; border-radius: 5px; overflow: hidden;
}
.slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none;
}
.slider ul li { position: relative; float: left; width: 500px; height: 300px; background: #ccc; font-size: 40px; text-align: center; line-height: 300px; display: block;
}
a { position: absolute; top: 35%; padding: 15px; color: #fff; background: #2a2a2a; font-size: 20px; font-weight: 600; font-family: serif; text-decoration: none; opacity: .8; display: block; z-index: 999; -webkit-transition: opacity .5s; transition: opacity .5s;
}
a:hover { opacity: 1;
}
a.btn_next { right: 0;
}
.auto_option { position: relative; margin: 10px auto; width: 150px; font-size: 22px;
}

JQuery Slider - Script Codes JS Codes

 $('.auto_option').change(function(){ setInterval(function () { moveRight(); }, 2000); });	var slideCount = $('.slider ul li').length;	var slideWidth = $('.slider ul li').width();	var slideHeight = $('.slider ul li').height();	var sliderUlWidth = slideCount * slideWidth; var interval_flag = 0;	$('.slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('.slider ul li:last-child').prependTo('.slider ul'); function moveLeft() { $('.slider ul').animate({ left: + slideWidth }, 285, function () { $('.slider ul li:last-child').prependTo('.slider ul'); $('.slider ul').css('left', ''); }); }; function moveRight() { $('.slider ul').animate({ left: - slideWidth }, 285, function () { $('.slider ul li:first-child').appendTo('.slider ul'); $('.slider ul').css('left', ''); }); }; $('a.btn_prev').click(function () { moveLeft(); }); $('a.btn_next').click(function () { moveRight(); });
JQuery Slider - Script Codes
JQuery Slider - Script Codes
Home Page Home
Developer Ray
Username raylee0616
Uploaded January 18, 2023
Rating 3
Size 2,471 Kb
Views 6,072
Do you need developer help for JQuery 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!

Ray (raylee0616) Script Codes
Name
Canvas CurveTo
Canvas - gradient
JQuery closest vs parent
Montage animation
Web Storage - SessionStorage
Web Storage - localStorage
Css animation shake
WebSocket First
Week3-1
TimelineMax Text
Create amazing blog posts 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!