jquerypluginsjquery-pluginsslider

Looking for a jQuery plugin for home page main banner


Of course, I am not asking this question to get coding help.

Look at the banner of this site. The client is requesting such a banner for one of my new project. jquery is used for the project, so does anyone here know if a jquery plugin like the above can be used for the banner.

Hoping for some advice or help from someone. Sorry, if this is not relevant to SO.


Solution

  • Maybe you can write something yourself, shouldn't be too complicated achieving this result.

    This should get you started

    $('.item').on('click', function() {
        $('.item.open').removeClass('open');
        $(this).addClass('open')
    });
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-size: 100%;
    }
    
    .wrap {
      display: flex;
      width: 100%;
    }
    
    .item {
      height: 100vh;
      cursor: pointer;
      flex: 1;
      transition: all .5s ease;
    }
    
    .item1 {
      background: #96ceb4;
    }
    
    .item2 {
      background: #ffeead;
    }
    
    .item3 {
      background: #ff6f69;
    }
    
    .item4 {
      background: #ffcc5c;
    }
    
    .item.open {
      flex: 2;
      background: #a39193;
      cursor: default;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <div class="wrap">
      <div class="item item1 open"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
      <div class="item item4"></div>
    </div>