Onclick button slide the images

Column 1 is the tabs. Each tab is a separate slider.

Clicking on the tab will change the slider in Column 2.

Column 2 is a slider connected with column 3.

This means when the slide in column 2 changes, the image in column 3 will change with it.

Controls are attached to column 2 only. The image in column 3 is a 1:1 image.

I tried the following code :

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
    
    <style>
      .slider-number {
      font-size: 36px;
      text-align: center;
    }
    </style>
    
    <div class="orbit" role="region" data-orbit data-timer-delay="3000" data-use-m-u-i="false">
      <ul class="orbit-container">
        <button class="orbit-previous">&#9664;&#xFE0E;</button>
        <button class="orbit-next">&#9654;&#xFE0E;</button>
        <li class="orbit-slide is-active">
          <img class="orbit-image" src="//placehold.it/900x300/c69/f9c/?text=1" alt="">
        </li>
        <li class="orbit-slide">
          <img class="orbit-image" src="//placehold.it/900x300/9c6/cf9/?text=2" alt="">
        </li>
        <li class="orbit-slide">
          <img class="orbit-image" src="//placehold.it/900x300/69c/9cf/?text=3" alt="">
        </li>
        <li class="orbit-slide">
          <img class="orbit-image" src="//placehold.it/900x300/96c/c9f/?text=4" alt="">
        </li>
      </ul>
      <nav class="orbit-bullets">
        <button data-slide="0" class="is-active"></button>
        <button data-slide="1"></button>
        <button data-slide="2"></button>
        <button data-slide="3"></button>
      </nav>
      <div class="slider-number"></div>
    </div>
    <script>
      $(document).foundation();
    
    var totalItems = $('li.orbit-slide').length;
    var selectNumber = $('.slider-number');
    
    slideNumber();
    $('.orbit').on('slidechange.zf.orbit', slideNumber);
    
    function slideNumber() {
      var currentItem = $('li.orbit-slide.is-active').index() - 1;
      selectNumber.text(currentItem + '/' + totalItems);
    }
    </script>

I want to show this slider as per the above requirement for web view and for the mobile view I want to follow the below instructions :

Column 1 changes to the accordion.
Column 2 is a slider with images from column 3 as background images.

Onclick button slide the images

0 Answers