You need to click on the thumbnail to put it in the background of the block with the class "graffiti-slider"

$(function() { let blockSlider = $('.graffiti-slider'); blockSlider.find('img').on('click', function() { let clickedSrcSlider = '"' + $(this).attr('src') + '"'; blockSlider.animate({ background: 'url(' + clickedSrcSlider + ')' }); console.log(clickedSrcSlider); }); }); 
 .graffiti-slider { width: 100%; min-height: 800px; background: url("https://i.imgur.com/kjoHXRw.jpg") no-repeat; background-size: cover; } .graffiti-slider .wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 800px; width: 1200px; margin: 0 auto; height: 100%; } .graffiti-slider__paragraph { color: #ffffff; font-family: "Outrunfuture"; font-size: 60px; font-weight: 400; line-height: 30px; } .graffiti-slider__article { margin-top: 73px; width: 570px; text-align: center; color: #ffffff; font-family: Montserrat; font-size: 14px; font-weight: 400; line-height: 36px; /* Text style for "L, orem ip" */ letter-spacing: 0.35px; } .graffiti-slider__slider-1, .graffiti-slider__slider-2, .graffiti-slider__slider-3, .graffiti-slider__slider-4 { position: absolute; width: 25%; height: 184px; z-index: 3; transition: 0.15s; } .graffiti-slider__slider-1 { left: 0; } .graffiti-slider__slider-2 { left: calc(25% - 5px); } .graffiti-slider__slider-3 { left: calc(50% - 5px); } .graffiti-slider__slider-4 { left: calc(75% - 5px); } .graffiti-slider__slider-1:hover, .graffiti-slider__slider-2:hover, .graffiti-slider__slider-3:hover, .graffiti-slider__slider-4:hover { transform: scale(0.9); box-sizing: content-box; border: 5px solid #ff443c; transition: 0.3s; transform-origin: center center; } .graffiti-slider__icons { display: flex; position: absolute; bottom: -92px; width: 100%; height: 194px; } 
 <!DOCTYPE html> <html lang="ru"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> </head> <body> <main class="graffiti-slider"> <div class="wrapper"> <span class="graffiti-slider__paragraph">Lorem Ipsum</span> <span class="graffiti-slider__article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin aliquam suscipit. Vestibulum ligula dolor, vehicula ac metus lobortis, lobortis maximus mauris</span> <div class="graffiti-slider__icons"> <img src="https://i.imgur.com/kjoHXRw.jpg" alt="" class="graffiti-slider__slider-1"> <img src="https://i.imgur.com/kjoHXRw.jpg" alt="" class="graffiti-slider__slider-2"> <img src="https://i.imgur.com/Ffxysn1.jpg" alt="" class="graffiti-slider__slider-3"> <img src="https://i.imgur.com/vQg76Xt.jpg" alt="" class="graffiti-slider__slider-4"> </div> </div> </main> </body>

I figured it out myself, made css instead of the animate method, but everything happens abruptly, I will look for another solution

    0