How can I change backgrounds on a slider without using .style.backgroundImage? Is there a way to do it by adding a class to the slider or some other method?
'use strict'
let backgroundSlides = ['url(\'/images/slider/burger-background.jpg\')',
'url(\'/images/slider/pizza-background.jpg\')',
'url(\'/images/slider/soup-background.jpg\')',
'url(\'/images/slider/sushi-background.jpg\')'
];
let sliderElement = document.querySelector('.slider');
let sliderBtn = document.querySelectorAll('.slider-button');
for (let i = 0; i < sliderBtn.length; i++) {
sliderBtn[i].addEventListener('click', function() {
sliderElement.style.backgroundImage = backgroundSlides[i];
});
}<div class="slider">
<div class="slider-btns">
<input type="radio" name="slider button" id="slider-btn-1">
<label class="slider-button" for="slider-btn-1"></label>
<input type="radio" name="slider button" id="slider-btn-2">
<label class="slider-button" for="slider-btn-2"></label>
<input type="radio" name="slider button" id="slider-btn-3">
<label class="slider-button" for="slider-btn-3"></label>
<input type="radio" name="slider button" id="slider-btn-4">
<label class="slider-button" for="slider-btn-4"></label>
</div>
</div>