javascript - How to make a slider with jquery using bullets -
hello want know how make slider jquery, i'm quite new try best specific, want this:
have slider 3 images "they on same space" , 3 bullets below images, first can't see images because have opacity: 0 if click first bullet see first image, bullet# 2 img# 2, bullet# 3 img# 3, want put <a> tag example <a href="#"class="avanzar1">avanzar</a> advance next image "it on right side" , left side last image saw, question how can that? need keep transition of them , how join bullets? because need use tag <a> <-- button "for me" or bullets, it's difficult , i'm trying it, welcome
here 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 js:
$.fn.slider = function(config){ var nodos = this; var delay = (typeof config.delay == "number")?parseint(config.delay):4000; (var = 0; < 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'>"; (var = 0; < 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 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: 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; }
here wanted finished it, i'm glad if 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; (var = 0; < 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'>"; (var = 0; < 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: 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; }
Comments
Post a Comment