SlideBox CSS not applying for Images[Solved]

ionic-v1
1

I have added Slidebox with images size 640X960.I have added CSS from here
My html file for Slidebox is below

      <ion-slide-box on-slide-changed="slideChanged(index)" auto-play="true" does-continue="true" class="slider" id="mySlider">
      <ion-slide class="slide-group" >
       <div class="slide">
          <img src="img/slide1.png">
      </div>            
      </ion-slide>
      
      <ion-slide class="slide-group" >
       <div class="slide">
          <img src="img/slide2.png">
      </div>
      </ion-slide>
      
      <ion-slide class="slide-group" >
       <div class="slide">
          <img src="img/slide3.png">
      </div>
      </ion-slide>
      
 <ion-slide class="slide-group" >
       <div class="slide">
          <img src="img/slide4.png">
      </div>
      </ion-slide>
    </ion-slide-box>		
  </ion-view>

and my CSS is as below

      body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;

   }
 .slider {
width: 100%;
overflow: hidden;
background-color: #000
}
.slider .slide-group {
position: relative;
font-size: 0;
white-space: nowrap;
-webkit-transition: all 0s linear;
-moz-transition: all 0s linear;
transition: all 0s linear
}
.slider .slide-group .slide {
display: inline-block;
width: 100%;
height: 100%;
font-size: 14px;
vertical-align: top
}
@media screen and (min-width:768px) {
.slider .slide {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
background-size: cover
}
.slider .slide img {
   position: fixed;
   width: 120%;
 height: 120%;
 background-size: cover;
 }

 .component-example .slider, .component-example .slider .slide {
height: 300px
}
.component-example .slide img {
width: 100%
}
.component-example .slide-text {
position: absolute;
top: 45%;
left: 0;
width: 100%;
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 0 0 10px rgba(0,0,0,.5)
   }
 }

How can i resolve this.Except that auto resize in the slide images all other functionality are working.

2

Can you throw this into a codepen?

3

Hey,Sorry I dont have codepen Account.

4

Hi I have updated my code into code pen .here is the link Here