/**
 * Retheme global slider for Swiperjs
 * @version 6.0.0
 */
function swiperjs() {
	const sliders = document.querySelectorAll(".js-swiper");
 
	sliders.forEach(function (slider, index) {
	   // Get id from parent dom for uniq navigation
	   const sliderId = slider.parentNode.getAttribute("id");
 
	   // Get slider option items
	   const options = JSON.parse(slider.getAttribute("data-options"));
 
	   // Set default options navigation and pagination
	   const defaults = {
		  navigation: {
			 nextEl: `#${sliderId} .swiper-button-next`,
			 prevEl: `#${sliderId} .swiper-button-prev`,
		  },
		  pagination: {
			 el: ".swiper-pagination",
			 clickable: true,
		  },
		  on: {
			slideChange: function () {
			  console.log('Slide has changed to: ', this.activeIndex);
			}
		  }
		  
	   };
 
	   const swiper = new Swiper(slider, Object.assign(defaults, options));
 
	   // Set navigation top offset
	   if (options.itemWrapper) {
		  const sliderSelector = document.querySelector(`#${sliderId}`);
		  const navigation = sliderSelector.querySelector(".rt-swiper-navigation");
		  const sliderItemWrapper = sliderSelector.querySelector(options.itemWrapper);
 
		  if (sliderItemWrapper && navigation) {
			 const sliderNewHeight = sliderItemWrapper.offsetHeight / 2;
 
			 navigation.querySelector(".swiper-button-next").style = `top: ${sliderNewHeight}px`;
			 navigation.querySelector(".swiper-button-prev").style = `top: ${sliderNewHeight}px`;
		  }
	   }
	});
}
document.addEventListener("DOMContentLoaded", swiperjs);
