Hello, welcome to therichpost.com. In this post, I will tell you How to make custom skew slider with jquery and css? I personally like jquery very much. Most of my code is full with jquery. When I stuck in php or other language then that stuckness I remove with jquery code. Today I am going to start with simple jquery code to make custom skew slider with jquery and css.
Here is the slider Images:
Here is the working code to make custom skew slider with jquery and css:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$( “.slide1” ).hover(
function() {
$(“.slide2”).stop().animate({left: ‘40%’});
$(“.slide3”).stop().animate({left: ‘80%’});
}, function() {
$(“.slide2”).stop().animate({left: ‘30%’});
$(“.slide3”).stop().animate({left: ‘60%’});
}
);
$( “.slide2” ).hover(
function() {
$(“.slide2”).stop().animate({left: ‘20%’});
$(“.slide3”).stop().animate({left: ‘80%’});
}, function() {
$(“.slide2”).stop().animate({left: ‘30%’});
$(“.slide3”).stop().animate({left: ‘60%’});
}
);
$( “.slide3” ).hover(
function() {
$(“.slide2”).stop().animate({left: ‘20%’});
$(“.slide3”).stop().animate({left: ‘45%’});
}, function() {
$(“.slide2”).stop().animate({left: ‘30%’});
$(“.slide3”).stop().animate({left: ‘60%’});
}
);
});
</script>
<style>
*{
margin: 0px;
padding:0px;
}
body{
overflow-x: hidden;
}
.slidercontainer{
width: 100%;
position: relative;
}
.slidercontainer .slide1{
position: absolute;
top:0;
width:60%;
}
.slidercontainer .slide2{
position: absolute;
top:0;
width:60%;
left: 30%;
transform: skewX(-10deg);
}
.slidercontainer .slide3{
position: absolute;
top:0;
width:60%;
left: 64%;
transform: skewX(-10deg);
}
.slidercontainer img{
width: 100%;
}
</style>
</head>
<body>
<div class=”slidercontainer”>
<div class=”slide1″>
<img src=”http://a.mktgcdn.com/p/VS8idJhIUrebLXNCVmWM6MBrJ0IZ-oy9kmXNHc45U5s/6000×3376.jpg”>
</div>
<div class=”slide2″>
<img src=”http://a.mktgcdn.com/p/VS8idJhIUrebLXNCVmWM6MBrJ0IZ-oy9kmXNHc45U5s/6000×3376.jpg”>
</div>
<div class=”slide3″>
<img src=”http://a.mktgcdn.com/p/VS8idJhIUrebLXNCVmWM6MBrJ0IZ-oy9kmXNHc45U5s/6000×3376.jpg”>
</div>
<div>
</body>
</html>
There are so many jquery code and css tricks and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com