Simplest RWD jQuery slider

Developer
Oloman
Size
3,725 Kb
Views
40,480
  1. Simplest RWD jQuery slider Previews
  2. Simplest RWD jQuery slider HTML Codes
  3. Simplest RWD jQuery slider CSS Codes
  4. Simplest RWD jQuery slider JS Codes

How do I make an simplest rwd jquery slider?

A RWD slider, very, very simple. It need jQuery. What is a simplest rwd jquery slider? How do you make a simplest rwd jquery slider? This script and codes were developed by Oloman on 22 August 2022, Monday.

Simplest RWD jQuery slider Previews
IQ Test

Simplest RWD jQuery slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simplest RWD jQuery slider</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
/* Contenedor general */
#slider-wrapper { position: relative; overflow: hidden; width: 800px; max-width: 100%; margin: 0 auto; padding: 0 10px; font-family: arial, sans-serif; font-size: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* Contenedor slider */
#slider { position: relative; width: 100%; padding-bottom: 50%; /* Aspect ratio */ overflow: hidden; border:10px solid #333; border-radius: 5%/10%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* Ajuste de las imágenes */
#slider img { width: 100%; min-height: 100%; position: absolute; margin:0; padding:0; border:0;
}
/* Texto que acompaña a cada imagen */
#slider p { position: absolute; bottom: 5%; left: 0; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 80%; height: 18px; margin:0; padding: 5px 0; color: #eee; background: rgba(60,60,60,.8); font-size: 18px; line-height: 18px; text-align:center;
}
/* Flechas de navegación */
a.mas, a.menos { position: absolute; top: 50%; left: 0px; z-index: 10; width: 20px; height: 30px; text-align: center; line-height: 30px; font-size: 30px; color: white; background: #333; text-decoration: none; transition: .5s margin ease;
}
a.mas {
left: 100%;
margin-left: 100px;
}
#slider-wrapper:hover a.mas { margin-left: -40px;
}
a.menos { left: 0; margin-left: -100px;
}
#slider-wrapper:hover a.menos { margin-left: 10px;
}
/* CODIGO NO NECESARIO. SÓLO INCLUIDO PARA ESTILO DE LA PRESENTACION */
html { width: 100%; height: 100%; background: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #c26649), color-stop(100%, #6b220b)); background: -webkit-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%); background: -moz-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%); background: radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%);
}
#slider-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="slider-wrapper"> <div id="slider"> <div> <a href="javascript:void();"> <img src="https://lh6.googleusercontent.com/-jUaHIEYN54Y/T3uDK4rgI0I/AAAAAAAACdE/BQwnSJSIQ04/s1600/ejemplo7.jpg" /><p>No sabe hablar, pero se fija mucho</p> </a> </div> <div> <a href="javascript:void();"> <img src="https://lh3.googleusercontent.com/-6qmXITahg04/TYEE3OaVDfI/AAAAAAAAABI/zoQvYPZWq6U/s1600/alice+in+wonderland.jpg" /><p>Alice in Wonderland</p> </a> </div> <div> <a href="javascript:void();"> <img src="http://lorempixel.com/640/400/animals/1/" /><p>Rino & Rino Jr.</p> </a> </div> </div> <a href="javascript:void();" class="mas">&rsaquo;</a> <a href="javascript:void();" class="menos">&lsaquo;</a>
</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>

Simplest RWD jQuery slider - Script Codes CSS Codes

/* Contenedor general */
#slider-wrapper { position: relative; overflow: hidden; width: 800px; max-width: 100%; margin: 0 auto; padding: 0 10px; font-family: arial, sans-serif; font-size: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* Contenedor slider */
#slider { position: relative; width: 100%; padding-bottom: 50%; /* Aspect ratio */ overflow: hidden; border:10px solid #333; border-radius: 5%/10%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* Ajuste de las imágenes */
#slider img { width: 100%; min-height: 100%; position: absolute; margin:0; padding:0; border:0;
}
/* Texto que acompaña a cada imagen */
#slider p { position: absolute; bottom: 5%; left: 0; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 80%; height: 18px; margin:0; padding: 5px 0; color: #eee; background: rgba(60,60,60,.8); font-size: 18px; line-height: 18px; text-align:center;
}
/* Flechas de navegación */
a.mas, a.menos { position: absolute; top: 50%; left: 0px; z-index: 10; width: 20px; height: 30px; text-align: center; line-height: 30px; font-size: 30px; color: white; background: #333; text-decoration: none; transition: .5s margin ease;
}
a.mas {
left: 100%;
margin-left: 100px;
}
#slider-wrapper:hover a.mas { margin-left: -40px;
}
a.menos { left: 0; margin-left: -100px;
}
#slider-wrapper:hover a.menos { margin-left: 10px;
}
/* CODIGO NO NECESARIO. SÓLO INCLUIDO PARA ESTILO DE LA PRESENTACION */
html { width: 100%; height: 100%; background: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #c26649), color-stop(100%, #6b220b)); background: -webkit-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%); background: -moz-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%); background: radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%);
}
#slider-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

Simplest RWD jQuery slider - Script Codes JS Codes

$(function(){ $('#slider div:gt(0)').hide(); function changeDiv(){ $('#slider div:first-child').fadeOut(1000) .next('div').fadeIn(1000) .end().appendTo('#slider'); } var interval = setInterval(changeDiv, 6000); $('.mas').click(function(){ $('#slider div:first-child').fadeOut(1000).next('div').fadeIn(1000).end().appendTo('#slider'); clearInterval(interval); interval = setInterval(changeDiv, 6000); }); $('.menos').click(function(){ $('#slider div:first-child').fadeOut(1000); $('#slider div:last-child').fadeIn(1000).prependTo('#slider'); clearInterval(interval); interval = setInterval(changeDiv, 6000); });
});
Simplest RWD jQuery slider - Script Codes
Simplest RWD jQuery slider - Script Codes
Home Page Home
Developer Oloman
Username oloman
Uploaded August 22, 2022
Rating 3
Size 3,725 Kb
Views 40,480
Do you need developer help for Simplest RWD 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!

Oloman (oloman) Script Codes
Name
Before-After TwentyTwenty jQuery plugin
CSS - Colorful fan menu
CSS Spoiler
CSS Responsive accordion social buttons
Book 3D
Scotch tape css effect
Testing. Backup feed main data
Simplest RWD jQuery slider
CSS responsive football pitch
Responsive video loader
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!