I am striving to replicate this specific layout using the items in the carousel:
https://i.sstatic.net/XVOuT.png
However, this is what I have managed to achieve so far: https://i.sstatic.net/5zrpx.png
Here you can find my code along with a fiddle http://jsfiddle.net/xvac9usr/8/:
HTML:
<html>
...
</html>
JS:
$(document).ready(() => {
var carousel = $(".carousel__list"),
carouselItems = $(".carousel__item"),
clickCount = (centerItemIndex = Math.ceil(carouselItems.length / 2)),
itemWidth =
carouselItems.width() +
parseInt(carouselItems.first().css("marginRight"));
const refreshChildPosition = () => {
for(let i = 0; i < carouselItems.length; ++i){
$(carouselItems[i]).css("left", itemWidth * i);
}
};
refreshChildPosition();
//carousel.width(itemWidth * carouselItems.length);
$(".carousel__next").click(e => {
e.preventDefault();
});
$(".carousel__prev").click(e => {
e.preventDefault();
moveRight();
});
});
CSS:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
...
By adjusting the position by subtracting 440, I was able to somewhat emulate a similar outcome. However, this solution is hardcoded and lacks responsiveness.