How to transfer and update content from one div to another jquery/javascript

Question

I have multiple pictures with texts wrapped in a bxslider. I want to copy the texts from the slides and place them in a div outside the bxslider wrapper. When the next slide is pressed, it should update the div with the corresponding text. I tried the following code with the Bxslider callback function onSlideNext, but it keeps displaying the first text:

        $slider.bxSlider({
        mode: 'fade',
        speed: 300,
        adaptiveHeight: true,
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',

            onSlideNext: function() {
                mirrorContent();
            }
        });

And here is the function:

        function mirrorContent() {
            $(".project-info-mirror").html($(".project-info").html());
        }

And here is the HTML

<div id="page-container">
    <div class="slider-container" id="slider-container">
        <div id="slider">
            <div class="item img">
                <div class="col">
                    <img src="img/img1.png"></img>
                        <div class="project-info" style="visibility:hidden">
                            <h2>Titel 1</h2>
                            Blah blah blah blah text
                        </div>
                    </div>
                </div>
            </div>
            <div class="item img">
                <div class="col">
                    <img src="img/img2.png"></img>
                        <div class="project-info" style="visibility:hidden">
                            <h2>Titel 2</h2>
                            Some other text
                        </div>
                    </div>
                </div>
            </div>
            <div class="item img">
                <div class="col">
                    <img src="img/img3.png"></img>
                        <div class="project-info" style="visibility:hidden">
                            <h2>Titel 3</h2>
                            Some other text
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class='content-info-mirror'></div>
</div>

Any help is greatly appreciated. I'm new to this.

Answer 1

You should use the parameters provided by the onSlideNext callback which returns the current element/slide.

$slideElement: jQuery element of the destination element

oldIndex: element index of the previous slide (before the transition)

newIndex: element index of the destination slide (after the transition)

You can send that element to copy the text to the .content-info-mirror div you should use .text() to grab text only rather than .html(), and you have a lot of error in your HTML structure I just made a demo below see if this helps you out, try to view it in FULL screen to see the content-info-mirro div's text changing on each next click

$('#slider').bxSlider({
  mode: 'fade',
  speed: 300,
  adaptiveHeight: true,
  // nextSelector: '#slider-next',
  // prevSelector: '#slider-prev',
  onSlideNext: function(elem, oldIndex, newIndex) {
    //console.log(elem.find('img').attr('src'), oldIndex, newIndex);
    mirrorContent(elem);
  }
});

function mirrorContent(elem) {
  $(".content-info-mirror").html($(elem).find('.project-info').text());
}

.content-info-mirror {
  background-color: #c8c8c8;
  text-align: center;
  font-size: 2rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>


<div class='content-info-mirror'>Content Element</div>
<div id="page-container">
  <div class="slider-container" id="slider-container">
    <div id="slider">
      <div class="item img">
        <div class="col">
          <img src="https://static.pexels.com/photos/356378/pexels-photo-356378.jpeg">
          <div class="project-info" style="visibility:hidden">
            <h2>Titel 1</h2>
            Blah blah blah blah text
          </div>
        </div>
      </div>

      <div class="item img">
        <div class="col">
          <img src="https://s7d1.scene7.com/is/image/PETCO/puppy-090517-dog-featured-355w-200h-d">
          <div class="project-info" style="visibility:hidden">
            <h2>Titel 2</h2>
            Some other text
          </div>
        </div>
      </div>
      <div class="item img">
        <div class="col">
          <img src="https://www.what-dog.net/Images/faces2/scroll001.jpg">
          <div class="project-info" style="visibility:hidden">
            <h2>Titel 3</h2>
            Some other text from the tile 3
          </div>
        </div>
      </div>
    </div>




  </div>