How to make a slider with jquery using bullets
Question
Hello I want to know how to make a slider with jquery, I'm quite new with this I will try my best to be specific, I want to do this:
I have an slider with 3 images "they are on the same space" and 3 bullets below the images, first I can't see the images because they have opacity: 0 but if I click the first bullet I will see the first image, bullet# 2 img# 2, bullet# 3 img# 3, I want to put an <a> tag for example <a href="#"class="avanzar1">avanzar</a> that for advance to next image "it will be on the right side" and the left side will be to back to the last image that you saw, my question is how can I do that? I will need to keep the transition of them and how to join that to the bullets? because I need to use the tag <a> <-- the button "for me" or the bullets, it's difficult and I'm trying to do it, any help is welcome
Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/slider.js"></script>
</head>
<body>
<div class="sliders">
<a href="#" class="retroceder">back</a>
<a href="#" class="avanzar">next</a>
<ul >
<li><img src="image_1.jpg"></li>
<li><img src="image_2.jpg"></li>
<li><img src="image_3.jpg"></li>
</ul>
<!-- <ul class="controles">
<li class="activa"> </li>
<li> </li>
<li> </li>
</ul> -->
</div>
<div class="sliders">
<a href="#" class="retroceder1">back</a>
<a href="#" class="avanzar1">next</a>
<ul>
<li><img src="image_1.jpg"></li>
<li><img src="image_2.jpg"></li>
<li><img src="image_3.jpg"></li>
</ul>
</div>
</body>
</html>
Here is the js:
$.fn.slider = function(config){
var nodos = this;
var delay = (typeof config.delay == "number")?parseInt(config.delay):4000;
for (var i = 0; i < nodos.length; i++) {
Slider(nodos[i]);
}
function Slider(nodo){
var galeria = $(nodo).find('ul');
if(!$(nodo).hasClass('slider'))
$(nodo).addClass('slider');
if(!galeria.hasClass('galeria'))
galeria.addClass("galeria");
//Encontrar cuantas imagenes hay en la galeria
var imagenes = $(galeria).find('li');
//Controles
var html_bullets="<ul class='controles'>";
for (var it = 0; it < imagenes.length; it++) {
html_bullets+="<li data-index='"+it+"'> </li>";
}
html_bullets+="</ul>";
$(nodo).append(html_bullets);
var bullets = $(nodo).find("ul.controles li");
bullets.click(function(){
var index= $(this).data("index");
bullets.removeClass('activa');
$(imagenes[index]).addClass("activa");
$(bullets[index]).addClass("activa");
});
}
};
$(document).ready(function() {
$(".sliders").slider({delay:5000});
});
Here is the css:
.slider{
width: 320px;
overflow: hidden;
}
.slider ul{
list-style: none;
padding: 0;
}
.slider ul.galeria{
height: 200px;
position: relative;
}
.slider ul.galeria li{
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 2s;
}
.slider ul.galeria li.activa{
opacity: 1;
}
.slider ul.galeria img{
max-height: 200px;
}
/*Controles*/
.slider ul.controles {
text-align: center;
}
.slider ul.controles li{
background-color: black ;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
}
1 answers
solution1
0 2016-01-19 05:45:37
Here is what I wanted I already finished it, I'm glad if it helps someone
html:
<!DOCTYPE html>
<html>
<head>
<title>Practica2Jquery</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<script src="slider.js"></script>
</head>
<body>
<div class="sliders">
<a href="#" class="atras">Atras</a>
<ul >
<li class="activa"><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
<a href="#" class="siguiente">Siguiente</a>
</div>
<div class="sliders">
<a href="#" class="atras">Atras</a>
<ul>
<li class="activa"><img src="image4.jpg"></li>
<li><img src="image5.jpg"></li>
<li><img src="image6.jpg"></li>
</ul>
<a href="#" class="siguiente">Siguiente</a>
</div>
</body>
</html>
js:
$.fn.slider = function(config){
var nodos = this;
var delay = (typeof config.delay === "number")?parseInt(config.delay):3000;
for (var i = 0; i < nodos.length; i++) {
Slider(nodos[i]);
}
function Slider(nodo){
var galeria = $(nodo).find('ul');
var tag = "<a class='atras'></a>";
if(!$(nodo).hasClass('slider'))
$(nodo).addClass('slider');
if(!galeria.hasClass('galeria'))
galeria.addClass("galeria");
//Encontrar cuantas imagenes hay en la galeria
var imagenes = $(galeria).find('li');
//Controles
var html_bullets="<ul class='controles'>";
for (var it = 0; it < imagenes.length; it++) {
if(it==0)
html_bullets+="<li data-index='"+it+"' class='activa'> </li>";
else
html_bullets+="<li data-index='"+it+"'> </li>";
}
html_bullets+="</ul><a class='siguiente'></a>";
$(nodo).append(html_bullets);
$(nodo).prepend(tag);
var bullets = $(nodo).find("ul.controles li");
bullets.click(function(){
var index= $(this).data("index");
$(imagenes).add(bullets).removeClass('activa');
$(imagenes[index]).add(bullets[index]).addClass('activa');
});
}
$(".slider").on("click","a.atras",function(){
direcciones({div: this.parentElement});
});
$(".slider").on("click","a.siguiente",function(){
direcciones({div: this.parentElement,direccion:1});
});
function direcciones(lado){
var div = lado.div;
var imagen = $(div).find("ul.galeria li.activa");
var imagenes = $(div).find("ul.galeria li");
var bullet = $(div).find("ul.controles li.activa");
var bullets = $(div).find("ul.controles li");
var index = bullet.data("index");
var max = bullets.length-1;
$(bullets).add(imagenes).removeClass('activa');
if(lado.direccion){
// === ?
if(index == max){
$(imagenes[0]).add(bullets[0]).addClass('activa');
}else {
$(imagenes[index+1]).add(bullets[index+1]).addClass('activa');
}
}
else{
if(index == 0){
$(imagenes[max]).add(bullets[max]).addClass('activa');
}else {
$(imagenes[index-1]).add(bullets[index-1]).addClass('activa');
} } } };
$(document).ready(function() {
$(".sliders").slider({delay:3000});
});
css:
.slider{
width: 420px;
overflow: hidden;
}
.slider ul{
list-style: none;
padding: 0;
}
.slider ul.galeria{
height: 200px;
position: relative;
margin-left: 30px;
}
.slider ul.galeria li{
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 2s;
}
.slider ul.galeria li.activa{
opacity: 1;
}
.slider ul.galeria img{
max-height: 400px;
max-width: 300px;
margin-left: 5px;
}
/*Controles*/
.slider ul.controles {
position: relative;
left: 38%;
bottom: 45px;
}
.slider ul.controles li{
background-color: black ;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
}
.slider ul.controles li.activa{
background-color: red ;
}
.slider a.atras{
position: relative;
left: 0;
top: 128px;
}
.slider a.siguiente{
position: relative;
left: 80%;
bottom: 120px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make interactive bullets to my jquery slider
How to make a slider autoscroll using jquery
How to make “bullets” with HTML 5
Slider with bullets
trying to make slider using jquery
Auto click bullets on slider to make slider autoplay for all slides
Make a custom range slider using jQuery
How can I make this jQuery slider automatic
How to make jQuery slider work for generated IDs?
JQuery Slider, how to make “step” size change
Related Tags