Click here to Skip to main content
15,174,850 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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>
Posted
Updated 31-Oct-17 1:52am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900