title: Image carousel onmouseover data-slide-to
body: <p>I have an image carousel written using HTML and PHP.
  This image carousel consist of 2 parts - main carousel (bigImgCarousel) and thumbnails (mCustomScrollbar).</p>
  
  <p>The thumbnail section named "mCustomScrollbar" showing the thumbnails of the images in the carousel. When the user clicks on the thumbnail, the main carousel will slide to the clicked image.</p>
  
  <pre><code>&lt;li data-target="#carouselCustom" data-slide-to="&lt;?php echo $thumbnailCnt; ?&gt;" class="&lt;?php if($thumbnailCnt == 0) { echo 'active'; } ?&gt;"&gt;
     &lt;img class="img-responsive" src="&lt;?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?&gt;" width="160px" onmouseover="bannerPreview()" /&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>How can I go about changing the clicking of thumbnail action to "onmouseover", such that when the user mouseover a particular thumbnail, the main carousel will slide to that image.</p>
  
  <p>The $thumbnailCnt refers to the slide number of the particular image in the carousel.</p>
  
  <pre><code>data-slide-to="&lt;?php echo $thumbnailCnt; ?&gt;"
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='carouselCustom' class='carousel slide' data-ride='carousel'&gt;
    &lt;div class='carousel-outer'&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class='carousel-inner'&gt;
        &lt;?php $bannerCnt=1; foreach($images as $image) { ?&gt;
        &lt;div id="bigImgCarousel" class="&lt;?php if($bannerCnt == 1) { echo 'active'; } ?&gt; item"&gt;
          &lt;a href="&lt;?php echo $image['url']; ?&gt;"&gt;
            &lt;img class="img-responsive" src="&lt;?php echo BANNER_PATH.'assets/landing_banner_images/'.$image['banner_path']; ?&gt;" height="585px" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" onmouseover="bannerPreview()" onmouseout="bannerOffPreview()"/&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;?php $bannerCnt++; } ?&gt;
  
        &lt;div id='banner-mouseover-area' style="position: absolute;bottom: 0px; display: none;"&gt;
          &lt;!-- Indicators --&gt;
          &lt;ol class='carousel-indicators mCustomScrollbar'&gt;
            &lt;?php $thumbnailCnt=0; foreach($images as $imageThumb) { ?&gt;
              &lt;li data-target="#carouselCustom" data-slide-to="&lt;?php echo $thumbnailCnt; ?&gt;" class="&lt;?php if($thumbnailCnt == 0) { echo 'active'; } ?&gt;"&gt;
                &lt;img class="img-responsive" src="&lt;?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?&gt;" width="160px" onmouseover="bannerPreview()" /&gt;
              &lt;/li&gt;
            &lt;?php $thumbnailCnt++; } ?&gt;
          &lt;/ol&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Left and right button to navigate to the next and previous image.</p>
  
  <pre><code>&lt;!-- Controls --&gt;
                      &lt;!-- Left --&gt;
                      &lt;div id="leftControl" style="position: absolute; margin-top: -20px; left: 20px;" class="tp-leftarrow tparrows default round" data-target="#carouselCustom" data-slide='prev'&gt;
                          &lt;div class="tp-arr-allwrapper"&gt;
                              &lt;div class="tp-arr-iwrapper"&gt;
                                  &lt;div class="tp-arr-imgholder" style="visibility: inherit; opacity: 1; background-image: url(&amp;quot;undefined&amp;quot;);"&gt;&lt;/div&gt;
                                  &lt;div class="tp-arr-imgholder2"&gt;&lt;/div&gt;
                                  &lt;div class="tp-arr-titleholder"&gt;&lt;/div&gt;
                                  &lt;div class="tp-arr-subtitleholder"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!-- Right --&gt;
                      &lt;div id="rightControl" style="position: absolute; margin-top: -20px; right: 20px;" class="tp-rightarrow tparrows default round" data-target="#carouselCustom" data-slide='next'&gt;
                          &lt;div class="tp-arr-allwrapper"&gt;
                              &lt;div class="tp-arr-iwrapper"&gt;
                                  &lt;div class="tp-arr-imgholder" style="visibility: inherit; opacity: 1; background-image: url(&amp;quot;undefined&amp;quot;);"&gt;&lt;/div&gt;
                                  &lt;div class="tp-arr-imgholder2"&gt;&lt;/div&gt;
                                  &lt;div class="tp-arr-titleholder"&gt;&lt;/div&gt;
                                  &lt;div class="tp-arr-subtitleholder"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>