Fixed or focus responsive slider item in the middle and offset the last and first end of the slider

See more:

Javascript

CSS

HTML

I've been trying to figure out how I can position or fixed the slider item in the middle. Something like the design shown below. Slider is set in the middle and the edge of the screen shows the slides. Can this be done using just `CSS` or is it possible to do it via `javascript` so that it adjusts programmatically instead of using `CSS`. I have already made a work in progress but having trouble trying to achieve the desired layout. I'm planning to make it responsive also so that when I resize the browser the slider is focused in the middle all the time

Image of Slider Design


I know there are already ready made sliders on the net but I'm building from scratch in order for me to learn.




What I have tried:

(function ($) {
            'use strict';

            var carousel = {

                init : function() {

                    var carouselWidth = 0,
                        itemListContainer = $('.item-list').width(),
                        itemList = $('.carousel .item-list ul li');
                   

                    // Set Container Width
                    $('.carousel .item-list ul').children().each(function() {
                        carouselWidth += $(this).outerWidth();
                        $('.carousel .item-list ul').width(carouselWidth + 1000);
                    });
                  

                   // function dynamicItemWidth() {
                   //      if ( $('body') <= 1024 ) {
                   //          itemWidth = itemList.width( itemListContainer / 5 );
                   //      }

                   //      if ( $('body') <= 480 ) {
                   //          itemWidth = itemList.width( itemListContainer / 2 );
                   //      }

                   //      if ( $('body') <= 320 ) {
                   //          itemWidth = itemList.width( itemListContainer / 1 );
                   //      }

                   //  }

                    var itemWidth = itemList.width( itemListContainer / 5 ),
                        itemSize = itemWidth.width();

                    $('.carousel .item-list ul').prepend( $('.carousel .item-list ul li:last') );
                    $('.carousel .item-list ul').css('left', '-' +  itemSize + 'px');


                    $('.btns .next').click(function(){

                        var move = $('.carousel .item-list ul li').outerWidth();
                        var leftIndent = parseInt($('.carousel .item-list ul').css('left')) - move;

                        function animate( repeat, speed ) {
                            $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
                                $('.carousel .item-list ul').append( $('.carousel .item-list ul li:first') );
                                $('.carousel .item-list ul').css({'left' : '-' +  move + 'px'});

                                if ( repeat > 1 ) {
                                    animate( ( repeat - 1 ), speed );                     }
                            });
                        }

                        animate( 5, 100 );

                    });

                    $('.btns .prev').click(function() {

                        var move = $('.carousel .item-list ul li').outerWidth();
                        var leftIndent = parseInt($('.carousel .item-list ul').css('left')) + move;

                        function animate( repeat, speed ) {
                            $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
                                $('.carousel .item-list ul').prepend($('.carousel .item-list ul li:last'));
                                $('.carousel .item-list ul').css({'left' : '-' + move + 'px'});

                                if ( repeat > 1 ) {
                                    animate( ( repeat - 1 ), speed );
                                }
                            });
                        }

                        animate( 5, 100 );

                    });

                }

            }

            $(document).ready(function(){
                carousel.init();
            });

})(jQuery);

----------------------------------------------------------------------------

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* -- #Carousel -- */

.carousel {
    position: relative;
}
.carousel .item-list {
    overflow: hidden;
}
.carousel .item-list ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}
.carousel .btns {
    width: 100%;
    z-index: 10;
    top: 50%;
}
.carousel .btns li {
    display: inline-block;
    cursor: pointer;
}
.carousel.-aim-partners {
    position: relative;
}
.carousel.-aim-partners .item-list {
    max-width: 1204px;
    margin: 0 auto;
}
.carousel.-aim-partners .item-list ul li {
    float: left;
    width: 230px;
    margin-right: 40px;
    height: 110px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.carousel.-aim-partners .item-list ul li:nth-child(odd) {
    background-color: teal;
}
.carousel.-aim-partners .item-list ul li:nth-child(even) {
    background-color: #ccc;
}
.carousel.-aim-partners .btns {
    width: 110%;
    left: -70px;
}
.carousel.-aim-partners .btns li {
    width: 35px;
    height: 40px;
}
.carousel.-aim-partners .btns li.prev {
    background: url("../images/carousel-icon-arrow.png") no-repeat 15px 0;
}
.carousel.-aim-partners .btns li.next {
    background: url("../images/carousel-icon-arrow.png") no-repeat -20px 0;
}

<div class="wrapper">
    <div class='carousel -aim-partners'>

      <div class='item-list'>
          <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
              <li>7</li>
              <li>8</li>
              <li>9</li>
              <li>10</li>
              <li>11</li>
              <li>12</li>
              <li>13</li>
              <li>14</li>
              <li>15</li>
              <li>16</li>             
              
          </ul>
      </div>


        <ul class="btns">
            <li class="prev">
                class="fa fa-angle-left">
            </li>
            <li class="next">
                ^__i class="fa fa-angle-right">next
            </li>
        </ul>

    </div>
</div>