[MKnost]

Hallo Forum, ich hoffe, ich bin hier richtig

Ich habe auf einer HP einen Slider, den ich nun in ein responsive Format bringen soll.

Folgendes Problem:

Die index.php ist wie folgt gebaut:

<div class="hero hero-slider">
  <ul class="slides">
    <li data-bg-image="dummy/slide-1.jpg">
      <div class="container">
        <h2 class="slide-desc">Dartgemeinschaft Wagenrad<br>Eine starke Gemeinschaft...</h2>
      </div>
    </li>
    <li data-bg-image="dummy/slide-2.jpg">
      <div class="container">
        <h2 class="slide-desc">Die coolsten Getränke...! <br>Die coolste Location...! <br> Die coolsten Mitglieder...!</h2>
      </div>
    </li>
    <li data-bg-image="dummy/slide-3.jpg">
      <div class="container">
        <h2 class="slide-desc">Und die coolste Tresen-Schnegge !!!</h2>
      </div>
    </li>
  </ul>
</div> <!-- .hero-slider -->

Die Bilder, um die es geht, werden im <li data-bg-image= geladen.

Das passiert über folgendes jquery-script

(function($, document, window){
	$(document).ready(function(){
	// hero-slider
	$(".hero-slider").flexslider({
		controlNav: true,
		directionNav: false,
		animation: "fade"
	});
	$(".menu-toggle").click(function(){
		$(".mobile-navigation").slideToggle();
	});
	$(".mobile-navigation").append($(".main-navigation .menu").clone());
	// Changing background image using data-attribute
	$("[data-bg-image]").each(function(){
		var image = $(this).data("bg-image");
		$(this).css("background-image", "url("+image+")");
	});
	});
	$(window).load(function(){
	});
})(jQuery, document, window);

Mein Problem ist nun, dass ich abhängig von der Auflösung die Grafiken gegen kleinere Bilder austauschen möchte.

Ich hab von jquery bzw JavaScript leider nur sehr wenig Ahnung. Hat vlt jemand einen Tipp, wo ich dabei anfange?

LG Micha