En este artículo, aprenderemos a diseñar controles deslizantes táctiles móviles para aplicaciones móviles, sitios web móviles o aplicaciones web utilizando el complemento JavaScript Swiper.
Acercarse:
- Descargue los archivos precompilados necesarios desde este enlace y guárdelos en su carpeta de trabajo para la implementación de los siguientes ejemplos.
- Mantenga los archivos descargados «swiper.min.js» y «swiper.min.css» en la raíz de la carpeta de trabajo para que funcionen los siguientes ejemplos.
- De lo contrario, use el enlace CDN como se indica a continuación en sus siguientes códigos de ejemplo.
- Diseñe el documento HTML con el elemento div con la clase «swiper-container» que contiene elementos div que contienen imágenes que se utilizarán para deslizar con la clase «swiper-slide».
- Use el atributo HTML <img> src para cargar imágenes.
- En la parte del script del código, inicialice el método swiper() usando el complemento. Configure las diferentes opciones según la necesidad de la aplicación.
- En la parte de estilo del código, hemos utilizado el estilo incrustado para diseñar los elementos HTML con la clase «swiper-container» y «swiper-slide» y el elemento del cuerpo .
- Consulte las diferentes propiedades de visualización de CSS para la implementación.
Enlaces CDN:
<enlace rel=”hoja de estilo” href=”https://unpkg.com/swiper@7/swiper-bundle.min.css” />
<script src=”http://code.jquery.com/jquery-1.9 .1.min.js”> </script>
<script src=”https://unpkg.com/swiper@7/swiper-bundle.min.js”></script>
Ejemplo 1: El siguiente ejemplo muestra un control deslizante básico utilizando el complemento Swiper. Otros atributos del complemento también se pueden configurar según la necesidad. La página está diseñada con elementos HTML div con las clases del complemento, a saber, «swiper-container», «swiper-wrapper», «swiper-slide», «swiper-pagination» y otras clases. Use el elemento HTML img para insertar varias imágenes para el control deslizante. El control deslizante se inicializa en la parte del script del siguiente código con la configuración de opciones.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Implementing Swiper</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href=
"https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<script src=
"http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src=
"https://unpkg.com/swiper@7/swiper-bundle.min.js">
</script>
<!-- Styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
font-family: Helvetica Neue;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
background: #fff;
display: -ms-flexbox;
display: -webkit-flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190050/background1.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190136/background2.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190200/background3.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190222/background4.jpg">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
}
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, simplemente cambiamos o ajustamos los valores de las opciones para los atributos en la parte del script del código para el código HTML anterior. El desarrollador puede cambiar o agregar según la necesidad de la aplicación. Dos diapositivas son visibles a la vez con una barra de progreso en la parte superior e inferior del control deslizante.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Implementing Swiper</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href=
"https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<script src=
"http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src=
"https://unpkg.com/swiper@7/swiper-bundle.min.js">
</script>
<!-- Styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
font-family: Helvetica Neue;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
background: #fff;
display: -ms-flexbox;
display: -webkit-flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190050/background1.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190136/background2.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190200/background3.jpg">
</div>
<div class="swiper-slide">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190222/background4.jpg">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
slidesPerView: 'auto',
initialSlide: 1,
resistanceRatio: 0,
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
mousewheel: true,
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA