For this question, copy the below question and update question label, row label, implement row text in "alt" attribute and the link for images to show as row text and "rightLegend" text.

  <radio 
   label="MX16"
   fir="off"
   randomize="0"
   rowLegend="both"
   shuffle="rows">
    <title>Which logo out of these you find better?</title>
    <col label="c1">c1</col>
    <col label="c2">c2</col>
    <row label="r1" alt="Pair 1" rightLegend="https://surveylink.in/Dechiper/swelly/pe1.png">https://surveylink.in/Dechiper/swelly/pe2.png</row>
    <row label="r2" alt="Pair 2" rightLegend="https://surveylink.in/Dechiper/swelly/pe3.png">https://surveylink.in/Dechiper/swelly/pe4.png</row>
    <row label="r3" alt="Pair 3" rightLegend="https://surveylink.in/Dechiper/swelly/pe5.png">https://surveylink.in/Dechiper/swelly/pe6.png</row>
    <row label="r4" alt="Pair 4" rightLegend="https://surveylink.in/Dechiper/swelly/pe7.png">https://surveylink.in/Dechiper/swelly/pe8.png</row>
    <row label="r5" alt="Pair 5" rightLegend="https://surveylink.in/Dechiper/swelly/pe9.png">https://surveylink.in/Dechiper/swelly/pe10.png</row>
    <style name="question.after"><![CDATA[
<div class="swelly_con"></div>
	<link rel="stylesheet" href="${KEDomain}/tools/swelly/swelly_style.css">
]]></style>
    <style name="question.element"><![CDATA[
\@if ec.simpleList
<div data-row="${ec.row.label}" data-col="${ec.col.label}" class="element $(rowStyle) $(levels) $(extraClasses) ${col.group.styles.ss.groupClassNames if col.group else (row.group.styles.ss.groupClassNames if row.group else "")} $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) ${"clickableCell" if isClickable else ""}"$(extra)>
    ${v2_insertStyle('el.label.start')}
    $(text)
    ${v2_insertStyle('el.label.end')}
</div>
\@else
<$(tag) $(headers) data-row="${ec.row.label}" data-col="${ec.col.label}" class="cell nonempty element $(levels) ${"desktop" if this.grouping.cols else "mobile"} border-collapse $(extraClasses) ${col.group.styles.ss.groupClassNames if col.group else (row.group.styles.ss.groupClassNames if row.group else "")} $(col.styles.ss.colClassNames) $(row.styles.ss.rowClassNames) ${"clickableCell" if isClickable else ""}"$(extra)>
    ${v2_insertStyle('el.label.start')}
    $(text)
    ${v2_insertStyle('el.label.end')}
</$(tag)>
\@endif
]]></style>
    <style name="question.after" wrap="ready"><![CDATA[
jQuery(".survey-buttons > input#btn_continue").hide();
var k = 1
jQuery(".row-elements").each(function(e){

var left_imgpath =jQuery(this).children("th.row-legend-left").clone().children().remove().end().text();
var right_imgpath =jQuery(this).children("th.row-legend-right").text();

var row_ref = jQuery(this).find("td.element").attr("data-row")
var lcol_ref = jQuery(this).find("td.element:eq(0)").attr("data-col")
var rcol_ref = jQuery(this).find("td.element:eq(1)").attr("data-col")

var leftel = jQuery(this).find("td.element:eq(0)").find("input.radio").attr("id")
var rightel = jQuery(this).find("td.element:eq(1)").find("input.radio").attr("id")
if (k == 1){
jQuery(".swelly_con").append('<div id="' + row_ref + '" class="swelly_row active"><div class="swelly_left"><div class="best_input_cell clickable" data-ansref="' + leftel + '"><img src="' + left_imgpath + '"/></div></div><div class="or">${res.orTXT}</div><div class="swelly_right"><div class="worst_input_cell clickable" data-ansref="' + rightel + '"><img src="' + right_imgpath + '"/></div></div></div>');
}
else{
jQuery(".swelly_con").append('<div id="' + row_ref + '" class="swelly_row hidenrow"><div class="swelly_left"><div class="best_input_cell clickable" data-ansref="' + leftel + '"><img src="' + left_imgpath + '"/></div></div><div class="or">${res.orTXT}</div><div class="swelly_right"><div class="worst_input_cell clickable" data-ansref="' + rightel + '"><img src="' + right_imgpath + '"/></div></div></div>');
}
k++;

});
jQuery(".swelly_row.active").find(".best_input_cell").animate({
    marginLeft: 0,
  }, 500, function() {
  });
jQuery(".swelly_row.active").find(".worst_input_cell").animate({
    marginLeft: 0,
  }, 500, function() {
   });

jQuery(".best_input_cell,.worst_input_cell").click(function(){
		jQuery("label[for='"+ jQuery(this).attr("data-ansref") + "']").click();
		jQuery(this).append("<div class='kk'><img class='fg' src='https://surveylink.in/Dechiper/swelly/swelly_heart.png'></div>");

var $curel = jQuery(this).parents(".swelly_row")
var $nextel = jQuery(this).parents(".swelly_row").next();
setTimeout(function(){

if(jQuery(".swelly_row:last-of-type").attr("id") != $curel.attr("id")){
 $curel.addClass("small previous hidenrow");	
}
else{
$nextel = $curel
}
$curel.find("or").hide();
$nextel.removeClass("hidenrow");
$nextel.addClass("active");


$nextel.find(".best_input_cell").animate({
    marginLeft: 0,
  }, 750, function() {
  });
$nextel.find(".worst_input_cell").animate({
    marginLeft: 0,
  }, 750, function() {
if(jQuery(".swelly_row:last-of-type").attr("id") != $curel.attr("id")){
   $curel.hide();
   }
   });
setTimeout(function(){
	$nextel.find(".or").show();
  },750);
  	if(jQuery(".swelly_row:last-of-type").attr("id") == $curel.attr("id")){
	jQuery(".yy").hide();
	jQuery(".survey-buttons > input#btn_continue").click();
			
}
},500);
	  
});
]]></style>
  </radio>