Change image background of div on click

Question

I'm trying to build my own slider overlay using javascript and razor code.

If the slider contains 3 images then there will be 3 "smaller" images on the bottom. What I want to do is make it possible to click on one of the bottom images and once that is done, the top slider change image.

here is my html + razor part:

@{
 var slideshow = Model.Value<IEnumerable<IPublishedContent>>("SlideShowImages"); // From Umbraco published model
 }
<section class="background-overlay-container" style="margin: 0; text-align: center;">
  @foreach (var item in slideshow)
    {
        <div class="slideshow" style="background: url('@item.Url')left center/100% 140% no-repeat !important;">
            <h3 style="position:absolute"></h3>
            <button class="button-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
    }
</section>
<div class="dots" style="border: 0px solid red; width:100%; display:block; position:relative; padding:12px; text-align:center">
    @foreach (var item in slideshow)
    {
        <img src="@item.Url" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv()" />
    }

</div>

and here is the javascript part which is not working. What I am trying to write, is get the current path of the clicked image and update the top div background with it:

function currentDiv() {
var imgFullURL = document.querySelector('dots.img');
var slide = document.getElementsByClassName("slideshow").item(0);
slide.style.backgroundImage = "url('" + imgFullURL + "')";
}

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slideshow");
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex - 1].style.display = "block";
}

BROWSER OUTPUT

 <section class="background-overlay-container" style="margin: 0; text-align: center;">
        <div class="slideshow" style="background: url('/media/xk5bmxzg/book1.jpg')left center/100% 140% no-repeat !important;">
            <h3 style="position:absolute"></h3>
            <button class="button-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
        <div class="slideshow" style="background: url('/media/qf3laila/book6.png')left center/100% 140% no-repeat !important;">
            <h3 style="position:absolute"></h3>
            <button class="button-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
        <div class="slideshow" style="background: url('/media/qqjpadbt/book5.jpg')left center/100% 140% no-repeat !important;">
            <h3 style="position:absolute"></h3>
            <button class="button-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
    </section>
<div class="dots" style="border: 0px solid red; width:100%; display:block; position:relative; padding:12px; text-align:center">
        <img src="/media/xk5bmxzg/book1.jpg" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv()" />
        <img src="/media/qf3laila/book6.png" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv()" />
        <img src="/media/qqjpadbt/book5.jpg" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv()" />

</div>

Answer 1

Here i have edited some code hope this will help you.

 function currentDiv(img) { var slide = document.getElementsByClassName("slideshow").item(0); slide.style.backgroundImage = "url('"+img.src+"')"; } var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("slideshow"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "block"; var images=document.querySelector(".dots").getElementsByTagName("img"); x[slideIndex - 1].style.backgroundImage = "url('"+images[slideIndex - 1].src+"')"; document.querySelector(".dots").getElementsByTagName("img") }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="background-overlay-container" style="margin: 0; text-align: center;"> <div class="slideshow" style="background: url('/media/xk5bmxzg/book1.jpg')left center/100% 140% no-repeat !important;"> <h3 style="position:absolute"></h3> <button class="button-left" onclick="plusDivs(-1)">&#10094;</button> <button class="button-right" onclick="plusDivs(1)">&#10095;</button> </div> <div class="slideshow" style="background: url('/media/qf3laila/book6.png')left center/100% 140% no-repeat !important;"> <h3 style="position:absolute"></h3> <button class="button-left" onclick="plusDivs(-1)">&#10094;</button> <button class="button-right" onclick="plusDivs(1)">&#10095;</button> </div> <div class="slideshow" style="background: url('/media/qqjpadbt/book5.jpg')left center/100% 140% no-repeat !important;"> <h3 style="position:absolute"></h3> <button class="button-left" onclick="plusDivs(-1)">&#10094;</button> <button class="button-right" onclick="plusDivs(1)">&#10095;</button> </div> </section> <div class="dots" style="border: 0px solid red; width:100%; display:block; position:relative; padding:12px; text-align:center"> <img src="https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv(this)" /> <img src="https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv(this)" /> <img src="https://thumbs.dreamstime.com/b/autumn-oak-leaf-fantastic-beautiful-spray-bubbles-blue-background-magic-autumn-blue-background-yellow-oak-leaf-158238643.jpg" width="150" height="90" style="display:inline-block; cursor:pointer;" onclick="currentDiv(this)" /> </div>