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.
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>