JQuery bespoke

index.html

<div class="container-fluid">
  <div class="row">
<div class="col-md-4 inactive before">
  
  </div>
<div class="col-md-4 active">

  </div>
<div class="col-md-4 inactive after">  
  </div>
    </div>
    <div class="col-md-4">
      <button class="btn prev" id="prev"> Prev </button>
      <button class="btn next" id="next"> Next </button>
      </div>
    </div>

jquery-bespoke.markdown

JQuery bespoke

A Pen by aayushi on CodePen.

License.

script.js

$(document).ready(function(){
 //addDiv(); 
 // console.log("here");
var arr= ["http://media2.intoday.in/indiatoday/images/Photo_gallery/indira-3_011012092607.jpg", "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQR56M5rLCPFwokUsL2ao9MEWIizExy-2NPs0Kz8LBtrkBfVsGWzg", "https://qph.ec.quoracdn.net/main-qimg-5ce56142df9a8721f4e1c9f0d5562949-c","http://pakistan360degrees.com/wp-content/uploads/2016/02/Parvez-Musharraf.jpg","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSX8ir3EtTJOybNt8H-sG8HIdeq6PccZ_ufFTn9b6re01TT-oojsA","http://static.rajnikantvscidjokes.in/wp-content/uploads/2016/07/397438-narendra-modi.jpg"];
  

 $(".before").empty();
$(".active").html("<img src= '" +arr[0]+ "'>");
$(".after").html("<img src='"+arr[1]+ "'>");
// $(".active div").hide();
var i=0;
$("button").on("click", function(){
  if(this.id=== "prev"){
    if(i>0){
    if(i>=2){
      $(".before").html("<img src= '" +arr[i-2]+ "'>");
      $(".after").html("<img src='"+arr[i]+ "'>");
    }
    else{
      $(".before").empty();
    }
    if(i>0){
      $(".active").html("<img src= '" +arr[i-1]+ "'>");
      $(".after").html("<img src='"+arr[i]+ "'>");
    }
    else{
     $(".active").html("<img src= '" +arr[i]+ "'>");
      $(".after").html("<img src='"+arr[i+1]+ "'>");
    }
      
     i-=1;
    }
  }
  else if(this.id=== "next"){
    if(i<arr.length){
    if((i+2)< arr.length){
      $(".after").html("<img src= '" +arr[i+2]+ "'>");
       $(".before").html("<img src='"+arr[i]+ "'>");
      
    }
    else{
       $(".after").empty();
    }
    if((i+1) < arr.length){
      $(".active").html("<img src= '" +arr[i+1]+ "'>");
       $(".before").html("<img src='"+arr[i]+ "'>");
      
    }
    else{
      $(".active").html("<img src= '" +arr[i]+ "'>");
      $(".before").html("<img src='"+arr[i-1]+ "'>");
     // i+=1;
      
    }
   // if(i=== arr.length-1){
      
    //}
    i+=1;
  }
  }
  
});
  
});
 

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

.active,.inactive{
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 5%;
  text-align:center;
}
.before{
  -webkit-transform: rotateZ(10deg); /* Safari */
    transform: rotateZ(10deg);
}

.after{
  -webkit-transform: rotateZ(-10deg); /* Safari */
    transform: rotateZ(-10deg);
}
.inactive{
  opacity: 0.5;
}
.active img{
  width:100%;
  height: 100%;
  padding: 1%;
  padding-right:4%;
}
.inactive img{
  width: 70%;
  height: 70%;
  
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

Sksk

Testing

Testing @

Ansn

Izis

Sjaj