How to Create a 3D Slider in j query.

-

Slider is a Common To use the Website.


Check Slider Code Below Here..

Step-1:- Create a  Html Pages..

1-index.html



Step-2:- Write the Code of (index.html) page.


<!DOCTYPE html>
<html>
<head>
<title>3d Slider</title>
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js></script>
<script type=text/javascript src=jR3DCarousel.min.js></script>
</head>
<body>
<style type=text/css>
.jR3DCarouselGallerybox,.jR3DCarouselGalleryCustomeTemplate
{margin:0 auto;
</style>
<style>
.jR3DCarouselGalleryCustomeTemplate .captions
{position:relative;
padding:4px 0;
bottom:27px;
background:#ec1c8e;
display:block}
.jR3DCarouselGalleryCustomeTemplate a{text-decoration:none}
</style>
<script type=text/javascript>
$(document).ready(function(){var a=[{src:"images/2.jpg"},
{src:"images/1.jpg"},
{src:"images/2.jpg"},
{src:"images/1.jpg"}];
jR3DCarousel=$(".jR3DCarouselGallerybox").jR3DCarousel({width:670,height:362,slides:a});jR3DCarouselCustomeTemplate=$(".jR3DCarouselGalleryCustomeTemplate").jR3DCarousel(carouselCustomeTemplateProps)});</script>
<div class=container-box>
<h2>jR3DCarousel - with default options</h2>
<div class=jR3DCarouselGallerybox></div>
</div>
</body>
</html>



Step:3:- And Now the time of JS page.

Create a JS Page (jR3DCarousel.min.js)


1-  jR3DCarousel.min.js  Code 


(function(b)
{"function"===typeof define&&define.amd?define(["jquery"],b)
:"object"===typeof exports?module.exports=b(require("jquery"))
:b(jQuery)})(function(b){b.fn.jR3DCarousel=function(E){function x(){q();
v=setInterval(A,a.animationInterval+a.animationDuration)}
function q(){v&&clearInterval(v)}
function A(){r=u+1;y.run(a.animation,r);z()}function B(F){r=Math.floor(u/c)*c+F;
y.run(a.animation,r);z()}function w(){this.animations={slide:G,slide3D:H,
scroll:I,scroll3D:J,fade:K}}function G(a){d.css({perspective:"",
overflow:"hidden"});f=g*a;h.css({transform:"translateZ("+-e+"px) rotateY("+-f+"deg)"})}
function H(a){d.css({perspective:k,overflow:"visible"});f=g*a;
h.css({transform:"translateZ("+-e+"px) rotateY("+-f+"deg)"})}function I(a){d.css({perspective:"",overflow:"hidden"});
f=g*a;h.css({transform:"translateZ("+-e+"px) rotateX("+-f+"deg)"})}
function J(a){d.css({perspective:k,overflow:"visible"});f=g*a;
h.css({transform:"translateZ("+-e+"px) rotateX("+-f+"deg)"})}
function K(d){h.css({transition:"opacity "+a.animationDuration+
"ms "+a.animationCurve,opacity:0});f=g*d;h.css({transform:"translateZ("+-e+"px) rotateY("+-f+"deg)"});
h.css({opacity:1})}function z(){d.find(".nav").css({backgroundColor:"rgba(255, 255, 255, 0.77)"})
.eq(r%c).css({backgroundColor:"rgba(0, 0, 0, 0.77)"});u=Math.round(f/g);a.onSlideShow.
call(this,h.find("."+a.slideClass).eq(u%c))}function C(){d.width("100%");
h.hide();n=d.width()<a.width?d.width():a.width;t=n/L;d.css({width:n+"px",
height:t+"px"});-1!=a.animation.indexOf("slide")?(e=n/2/Math.tan(Math.PI/
c),k=n/2*Math.tan(2*Math.PI/c)+"px"):-1!=a.animation.indexOf("scroll")?(e=t/2/Math.tan(Math.PI/c),
k=t/2*Math.tan(2*Math.PI/c)+"px"):"fade"==a.animation&&(e=n/2/Math.tan(Math.PI/c),
k=n/2*Math.tan(2*Math.PI/c)+"px");
d.find("."+a.slideClass).each(function(d){var c=b(this);
-1!=a.animation.indexOf("slide")?p="rotateY("+g*d+"deg) translateZ("+e+"px)":-1!=a.animation.indexOf
("scroll")?p="rotateX("+g*d+"deg) translateZ("+e+"px)":"fade"==a.animation
&&(p="rotateY("+g*d+"deg) translateZ("+e+"px)");
c.css({transform:p})});
k=a.perspective||k;h.css({transform:"translateZ("+-e+"px) rotateY("+-f+"deg)"});h.show();
d.css({perspective:k})}function M(a,d){var c,D,e,b,h,g,k;a.on("touchstart",function(a)
{a=a.originalEvent.changedTouches[0];c="none";D=a.pageX;
e=a.pageY;k=(new Date).getTime()}).on("touchmove",function(a){a.preventDefault()})
.on("touchend",function(a){a=a.originalEvent.changedTouches[0];
b=a.pageX-D;h=a.pageY-e;g=(new Date).getTime()-k;
700>=g&&(20<=Math.abs(b)&&100>=Math.abs(h)?c=0>b?"left":"right":20<=Math.abs(h)&&
100>=Math.abs(b)&&(c=0>h?"up":"down"));d(c)})}var a=b.extend(!0,{},{width:innerWidth,height:innerHeight,
slides:[],slideLayout:"fill",perspective:0,animation:"slide3D",animationCurve:"ease",
animationDuration:700,animationInterval:2E3,autoplay:!0,controls:!0,slideClass:"jR3DCarouselSlide",
navigation:"circles",rotationDirection:"rtl",onSlideShow:function(){}},E),d=this,n=a.width,
t=a.height,L=a.width/a.height,h=b("<div class='jR3DCarousel' />").css({width:"100%",
height:"100%",transition:"transform "+
a.animationDuration+"ms "+a.animationCurve,transformStyle:"preserve-3d"}).appendTo(d),
u=0,r=1,y=new w,l,m,v,g,f=0,e,k,p,c=a.slides.length||d.find("."+a.slideClass).length;
(function(){function f(){"rtl"==a.rotationDirection?
(l=b("<div class='previous controls' style='left: 0.1em;'>&lang;</div>"),
m=b("<div class='next controls' style='right: 0.1em;'>&rang;</div>"))
:(l=b("<div class='previous controls' style='right: 0.1em;'>&rang;</div>"),
m=b("<div class='next controls' style='left: 0.1em;'>&lang;</div>"));
l.add(m).css({position:"absolute",top:"50%",zIndex:1,
transform:"translateY(-50%)",fontSize:"4em",
color:"rgba(255, 255, 255, 0.97)",cursor:"pointer",userSelect:"none"}).appendTo(d).hide();
l.on("click",function(){r=u-1;y.run(a.animation,r);z()});
m.on("click",function(){A()});d.on("mouseenter touchstart",
function(){l.add(m).show()}).on("mouseleave touchcancel",
function(){l.add(m).hide()});l.hover(function(){l.css({color:"rgba(201, 201, 201, 0.97)"})},
function(){l.css({color:"rgba(255, 255, 255, 0.97)"})});
m.hover(function(){m.css({color:"rgba(201, 201, 201, 0.97)"})},
function(){m.css({color:"rgba(255, 255, 255, 0.97)"})});
b(document).on("keydown",function(c){var b=d[0].getBoundingClientRect();
(b=0<b.bottom&&0<b.right&&b.left<(innerWidth||document.documentElement.clientWidth)
&&b.top<(innerHeight||document.documentElement.clientHeight))&&37==c.which?(q(),
"rtl"==a.rotationDirection?l.click():m.click()):b&&39==c.which&&(q(),
"rtl"==a.rotationDirection?m.click():l.click())});M(d,function(b){q();"left"==
b?m.click():"right"==b?l.click():-1!=a.animation.indexOf("scroll")
&&("down"==b?m.click():"up"==b&&l.click())})}function v()
{for(var e=b("<div class=navigation />").css({position:"absolute",bottom:0,right:0})
,g=0;g<c;g++)e.append("<div class=nav></div>");"circles"==a.navigation&&e.find(".nav").css({borderRadius:"12px"});
e.find(".nav").css({display:"inline-block",margin:"5px",
cursor:"pointer",backgroundColor:"rgba(255, 255, 255, 0.77)",
width:"12px",height:"12px",transition:"all "+a.animationDuration+
"ms ease"}).first().css({backgroundColor:"rgba(0, 0, 0, 1)"});
h.after(e);d.on("click",".nav",function(){B(b(this).index())})}
(function(){-1!=a.animation.indexOf("slide")?(e=n/2/Math.tan(Math.PI/c),
k=n/2*Math.tan(2*Math.PI/c)+"px"):-1!=a.animation.indexOf("scroll")?(e=t/2/Math.tan(Math.PI/c),
k=t/2*Math.tan(2*Math.PI/c)+"px"):"fade"==a.animation&&(e=n/2/Math.tan(Math.PI/c),
k=n/2*Math.tan(2*Math.PI/c)+"px");g=360/c;if(a.slides.length)for(var f=0;
f<a.slides.length;f++){var l=b("<div class='jR3DCarouselSlide' data-index="+
f+" />").append("<img src='"+a.slides[f].src+"' alt='"+a.slides[f].
alt+"' />");-1!=a.animation.indexOf("slide")?p="rotateY("+g*f+"deg) translateZ("+e+"px)":-1!=a.animation
.indexOf("scroll")?p="rotateX("+g*f+"deg) translateZ("+e+"px)":"fade"==a.animation&&
(p="rotateY("+g*f+"deg) translateZ("+e+"px)");l.css({transform:p});h.append(l)}else d.find("."+a.slideClass)
.each(function(c){var d=b(this).attr("data-index",c);
-1!=a.animation.indexOf("slide")?p="rotateY("+g*c+"deg) translateZ("+e+"px)":-1!=a.animation.indexOf("scroll")?
p="rotateX("+g*c+"deg) translateZ("+e+"px)":"fade"==a.animation&&(p="rotateY("+g*c+"deg) translateZ("+e+"px)");
d=d.css({transform:p}).detach();h.append(d)});
h.find("."+a.slideClass).css({position:"absolute",left:0,top:0,width:"100%",
height:"100%",backfaceVisibility:"hidden"}).find("img").css({width:"100%",height:"100%",objectFit:a.slideLayout});
k=a.perspective||k;d.css({perspective:k,width:n+"px",height:t+"px",position:"relative",
overflow:"visible"})})();a.controls&&f();a.navigation&&v();addEventListener("resize",
C);C();if(a.autoplay){var w=function(){document.hidden?q():x()};
document.addEventListener("visibilitychange",w);
addEventListener("beforeunload",function(){document.removeEventListener("visibilitychange",w)});
d.hover(function(){clearTimeout(b(this).data("timeout"));
q()},function(){b(this).data("timeout",setTimeout(function(){x()},
a.animationInterval+a.animationDuration))});
x()}})();w.prototype.run=function(a,b){this.animations[a](b)};
this.showSlide=function(a){B(a%c)};this.getCurrentSlide=function(){return h.find("."+
a.slideClass).eq(u%c)};this.getSlideByIndex=function(b){return h.
find("."+a.slideClass+"[data-index="+b+"]")};this.showPreviousSlide=function(){l.click()};
this.showNextSlide=function(){m.click()};this.playCarousel=function(){x()};

this.pauseCarousel=function(){q()};return this}});


Step:4:- Save the Slider Image : According to Image Name.


Thanks







Comments

Post a Comment

Popular posts from this blog

How to Create a Login With Signup form in php

-
Image
Code of the Login & Signup Form in php. Login & Signup form is must for websites.  Check Code Below Here.. Important Note:-  If you want run this code. First of all you need to create a mysql database and Table.  Create a database called (registration). In the registration database, add a table called (users).  The users table will take the following four fields. 1- id  - int(11)  autoincrement   primary key 2- username  -  varchar(100)    collation(latin1_swedish)_ci 3- email  -  varchar(100) 4- password  -  varchar(100) Step:1:- Create a 5 php pages... 1- index.php 2- errors.php 3- login.php 4- register.php 5- server.php Step:2:- Write the Code of (index.php) page. <?php    session_start();    if (!isset($_SESSION['username'])) {     $_SESSION['msg'] = "You must log in first";     header('location: login.php');   }   if (isset($_GET['lo
Read more

Code of the filter Drop-down Menu.

-
Image
Drop-Down Code below here.. Step-1:-   Create a  HTML Page . 1 - index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Search/Filter Dropdown</h2> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a>
Read more

Create a Responsive mega Drop Down.

-
Image
Mega Dropdown Code below here.. Step-1 :-   Create a  HTML Page . 1-  index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html lang="en">   <head>     <title>SmartMenus jQuery Website Menu - jQuery Plugin</title>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">         <link href="demo.css" rel="stylesheet" type="text/css" />   </head>   <body>     <nav id="main-nav">       <ul id="main-menu" class="sm sm-blue" >         <li><a href="#">Home</a></li>         <li><a href="#">About</a>           <ul>             <li><a href="#">Introduction to SmartMenus jQuery</a></li>      
Read more