Responsive Slider with separate images (Desktop, Tablet & Moile)

by Faisal Khan Janjua

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="slide-img-container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">

        <div class="item active">
          <img src="https://dummyimage.com/920x480/000000/fff" />
            <div class="slide-string-holder">
              <span>https://dummyimage.com/1020x480/000000/fff</span>
              <span>https://dummyimage.com/720x480/000000/0f9</span>
              <span>https://dummyimage.com/420x480/000000/99f</span>
            </div>
        </div>
        <div class="item">
          <img src="https://dummyimage.com/920x480/000000/fff" />
            <div class="slide-string-holder">
              <span>https://dummyimage.com/1020x480/000000/fff</span>
              <span>https://dummyimage.com/720x480/000000/0f9</span>
              <span>https://dummyimage.com/420x480/000000/99f</span>
            </div>
        </div>
        <div class="item">
          <img src="https://dummyimage.com/920x480/000000/fff" />
            <div class="slide-string-holder">
              <span>https://dummyimage.com/1020x480/000000/fff</span>
              <span>https://dummyimage.com/720x480/000000/0f9</span>
              <span>https://dummyimage.com/420x480/000000/99f</span>
            </div>
        </div>
        <div class="item">
          <img src="https://dummyimage.com/920x480/000000/fff" />
            <div...

CSS

.slide-img-container img{
  width:100%;
  height:auto;
}
.slide-string-holder{
  display:none;
}

JavaScript

$(document).ready(function(){
	function res_slider(){
  	$('.item').each(function(){
    	var img_lg = $(this).find('.slide-string-holder span:nth-child(1)').text();
    	var img_md = $(this).find('.slide-string-holder span:nth-child(2)').text();
    	var img_sm = $(this).find('.slide-string-holder span:nth-child(3)').text();
      if ($(window).width() < 480) {
      	$(this).find('img').attr("src",img_sm);
      }
      else if ($(window).width() < 767) {
      	$(this).find('img').attr("src",img_md);
      }
      else{
      	$(this).find('img').attr("src",img_lg);
      }
      
    });
  }
  res_slider();
  $(window).on('resize', function(){
		res_slider();
  });
});