Bxslider repeated images in the box

Question

I'm creating a script so the user can change de background image of the website using bxslider, it's working, but not 100%, when I click on an image the background change, but it changes the others images as well, all the thumbnails transforms in that image. If I delete the div back_inicial it doesn't happens, but I need that div to make the box be relative positioned.

jQuery('.bxslider').bxSlider({
                minSlides: 3,
                maxSlides: 4,
                slideWidth: 170,
                slideMargin: 10,
            });

             jQuery('.bxslider li a').on('click', function(e){
                    e.preventDefault();
                    jQuery('#siteCorpo img').attr('src', 'jQuery(this).attr('href') );
             });
        ");


<div id="siteCorpo">

    <img class="img-responsive" src="{PATH_IMG}/fundotopo.jpg">


    <div class = "back_inicial" >

    <ul class="bxslider">
        <li ><a href="{PATH_IMG}/imagem1.jpg"><img class="img-responsive" src="{PATH_IMG}/imagem1.jpg" /></a></li>

        <li ><a href="{PATH_IMG}/imagem2.jpg"><img  src="{PATH_IMG}/imagem2.jpg" /></a></li>
        <li ><a href="{PATH_IMG}/imagem1.jpg"><img src="{PATH_IMG}/imagem1.jpg" /></a></li>
        <li><a href="{PATH_IMG}/imagem3.jpg"><img src="{PATH_IMG}/imagem3.jpg" /></a></li>
        <li><a href="{PATH_IMG}/fundotopo.jpg"><img src="{PATH_IMG}/fundotopo.jpg" /></a></li>

    </ul>

</div>


</div>

Answer 1

Is it helpful ? i have set a special class for img

jQuery('.bxslider li a').on('click', function(e){
                        e.preventDefault();
                        jQuery('img.bgChange').attr('src', 'jQuery(this).attr('href') );
    });

<img class="img-responsive bgChange" src="{PATH_IMG}/fundotopo.jpg">