-1

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.

1 Answer 1

1

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>

Not the answer you're looking for? Browse other questions tagged or ask your own question.