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
I know there are already ready made sliders on the net but I’m building from scratch in order for me to learn.
(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);
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
/* -- End Carousel -- */
/*# sourceMappingURL=style.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
<i class="fa fa-angle-left" aria-hidden="true">prev</i>
</li>
<li class="next">
<i class="fa fa-angle-right" aria-hidden="true">next</i>
</li>
</ul>
</div>
</div>