<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />


<div class="wrapper">
  <div class="slider_container">
    <h3>your cart</h3>
    <ul class="bxslider">
  <li><img src="https://i.imgur.com/1mJWEZb.png" /></li>
  <li><img src="https://i.imgur.com/XASvbYf.png" /></li>
  <li><img src="https://i.imgur.com/dQJu1dt.png" /></li>
</ul>
  </div>
  <div class="checkout_container">
    <h3>credit card details</h3>
    <div class="form">
      <div class="input_item">
        <label>Name</label>
        <input type="text">
      </div>
      <div class="input_item">
        <label>Card number</label>
        <input type="text">
      </div>
      <div class="input_item grp">
        <div class="item">
          <label>Expiry date</label>
          <input type="text">
        </div>
        <div class="item">
          <label>CVV</label>
          <input type="text">
        </div>
      </div>
      <div class="btn">
        <a href="#">Proceed</a>
      </div>
    </div>
  </div>
</div>












<!-- 
<ul class="bxslider">
  <li><img src="https://i.imgur.com/PfrnFIu.png" /></li>
  <li><img src="https://i.imgur.com/1mJWEZb.png" /></li>
  <li><img src="https://i.imgur.com/dQJu1dt.png" /></li>
</ul> -->

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  font-family: 'Josefin Sans', sans-serif;
}

body{
  background: #ffd262;
}

.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 550px;
  height: 400px;
  display: flex;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.slider_container{
  width: 45%;
  height: 100%;
  background: #ffc32d;
  text-align: center;
}

.slider_container h3{
  margin-top: 30px;
  color: #fff;
  text-transform: uppercase;
}

.checkout_container{
  width: 55%;
  height: 100%;
  background: #fff;
  padding: 30px;
}

.checkout_container h3{
  margin-bottom: 25px;
  text-transform: uppercase;
  text-align: center;
}

.checkout_container .input_item,
.checkout_container .item{
  margin-bottom: 10px;
}

.checkout_container .input_item label{
  display: block;
  margin-bottom: 5px;
}

.checkout_container .input_item  input[type="text"]{
  width: 100%;
  border: none;
  background: #f2f2f2;
  padding: 10px;
}

.checkout_container  .btn{
  background:  #ffc32d;
  padding: 10px;
  margin-top: 15px;
}

.checkout_container  .btn a{
  display: block;
  color: #fff;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

/* bxslider */
.bx-wrapper{
  background: transparent !important;
  border: none !important;
  box-shadow: 0 0 !important;
  margin-top: 30px !Important;
}


.bx-wrapper .bx-pager.bx-default-pager a{
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: transparent !Important;
}

.bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus, .bx-wrapper .bx-pager.bx-default-pager a:hover{
  background: #fff !important;
}

$(document).ready(function(){
  $('.bxslider').bxSlider({
    controls: false
  });
});