This slide should width should like 80% and next slide should be 20%. when user click on visible next slide it should show the next slide full and like this it continues.
To achieve the desired slide width of 80% for the current slide and 20% for the next slide when clicked, you can use CSS and JavaScript/jQuery. Here’s an example of how you can implement it:
HTML structure:
css
.slider {
position: relative;
width: 100%;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
width: 100%;
transition: all 0.5s ease;
}
.current-slide {
width: 80%;
}
.next-slide {
width: 20%;
left: 80%;
}