JQuery Slider
How do I make an jquery slider?
An attempt at creating my own jquery slider. What is a jquery slider? How do you make a jquery slider? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.
JQuery Slider Previews
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="slider"> <ul> <li> <img src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-7.jpg" alt="This is a picture of stuff in the sea" title="Sea"> </li> <li> <img src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" alt="This is a picture of an island with a beach" title="Beach"> </li> <li> <img src="http://hdwallpaperia.com/wp-content/uploads/2013/12/Nature-Image-Wallpapers-HD-1024x576.jpg" alt="This is a picture of a night city" title="City"> </li> <li> <img src="http://wallpoper.com/images/00/43/54/14/sakura-cherry-blossom_00435414.jpg" alt="These are some sakura blossoms" title="Sakura Blossoms"> </li> <li> <img src="" alt="This is blank" title="Blank"> </li> <div class="arrows left"></div> <div class="arrows right"></div> </ul>
</div>
<div class="picture-description"> <div class="wrap"> <div class="title"></div> <div class="description"></div> </div>
</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
body {margin:0;}
*,*:before,*:after { transition:all 0.3s; -webkit-transition:all 0.3s; box-sizing:border-box;
}
.slider,
.slider-info { position:relative; float:left; width:50%; overflow:hidden;
}
.picture-description { position:relative; float:left; width: 50%; background-color:#eee;
}
.picture-description .wrap { position:relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align:center; font-weight:300;
}
.title { font-size:24px; letter-spacing:1px;
}
.description { font-size:16px; letter-spacing:1px;
}
.slider ul { position:relative; float:left; width:100%; height:100%; list-style:none; margin:0; padding:0;
}
.slider ul li { position:absolute; top:0; left:0; padding:0; width:100%; transition:none; -webkit-transition:none; overflow:hidden;
}
.slider ul li:not(:first-child) { left:100%;
}
.slider ul li img { position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 100%; max-height: 100%;
}
.slider ul li img.width-lock { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; max-width: 100%;
}
@media (min-width:1200px){ .slider, .slider ul li, .picture-description { min-height: 300px; }
}
@media (min-width:768px){ .slider, .slider ul li, .picture-description { height: calc(50vh - 52.5px); min-height: 370px; }
}
@media (max-height:530px) and (min-width:768px){ .slider, .slider ul li, .picture-description { height: calc(100vh - 105px); min-height: 400px; }
}
@media (max-width:768px){ .slider, .picture-description { width:100%; } .slider, .slider ul li, .picture-description { height:calc(50vh - 52.5px); min-height:calc(50vh - 52.5px); max-height:calc(50vh - 52.5px); }
}
/**
* iPad with portrait orientation.
*/
@media all and (device-width: 768px)
and (device-height: 1024px)
and (orientation:portrait){ .slider, .slider ul li, .picture-description { height: 1024px; }
}
/**
* iPad with landscape orientation.
*/
@media all and (device-width: 768px)
and (device-height: 1024px)
and (orientation:landscape){ .slider, .slider ul li, .picture-description { height: 768px; }
}
/**
* iPhone 5
* You can also target devices with aspect ratio.
*/
@media screen and (device-aspect-ratio: 40/71) { .slider, .slider ul li, .picture-description { height: 500px; }
}
.arrows { position:absolute; height:100%; width:80px; top: 0; cursor:pointer; z-index:3;
}
.arrows.left { left:0;
}
.arrows.right { right:0;
}
.arrows.left:hover,
.arrows.left:active,
.arrows.left:focus { box-shadow: 40px 0 40px rgba(0,0,0,0.1) inset;
}
.arrows.right:hover,
.arrows.right:active,
.arrows.right:focus { box-shadow: -40px 0 40px rgba(0,0,0,0.1) inset;
}
.arrows:after { content:''; border-bottom: 4px solid #000; border-right: 4px solid #000; height: 40px; width: 40px; position: absolute; top: calc(50% - 20px);
}
.arrows.left:after { transform: rotate(135deg); -webkit-transform: rotate(135deg); left: 20px;
}
.arrows.left:hover:after { border-width: 3px; left: 15px;
}
.arrows.left:active:after,
.arrows.left:focus:after { border-width: 4px; left: 17px;
}
.arrows.right:after { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); right: 20px;
}
.arrows.right:hover:after { border-width: 3px; right: 15px;
}
.arrows.right:active:after,
.arrows.right:focus:after { border-width: 4px; right: 17px;
}JQuery Slider - Script Codes JS Codes
$.fn.slideIt = function(desc){ var slider = $(this); var slides = slider.find('li'); slides.each(function(a,b){ $(this).attr('data-slide',a); if(a == 0){ $(this).addClass('active'); } if(a > 0){ $(this).addClass('inactive'); } }); var ua = navigator.userAgent; var events = (ua.match(/iPad/i)) ? 'touchstart' : 'click'; slider.find('.arrows') .on(events,function(e){ if($(this).hasClass('left')){ slider.find('.active') .slideLeft(slider); /*slider.find('.active') .slideDown(slider);*/ } if($(this).hasClass('right')){ slider.find('.active') .slideRight(slider); /*slider.find('.active') .slideUp(slider);*/ } slider.slideInfo(desc); });
}
$.fn.slideLeft = function(slider){ var slide = $(this); slider.find('li:not(.active)') .css({'left':'-100%'}); var next = slide.prev('li'); if( parseInt(slide.attr('data-slide')) <= 0 ){ next = slider.find('li') .last(); } slide.stop() .animate({left:'100%'},600, function(){ slide.animate({left:'-100%'},0); }); next.stop() .animate({'left':'0'},600); slide.removeClass('active') .addClass('inactive'); next.removeClass('inactive') .addClass('active');
}
$.fn.slideRight = function(slider){ var slide = $(this); slider.find('li:not(.active)') .css({'left':'100%'}); var next = slide.next('li'); if( parseInt(slide.attr('data-slide')) + 1 >= slider.find('li').length ){ next = slider.find('li') .first(); } slide.stop() .animate({left:'-100%'},600, function(){ slide.animate({left:'100%'},0); }); next.stop() .animate({'left':'0'},600); slide.removeClass('active') .addClass('inactive'); next.removeClass('inactive') .addClass('active');
}
$.fn.slideUp = function(slider){ var slide = $(this); slider.find('li:not(.active)') .css({'top':'-100%'}); var next = slide.next('li'); if( parseInt(slide.attr('data-slide')) + 1 >= slider.find('li').length ){ next = slider.find('li') .first(); } slide.stop() .animate({top:'100%'},600, function(){ slide.animate({top:'-100%'},0); }); next.stop() .animate({'top':'0'},600); slide.removeClass('active') .addClass('inactive'); next.removeClass('inactive') .addClass('active');
}
$.fn.slideDown = function(slider){ var slide = $(this); slider.find('li:not(.active)') .css({'top':'100%'}); var next = slide.prev('li'); if( parseInt(slide.attr('data-slide')) <= 0 ){ next = slider.find('li') .last(); } slide.stop() .animate({top:'-100%'},600, function(){ slide.animate({top:'100%'},0); }); next.stop() .animate({'top':'0'},600); slide.removeClass('active') .addClass('inactive'); next.removeClass('inactive') .addClass('active');
}
$.fn.slideInfo = function(el){ var alt = $(this).find('.active img') .attr('alt'); var title = $(this).find('.active img') .attr('title'); $(el).find('.title') .text(title); $(el).find('.description') .text(alt);
}
$(document).ready(function(){ $('.slider').slideIt('.picture-description'); $('.slider').slideInfo('.picture-description');
});
| Developer | Izzy Skye |
| Username | zephyr |
| Uploaded | October 27, 2022 |
| Rating | 3 |
| Size | 3,529 Kb |
| Views | 12,144 |
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!
Izzy Skye (zephyr) Script Codes
| Name | Size |
| Really simple burger menu | 3,072 Kb |
| Mobile Material Menu Style | 5,189 Kb |
| Unisolated Pure CSS Mobile Nav Spinner | 1,852 Kb |
| Pure CSS Arrow Collection | 2,776 Kb |
| Pure CSS Spinning Cube | 2,539 Kb |
| Aperture Science style loading | 2,782 Kb |
| Vanilla JS Pattern Locker | 8,565 Kb |
| Pure CSS Read More Arrow | 1,747 Kb |
| Simple Pure CSS Loader | 2,028 Kb |
| Pure CSS Menu Navigation | 2,485 Kb |
Create amazing web content 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!
Similar Scripts & Codes
| Name | Username | Size |
| Zip Button test | Lje7462 | 1,932 Kb |
| Slide like Mailbox | Hmps | 3,758 Kb |
| Animation | B3ST1156 | 1,584 Kb |
| 3d css cube | Semenchenko | 4,578 Kb |
| Tiling Subdivision | Francext | 3,937 Kb |
| Long Shadow Button | Uixcrazy | 3,550 Kb |
| A Pen by Alex Edwards | Exards | 8,218 Kb |
| Right Click Menu | Anodpixels | 2,252 Kb |
| Nested table email layout | Massimo-cassandro | 2,355 Kb |
| Splitted Layout | Hornebom | 2,162 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!