By using jquery image slider plugin we can create Responsive Image slider .In below example, I am using rslider plugin.

Step-1. Link files
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

Step-2. Add Markup
<ul class="rslides">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
</ul>

Step-3. Add CSS
. rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;We will code it using the FlexSlider plugin for the functionality and style it using CSS3
  margin: 0;
  }

. rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

. rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

. rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

Step-4. Hook up the slideshow
<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>

Step-5. Options you can customize
$(".rslides").responsiveSlides({
  auto: true,             
  speed: 300,           
  timeout: 2000,          
  pager: false,           
  nav: false,             
  random: false,          
  pause: false,           
  pauseControls: true,     
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
});