<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="section" id="featuredCollection">
<h2 class="section-title">
Featured Collection
</h2>
<div class="container-fluid">
<div class="row featured-collection-row">
<div class="col-sm-4 col-6">
<div class="collection-item"
style="background-image: url('https://images.unsplash.com/photo-1515263487990-61b07816b324?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80');">
</div>
</div>
<div class="col-sm-4 col-6">
<div class="collection-item"
style="background-image: url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80');">
</div>
</div>
<div class="col-sm-4 col-6">
<div class="collection-item"
style="background-image: url('https://images.unsplash.com/photo-1552419041-2150b77a7781?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80');">
</div>
</div>
<div class="col-sm-4 col-6">
<div class="collection-item"
style="background-image: url('https://images.unsplash.com/photo-1519227355453-8f982e425321?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80');">
</div>
</div>
<div class="col-sm-4 col-6">
<div class="collection-item"
style="background-image: url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80');">
</div>
</div>
</div>
<button class="custom-slick-arrow prev slick-arrow hidden">
<svg width="23" height="39" viewBox="0 0 23 39" style="transform: scale(1);">
<path class="slideshow-arrow" d="M154.994,259.522L153.477,261l-18.471-18,18.473-18,1.519,1.48L138.044,243Z" transform="translate(-133 -225)"></path>
</svg>
</button>
<button class="custom-slick-arrow next slick-arrow">
<svg width="23" height="39" viewBox="0 0 23 39" style="transform:scale(1);">
<path class="slideshow-arrow" d="M857.005,231.479L858.5,230l18.124,18-18.127,18-1.49-1.48L873.638,248Z" transform="translate(-855 -230)"></path>
</svg>
</button>
</div>
</section>
*, ::after, ::before {
box-sizing: border-box;
}
div {
display: block;
}
.section {
padding-top: 4rem;
padding-bottom: 0;
}
.section .section-title {
text-align: center;
margin-bottom: 4rem;
color: #012644;
text-transform: capitalize;
font-size: 2rem;
}
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#featuredCollection .row {
flex-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
.row {
display: flex;
margin-right: -15px;
margin-left: -15px;
}
#featuredCollection .row>.col-6 {
padding-left: 0;
padding-right: 0;
margin-left: 15px;
margin-right: 15px;
position: relative;
width: 100%;
}
#featuredCollection .row>.col-sm-4 {
flex: 0 0 auto;
max-width: 45%;
}
#featuredCollection .collection-item {
height: calc(45vw - 6.75px);
}
#featuredCollection .collection-item {
flex-direction: column;
margin-bottom: 10px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.collection-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.background-cover, .collection-item {
background: no-repeat 50% scroll;
background-size: cover;
}
.slick-arrow {
background-color: rgba(1,38,68,0.3); //add this
border: none;
box-shadow: none;
position: absolute;
top: 50%;
margin-top: -28px;
z-index: 2;
font-size: 2rem;
}
.slick-arrow svg {
fill: #fff;
}
svg {
overflow: hidden;
vertical-align: middle;
}
.slick-arrow.prev { //add this
left: 0;
}
.slick-arrow.next {
right: 0;
}
.hidden {
display: none;
}
.row::-webkit-scrollbar { display: none;}
// duration of scroll animation
var scrollDuration = 600;
// paddles
var leftPaddle = document.getElementsByClassName('prev');
var rightPaddle = document.getElementsByClassName('next');
// get items dimensions
var itemsLength = $('.col-6').length;
var itemSize = $('.col-6').outerWidth(true);
// get some relevant size for the paddle triggering point
var paddleMargin = 20;
// get wrapper width
var getMenuWrapperSize = function() {
return $('.container-fluid').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
// the wrapper is responsive
$(window).on('resize', function() {
menuWrapperSize = getMenuWrapperSize();
});
// size of the visible part of the menu is equal as the wrapper size
var menuVisibleSize = menuWrapperSize;
// get total width of all menu items
var getMenuSize = function() {
return itemsLength * itemSize;
};
var menuSize = getMenuSize();
// get how much of menu is invisible
var menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled to the left
var getMenuPosition = function() {
return $('.row').scrollLeft();
};
// finally, what happens when we are actually scrolling the menu
$('.row').on('scroll', function() {
// get how much of menu is invisible
menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled so far
var menuPosition = getMenuPosition();
var menuEndOffset = menuInvisibleSize - paddleMargin;
// show & hide the paddles
// depending on scroll position
if (menuPosition <= paddleMargin) {
$(leftPaddle).addClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition < menuEndOffset) {
// show both paddles in the middle
$(leftPaddle).removeClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition >= menuEndOffset) {
$(leftPaddle).removeClass('hidden');
$(rightPaddle).addClass('hidden');
}
});
// scroll to left
$(rightPaddle).on('click', function() {
$('.row').animate( { scrollLeft: "+="+menuVisibleSize}, scrollDuration);
});
// scroll to right
$(leftPaddle).on('click', function() {
$('.row').animate( { scrollLeft: "-="+menuVisibleSize }, scrollDuration);
});
