Odtnhj

swiper one

var swiperCurrent;

var swiper = new Swiper('.swiper-container-1', 
 init: false,
 pagination: '.swiper-pagination-1',
 nextButton: '.swiper-button-next-1',
 prevButton: '.swiper-button-prev-1',
 slidesPerView: 3,
 centeredSlides: true,
 paginationClickable: true,
 initialSlide: 2,
 spaceBetween: 22,
 breakpoints: 
 992: 
 slidesPerView: 1,
 spaceBetween: 10
 
 ,
 runCallbacksOnInit:true
);

function showSliderContent2(idx) 
 $('._ooredoo_banner_content_1> div').hide(0);
 $('._ooredoo_banner_content_1> div:eq('+ idx +')').fadeIn(200)


swiper.on('init', function (el) 
 showSliderContent(el.activeIndex);
);

swiper.on('transitionEnd', function (el) 
 if(swiperCurrent !== el.activeIndex)
 showSliderContent(el.activeIndex);
 swiperCurrent = el.activeIndex;
 
);

swiper.init();

swiper two

var swiperCurrent2;

var swiper = new Swiper('.swiper-container-2, 
 init: false,
 pagination: '.swiper-pagination-2',
 nextButton: '.swiper-button-next-2',
 prevButton: '.swiper-button-prev-2',
 slidesPerView: 3,
 centeredSlides: true,
 paginationClickable: true,
 initialSlide: 2,
 spaceBetween: 22,
 breakpoints: 
 992: 
 slidesPerView: 1,
 spaceBetween: 10
 
 ,
 runCallbacksOnInit:true
);

function showSliderContent2(idx) 
 $('._ooredoo_banner_content_2> div').hide(0);
 $('._ooredoo_banner_content_2> div:eq('+ idx +')').fadeIn(200)


swiper.on('init', function (el) 
 showSliderContent2(el.activeIndex);
);

swiper.on('transitionEnd', function (el) 
 if(swiperCurrent2 !== el.activeIndex)
 showSliderContent2(el.activeIndex);
 swiperCurrent2 = el.activeIndex;
 
);

swiper.init();

swiper three

var swiperCurrent3;

var swiper = new Swiper('.swiper-container-3’, 
 init: false,
 pagination: '.swiper-pagination-3',
 nextButton: '.swiper-button-next-3',
 prevButton: '.swiper-button-prev-3',
 slidesPerView: 3,
 centeredSlides: true,
 paginationClickable: true,
 initialSlide: 2,
 spaceBetween: 22,
 breakpoints: 
 992: 
 slidesPerView: 1,
 spaceBetween: 10
 
 ,
 runCallbacksOnInit:true
);

function showSliderContent3(idx) 
 $('._ooredoo_banner_content_3> div').hide(0);
 $('._ooredoo_banner_content_3> div:eq('+ idx +')').fadeIn(200)


swiper.on('init', function (el) 
 showSliderContent3(el.activeIndex);
);

swiper.on('transitionEnd', function (el) 
 if(swiperCurrent3 !== el.activeIndex)
 showSliderContent3(el.activeIndex);
 swiperCurrent3 = el.activeIndex;
 
);

swiper.init();

Something like the following (untested) code might help: All I did was to factor out the common code into a reusable function and use template strings to fill in the missing parts, then map that function over the 1, 2, and 3 partial ids. This means we no longer need the 2 and 3 suffixes on some of the variables; they are only available inside the closures generated by the callback to map.

There are likely bugs in this, either reusing something I shouldn't or the reverse: making something dynamic that doesn't have to be. In the first case, if you can continue to use the id to distinguish it, great. If not, you might need one ore more additional variables, and the map statement will have to get a little more complex.

const makeSwiper = (id) => 
 var swiperCurrent;

 var swiper = new Swiper('.swiper-container-2', 
 init: false,
 pagination: `.swiper-pagination-$id`,
 nextButton: `.swiper-button-next-$id`,
 prevButton: `.swiper-button-prev-$id`,
 slidesPerView: 3,
 centeredSlides: true,
 paginationClickable: true,
 initialSlide: 2,
 spaceBetween: 22,
 breakpoints: 
 992: 
 slidesPerView: 1,
 spaceBetween: 10
 
 ,
 runCallbacksOnInit:true
 );

 function showSliderContent(idx) 
 $(`._ooredoo_banner_content_$id> div`).hide(0);
 $(`._ooredoo_banner_content_$id> div:eq($idx)`).fadeIn(200)
 

 swiper.on('init', function (el) 
 showSliderContent(el.activeIndex);
 );

 swiper.on('transitionEnd', function (el) 
 if(swiperCurrent !== el.activeIndex)
 showSliderContent(el.activeIndex);
 swiperCurrent = el.activeIndex;
 
 );

 return swiper


const swipers = [1, 2, 3].map(makeSwiper)