JQuery Slider

Developer
Matt Edwards
Size
3,002 Kb
Views
34,408
  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?

A slider. Just for fun.... What is a jquery slider? How do you make a jquery slider? This script and codes were developed by Matt Edwards on 12 August 2022, Friday.

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> <div class="row" id="slider"> <div class="main-area"> <div id="featured-item"> <figure> <img src="http://lorempixel.com/600/400/nightlife/1/" alt="" /> <figcaption> <p>Slide 1</p> </figcaption> </figure> </div> </div> <div class="side-area"> <ul class="slider"> <li> <figure> <img src="http://lorempixel.com/600/400/nightlife/2/" alt="" /> <figcaption> <p>Slide 2</p> </figcaption> </figure> </li> <li> <figure> <img src="http://lorempixel.com/600/400/nightlife/3/" alt="" /> <figcaption> <p>Slide 3</p> </figcaption> </figure> </li> <li> <figure> <img src="http://lorempixel.com/600/400/nightlife/8/" alt="" /> <figcaption> <p>Slide 4</p> </figcaption> </figure> </li> <li> <figure> <img src="http://lorempixel.com/600/400/nightlife/5/" alt="" /> <figcaption> <p>Slide 5</p> </figcaption> </figure> </li> <li> <figure> <img src="http://lorempixel.com/600/400/nightlife/6/" alt="" /> <figcaption> <p>Slide 6</p> </figcaption> </figure> </li> </ul> </div>
</div>
<div id="controls"> <button id="prev">Previous</button> <button id="next">Next</button>
</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

img { max-width: 100%;
}
.row { background: #222; max-width: 710px; height: 0; overflow: hidden; padding-bottom: 355px; *zoom: 1;
}
.row:before, .row:after { content: " "; /* 1 */ display: table; /* 2 */
}
.row:after { clear: both;
}
.row .main-area { width: 75%; float: left; margin-right: 1%;
}
.row .side-area { width: 24%; float: left;
}
ul { list-style: none; margin: 0; padding: 0;
}
figure { position: relative; margin: 0; max-width: 100%;
}
figure img { max-width: 100%; height: auto; margin: 0; padding: 0;
}
figure figcaption { position: absolute; bottom: 3px; left: 0; right: 0; background: rgba(0, 0, 0, 0.5);
}
figure figcaption p { text-align: right; margin: 0; padding: 20px; color: white;
}

JQuery Slider - Script Codes JS Codes


jQuery(document).ready(function ($) { var timer; function startTimer() { timer = setInterval(function () { next() }, 4000); } $('#slider').hover(function (ev) { clearInterval(timer); }, function (ev) { startTimer(); }); startTimer(); $('#prev').on('click', function(){ clearInterval(timer); previous(); }); $('#next').on('click', function(){ clearInterval(timer); next(); }); function next() { var feature = $('ul.slider li:first-child'); $(feature).slideUp(2000, function(){ $("#featured-item").fadeOut('fast').html(feature.html()).stop(true,true).hide().fadeIn(); $(this).remove(); }); var newLi = '<li>'+feature.html()+'</li>'; $(newLi).appendTo('ul.slider'); }; function previous() { var oldFeature = $('#featured-item'); var newLi = '<li>'+oldFeature.html()+'</li>'; var feature = $('ul.slider li:last-child'); $(newLi).prependTo('ul.slider'); $(feature).remove(); setTimeout( $("#featured-item").empty().html(feature.html()).stop(true,true).hide().fadeIn(50) , 20); };
});
JQuery Slider - Script Codes
JQuery Slider - Script Codes
Home Page Home
Developer Matt Edwards
Username mtedwards
Uploaded August 12, 2022
Rating 3
Size 3,002 Kb
Views 34,408
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!

Matt Edwards (mtedwards) Script Codes
Name
Calendar
AussieTheatre Logo
A Quiz, reveal answers and keep score
JQuery lesson from Treehouse
JQuery YouTube Playlist
Responsive layout with Fixed width Sidebar
Css Skew background for triangular overlay
JQuery featured gallery
Let it Rain
JQuery Star flashing effect
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!