bootstrap carousel custom setting

carousel fade effect:
css:
.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
}
- add class '.carousel-fade' in html with carousel class

animate effect to image:
- add class '.kenburns-top' or '.kenburns-right' with item class of caousel
/*animation of caousel*/
.kenburns-top {
    -webkit-animation: kenburns-top 10s ease-out both;
    -moz-animation: kenburns-top 10s ease-out both;
    animation: kenburns-top 10s ease-out both;
}
.kenburns-right {
    -webkit-animation: kenburns-right 10s ease-in reverse backwards;
    -moz-animation: kenburns-right 10s ease-in reverse backwards;
    animation: kenburns-right 10s ease-in reverse backwards;
}
@-webkit-keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}@keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}
@keyframes kenburns-right {
  0% {
    transform: scale(1) translate(0, 0);
    transform-origin: 84% 50%;
  }
  100% {
    transform: scale(1.25) translateX(20px);
    transform-origin: right;
  }
}

As background slider :
- make header separated and give to position:absolute
- make separated section for slider and other content like search, header etc.
   - give section to position:relative
   - and other portion are in absolute position
- if you want only one image then nothing to do : give image as background. that's it