Comunidad de diseño web y desarrollo en internet online

El texto no gira con las imagenes del slider HELP PLEASE !!!

Citar            
MensajeEscrito el 20 May 2016 08:02 pm
// JavaScript Document
jQuery(function(){

var iconLegales = jQuery("#iconosLegales").detach();
var logoVigilado= jQuery("#viglogo").detach();

jQuery("#footerContainer").prepend(iconLegales);
jQuery(".icon-rot").prepend(logoVigilado);
var auto=null;
jQuery.fn.corfislider=function(intervalo){
//jQuery( "[data-control='adelante']" ).off("click");
var slider=jQuery(this);
var i=parseInt(slider.children("div").length)-1;
var estado=false;

function autoPlay(){
jQuery("#autoBoton").trigger("click");
}
auto=setInterval(autoPlay, intervalo);

jQuery(jQuery(this).children()).each(function(index){
jQuery(this).css("background-image","url('"+jQuery(this).attr("data-src")+"')");
/*if(parseFloat(screen.width)<=768 && parseFloat(screen.width)>=400){

jQuery(this).css("background-image","url('"+jQuery(this).attr("data-tablet-src")+"')");

}else if(parseFloat(screen.width)<400){
jQuery(this).css("background-image","url('"+jQuery(this).attr("data-movil-src")+"')");
}else{
jQuery(this).css("background-image","url('"+jQuery(this).attr("data-src")+"')");
}*/
});

jQuery("[data-control], #autoBoton").on("click", function(event){
clearInterval(auto);

if(jQuery(this).attr("data-control")=="adelante"){
var miControl=jQuery(this);
miControl.attr("data-control", "void");

if(estado){

slider.children("div").fadeIn("slow");
estado=false;
miControl.attr("data-control", "adelante");
}else{

slider.children("div").eq(i).fadeOut("slow", function() {
miControl.attr("data-control", "adelante");
if(i<=1){
i=parseInt(slider.children("div").length)-1;
estado=true;
}else{
i--;
}//Fin if interno

});

}//Fin If medio

}else if(jQuery(this).attr("dataP-control")=="atras"){//Else de If principal
var miControl=jQuery(this);
miControl.attr("data-control", "void");

if(parseInt(slider.children("div:visible").length)==parseInt(slider.children("div").length)){
slider.children("div").hide();
slider.children("div").eq(0).fadeIn("slow", function(){
});
i=1;
miControl.attr("data-control", "atras");
}else{
slider.children("div").eq(parseInt(slider.children("div:visible").length)).fadeIn("slow", function(){
miControl.attr("data-control", "atras");
});
i=(parseInt(slider.children("div:visible").length)==parseInt(slider.children("div").length))?parseInt(slider.children("div").length)-1:parseInt(slider.children("div:visible").length);

}
}//Fin IF principal
auto=setInterval(autoPlay, intervalo);
event.stopImmediatePropagation();
});

}

jQuery("#corfislider").corfislider(6000);
jQuery(".id-Z7_609I03O0JOCSC0A6NTJHTV38E3").hide();


var resizeId;
jQuery(window).on("resize", function() {
clearTimeout(resizeId);
clearTimeout(auto);
resizeId = setTimeout(doneResizing, 500);
});


function doneResizing(){
jQuery("#corfislider").corfislider(6000);
}

});

Por NataliaBC

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 25 Jun 2016 03:37 am
Mira como tal el slider lo puedes meter con codigo web este es un ejemplo el cual bueno pues avanza como tal automaticamente o de igual manera lo puedes hacer manual de la misma forma tiene algunos efectos PopUp con el texto. espero y te sirva


<!DOCTYPE html>
<html lang="es">
<head >
<link rel="shortcut icon" href="images/dgeti.jpg" />
<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
<meta name="author" content="Vincent Garreau" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="css/style.css">
<meta charset="UTF-8">
<title>Inicio</title>

<!-- Stylesheets -->
<link rel="stylesheet" href="style.css">

</head>
<body id="particles-js">

<h1 class="slider-title"><a href="../ProyectoBD/RegistroAlumnos/view/login.php">Inscripción</a> |
<a href="../ProyectoBD/Test/index.html"> TEST Vocacional</a></h1>


<!-- Slider Container -->
<section class="slider-container">
<ul id="slider" class="slider-wrapper">
<li class="slide-current">
<img src="images/1.jpg" alt="Slider Imagen 1">
<div class="caption">
<h3 class="caption-title">Enfermería</h3>
<p>.</p>
</div>
</li>

<li>
<img src="images/2.jpg" alt="Slider Imagen 1">
<div class="caption">
<h3 class="caption-title">Administración de Recursos Humanos</h3>
<p>.</p>
</div>
</li>

<li>
<img src="images/3.jpg" alt="Slider Imagen 1">
<div class="caption">
<h3 class="caption-title">Electromecánica</h3>
<p>.</p>
</div>
</li>

<li>
<img src="images/4.jpg" alt="Slider Imagen 1">
<div class="caption">
<h3 class="caption-title">Programación</h3>
<p>.</p>

</div>
</li>
<li>
<img src="images/5.jpg" alt="Slider Imagen 1">
<div class="caption">
<h3 class="caption-title">Logística</h3>
<p>.</p>

</div>
</li>
</ul>

<!-- Sombras -->
<div class="shadow"></div>

<!-- Controles -->
<ul id="slider-controls" class="slider-controls"></ul>



<!-- Scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="particles.js"></script>
<script src="js/app.js"></script>
<script src="js/html5shiv.min.js"></script>

</body>
</html>

Por Daniel Mancera

5 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.