Slides.js es un complemento de presentación de diapositivas receptivo para jQuery con características como transiciones táctiles y CSS3. Ayuda a implementar presentaciones de diapositivas fácilmente junto con animaciones que se ejecutan sin problemas en los dispositivos.
Sus características son las siguientes:
- Sensible : puede crear presentaciones de diapositivas receptivas.
- Toque : puede agregar movimientos táctiles en su presentación de diapositivas.
- Transiciones CSS3 : puede agregar animaciones que se ejecutan perfectamente bien en su presentación de diapositivas.
Para usar este complemento, simplemente agregue el enlace CDN justo encima de la etiqueta del cuerpo:
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.slides.min.js"></script>
Ejemplo:
HTML
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SlidesJS Example</title>
<meta name="description"
content="SlidesJS is a simple slideshow plugin for jQuery. ">
<!-- SlidesJS Required (if responsive):
Sets the page width to the device width. -->
<meta name="viewport"
content="width=device-width">
<!-- End SlidesJS Required -->
<!-- CSS for slidesjs.com example -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- End CSS for slidesjs.com example -->
<!-- SlidesJS Optional: If you'd like to use this design -->
<style>
#slides {
display: none
}
#slides .slidesjs-navigation {
margin-top: 3px;
}
#slides .slidesjs-previous {
margin-right: 5px;
float: left;
}
#slides .slidesjs-next {
margin-right: 5px;
float: left;
}
.slidesjs-pagination {
margin: 6px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20201213110552/logo.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#slides a:link,
#slides a:visited {
color: #333
}
#slides a:hover,
#slides a:active {
color: #9e2020
}
.navbar {
overflow: hidden
}
</style>
<!-- SlidesJS Required: These styles are required
if you'd like a responsive slideshow -->
<style>
#slides {
display: none
}
.container {
margin: 0 auto
}
/* For tablets & smart phones */
@media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
.container {
width: auto
}
}
/* For smartphones */
@media (max-width: 480px) {
.container {
width: auto
}
}
/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
.container {
width: 724px
}
}
/* For larger displays */
@media (min-width: 1200px) {
.container {
width: 1170px
}
}
</style>
<!-- SlidesJS Required: -->
</head>
<body>
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<div id="slides">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210302151833/GeeksClassesLiveSession.png"
alt="">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210103105723/geeksforgeeks6.png"
alt=""
style="size:20px">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201027221346/CompleteInterviewPreparationCoursebyGeeksforGeeks.png"
alt="">
<a href="#" class="slidesjs-next slidesjs-navigation">
<i class="fa fa-chevron-circle-left"></i></a>
<a href="#" class="slidesjs-previous slidesjs-navigation">
<i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/slidesjs/3.0/jquery.slides.js">
</script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
navigation: false
});
});
</script>
<!-- End SlidesJS Required -->
</body>
</html>
Producción:
