Develop Reference

Make entire div act as a link except one div which also has another link

I have product layout page. Products will be displayed on this page, along with a picture, person's name, title, and description. However, all of those image, title, and description will have the same link, while the person name will have a separate link.
The problem is when i add "href" to the whole div, it also cover the person name and it work as the single link.
How can i make it cover for the whole product card with one link and, only person name for the another link.
By inspecting the first and second product cards, you may execute the code and locate my current problem.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #CCC;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group">
</div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->

Please check the second card which I updated
It's not a good practice to wrap a div with a tag since div is a block element though it will work. So you can simply add a onclick event to direct to a link and add a cursor pointer styling to let your audience is aware of the link and then wrap the name tag with an tag with another link.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #ccc;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
#card-2 {
cursor: pointer;
}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/><link rel="stylesheet" href="./style.css" />
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group"></div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
alt=""
/>
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<div
id="card-2"
class="item col-xs-4 col-md-3"
onclick="window.location='https://www.youtube.com'"
>
<div class="thumbnail">
<img
class="img-id"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg"
alt=""
/>
<div class="person">
<a href="https://www.linkedin.com/">
<p class="person-name">Person Name</p>
</a>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
</div>
</div>
</div>

I have two little issues in my filtering and pagination code

Hello guys i would like you to help me fix my code so i can get it working very well.
when i filter the cards on the search box pagination mode puts alot of cards and i just want 9 per page...
i want to make the left and right arrows working very well
i hope you guys can help me with this issue, thanks <3
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".card").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
pageSize = 9;
showPage = function(page) {
$(".card").hide();
$(".card").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1);
$("#paginator a").click(function() {
$("#paginator a").removeClass("pagActive");
$(this).addClass("pagActive");
showPage(parseInt($(this).text()))
});
});
.searchBar {
background: rgb(14, 226, 14);
padding: 10px;
width: 200px;
border-radius: 5px;
margin: auto;
}
.searchBar>input {
padding: 10px;
border-radius: 5px;
}
.card {
background: rgb(140, 255, 140);
padding: 10px;
border-radius: 5px;
text-align: center;
}
.pagination {
background: violet;
margin: auto;
width: 300px;
text-align: center;
padding: 10px;
}
.pagination a {
padding: 10px;
transition: .3s;
text-decoration: none;
}
.pagination a:hover {
background: rgb(192, 91, 192);
}
.pagActive {
background: blue;
color: #fff;
}
.row {
display: flex;
}
.column {
width: 33.33%;
padding: 10px;
}
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchBar">
<input id="myInput" type="text" placeholder="search...">
</div>
<div class="row">
<div class="column">
<div class="card">
<h3>title 1</h3>
<p>description 1</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 2</h3>
<p>description 2</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 3</h3>
<p>description 3</p>
link
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3>title 4</h3>
<p>description 4</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 5</h3>
<p>description 5</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 6</h3>
<p>description 6</p>
link
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3>title 7</h3>
<p>description 7</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 8</h3>
<p>description 8</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 9</h3>
<p>description 9</p>
link
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3>title 10</h3>
<p>description 10</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 11</h3>
<p>description 11</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 12</h3>
<p>description 12</p>
link
</div>
</div>
</div>
<div id="paginator" class="pagination">
<i class="fas fa-angle-double-left"></i>
1
2
3
4
5
6
<i class="fas fa-angle-double-right"></i>
</div>

To show correct amount of elements after search you can modify a bit your showPage method and do filtering inside.
showPage = function(page, searchTerm) {
let $filteredCards = $(".card");
if (searchTerm) { //if some search text is present, filter... if not - take all cards
$filteredCards = $filteredCards.filter(function() {
return $(this).text().toLowerCase().indexOf(searchTerm) > -1;
});
}
$(".card").hide();
$filteredCards.each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
About "left-right arrows": here you can set some data attribute that will identify page number instead of taking number from text. And for "left arrow" you can set 1, for "right" - last page.
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
showPage(1, value);
});
pageSize = 9;
showPage = function(page, searchTerm) {
let $filteredCards = $(".card");
if (searchTerm) {
$filteredCards = $filteredCards.filter(function() {
return $(this).text().toLowerCase().indexOf(searchTerm) > -1;
});
}
$(".card").hide();
$filteredCards.each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1);
$("#paginator a").click(function() {
$("#paginator a").removeClass("pagActive");
$(this).addClass("pagActive");
showPage(parseInt($(this).data('page')), $("#myInput").val().toLowerCase());
});
});
.searchBar {
background: rgb(14, 226, 14);
padding: 10px;
width: 200px;
border-radius: 5px;
margin: auto;
}
.searchBar>input {
padding: 10px;
border-radius: 5px;
}
.card {
background: rgb(140, 255, 140);
padding: 10px;
border-radius: 5px;
text-align: center;
}
.pagination {
background: violet;
margin: auto;
width: 300px;
text-align: center;
padding: 10px;
}
.pagination a {
padding: 10px;
transition: .3s;
text-decoration: none;
}
.pagination a:hover {
background: rgb(192, 91, 192);
}
.pagActive {
background: blue;
color: #fff;
}
.row {
display: flex;
}
.column {
width: 33.33%;
padding: 10px;
}
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="searchBar">
<input id="myInput" type="text" placeholder="search...">
</div>
<div class="row">
<div class="column">
<div class="card">
<h3>title 1</h3>
<p>description 1</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 2</h3>
<p>description 2</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 3</h3>
<p>description 3</p>
link
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3>title 4</h3>
<p>description 4</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 5</h3>
<p>description 5</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 6</h3>
<p>description 6</p>
link
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3>title 7</h3>
<p>description 7</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 8</h3>
<p>description 8</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 9</h3>
<p>description 9</p>
link
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3>title 10</h3>
<p>description 10</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 11</h3>
<p>description 11</p>
link
</div>
</div>
<div class="column">
<div class="card">
<h3>title 12</h3>
<p>description 12</p>
link
</div>
</div>
</div>
<div id="paginator" class="pagination">
<i class="fas fa-angle-double-left"></i>
1
2
3
4
5
6
<i class="fas fa-angle-double-right"></i>
</div>

Showing a popup modal when on the 3rd slide with slick js

hello I have a problem and I have a question about slick.js. I have a feature, I have a slider. If you want to see more about the content, the registration modals will appear.
I have made the code as below. Is it possible,i want the slider runs normally until the 2nd slide and when the 3rd slide will appear the modals register?
and when the user wants to go to slide 3 it will continue to be directed to the modals register so that the user cannot reach the fourth slide. Is that possible?
Can anyone help me? I don't know how
My Codepen
My JS
var $slider = $('.slider-banner');
var $progressBar = $('.progress');
var $status = $('.pagingInfo');
var $progressBarLabel = $( '.slider__label' );
$slider.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
if(!slick.$dots){
return;
}
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text((i-1) + '-' + (i) + '/' + slick.slideCount);
});
// Progress Bar
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$progressBarLabel.text( calc + '% completed' );
});
$('.slider-banner').slick({
// arrows: false,
dots: true,
slidesToShow: 2,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight' data-toggle='modal' data-target='#exampleModal'><i class='fas fa-chevron-right'></i></button>",
});
My CSS
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
}
#bannerHome #homeBanner {
height: 100vh ;
padding: 0;
position:relative;
}
#bannerHome #homeBanner .slider-banner {
height: 100%;
width: 100%;
}
#bannerHome #homeBanner .slider-banner .item {
height: 100vh ;
margin: 0 5px;
}
#bannerHome #homeBanner .slider-banner .item .content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer .title{
width:55%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 50%;
left: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerLeft:focus{
outline: none;
box-shadow: none;
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 50%;
right: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerRight:focus{
outline: none;
box-shadow: none;
}
.pagingInfo{
position:absolute;
bottom: 7%;
left:50%;
transform:translate(-50%,-50%);
}
.progress {
position:absolute;
bottom: 5%;
left:50%;
transform:translate(-50%,-50%);
display: block;
width: 100%;
height: 5px;
border-radius: 5px;
overflow: hidden;
background-color: #f5f5f5;
background-image: linear-gradient(to right, #ED951E ,#ED951E);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
}
ul.slick-dots {
display: none;
}
My HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Number Indicator -->
<span class="pagingInfo"></span>
<!-- Progress Indicator -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only"></span>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

You need to call the modal window if slide index more than 2 and turn slider back to the second slide without animation.
var $slider = $('.slider-banner');
var $progressBar = $('.progress');
var $status = $('.pagingInfo');
var $progressBarLabel = $('.slider__label');
$slider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
if (!slick.$dots) {
return;
}
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text((i - 1) + '-' + (i) + '/' + slick.slideCount);
});
// Progress Bar
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc);
$progressBarLabel.text(calc + '% completed');
});
//slide limiter
$slider.on('afterChange',function(e,slick,currentSlide){
if(currentSlide >= 2){
$('#exampleModal').modal('show');
setTimeout(function(){
$slider.slick('slickGoTo',1,true)
},1)
}
})
$('.slider-banner').slick({
dots: true,
slidesToShow: 2,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight'><i class='fas fa-chevron-right'></i></button>",
});
#bannerHome {
height: 100vh;
background-color: #c6c6c6;
}
#bannerHome #homeBanner {
height: 100vh;
padding: 0;
position: relative;
}
#bannerHome #homeBanner .slider-banner {
height: 100%;
width: 100%;
}
#bannerHome #homeBanner .slider-banner .item {
height: 100vh;
margin: 0 5px;
}
#bannerHome #homeBanner .slider-banner .item .content {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer .title {
width: 55%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer h1 {
color: #fff;
font-size: 25px;
line-height: 25px;
}
.arrowBannerLeft {
position: absolute;
background: transparent;
border: none;
top: 50%;
left: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerLeft:focus {
outline: none;
box-shadow: none;
}
.arrowBannerRight {
position: absolute;
background: transparent;
border: none;
top: 50%;
right: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerRight:focus {
outline: none;
box-shadow: none;
}
.pagingInfo {
position: absolute;
bottom: 7%;
left: 50%;
transform: translate(-50%, -50%);
}
.progress {
position: absolute;
bottom: 5%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 3px;
border-radius: 5px;
overflow: hidden;
background-color: #f5f5f5;
background-image: linear-gradient(to right, #ED951E, #ED951E);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
}
ul.slick-dots {
display: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 1.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 2.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 3.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 4.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 5.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 6.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 7.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 8.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 9.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 10.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 11.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 12.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 13.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 14.
</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Number Indicator -->
<span class="pagingInfo"></span>
<!-- Progress Indicator -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only"></span>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

Jquery — Set child to fill remaining width of parent

I am building a responsive layout. I would like to know if anyone knows a way through JS/jQuery which I can set children to fill the remaining space of a parent only if there is space to fill (to the right).
Layout when above 900px
Layout when below 900px
HTML for reference
.row {
width: 100%;
}
.colm-span-2 {
position: relative;
float: left;
margin: 15px auto;
padding: 0px 15px 0px 15px;
background-color: #FFFFFF;
background-clip: content-box;
}
.colm-span-2 {
width: 33.3333333333%;
}
#media screen and (max-width: 900px) {
.colm-span-2 {
width: 50%;
}
}
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-dark-purple">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>

I would suggest adding:
.colm-span-2:last-child {
width: 100%;
}
to your media query. This will change the final .colm-span-2 to have a 100% width.

With flexbox and :last-child (assuming you have rows) this is possible
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.bg-white {
background: whitesmoke;
}
.bg-cta-green {
background: green;
}
.bg-dark-purple {
background: rebeccapurple;
}
.row {
display: flex;
}
.colm-span-2 {
flex: 0 0 33%;
margin: .25em;
border: 1px solid grey;
}
.colm-span-2:last-child {
flex: 1;
}
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-dark-purple">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>

Tab dislocation for custom image expanding preview

I am trying to make expanding image preview similar to this but as I move from left to right clicking on the circular div, the tab shifts down from the pointer. I don't understand why this is happening.
Please refer my fiddle link.
Please help me with this. I am unable to figure out where I am going wrong.
And is there any way to change the pointer color dynamically based on the color of the circular div?
Thankyou.
jQuery(document).ready(function() {
$(".mn").click(function() {
var activeTab = $(this).attr("href"); //Find the target via the href
if ($(activeTab).is(':visible')) {
$(activeTab).slideUp();
$(this).removeClass("active");
} else {
$(".mn").removeClass("active"); //Remove any "active" class
$(this).addClass("active")
$('.tab').hide();
$(activeTab).fadeIn();
}
return false;
});
});
.wrap {
max-width: 100%;
margin: auto;
}
.full-width-div {
position: relative;
width: 100%;
left: 0;
}
.mn.active:after {
content: "";
position: absolute;
left: 50%;
bottom: auto;
margin: 0 0 0 -12px;
/*width: 0;*/
/*height: 0;*/
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid red;
}
.img-circle {
border-radius: 50%;
}
.img-circle {
border-radius: 0;
}
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.mn.active,
.mn:focus {
background: #f9f9f9;
outline: none
}
.tab {
display: none;
clear: both;
margin: 12px 2% 10px 0;
background: red;
min-height: 100px;
width: 100%;
padding: 5px;
}
.col-custom-eight {
position: relative;
float: left;
width: 12.5%;
min-height: 1px;
padding-left: 5px;
padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="full-width-div container">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<div class="row">
<div class="col-custom-eight col-sm-2">
<a href="#tab1" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">1</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab2" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center caption">2</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab3" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #795548;"></div>
<div class="text-center caption">3</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab4" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FF9800;"></div>
<div class="text-center caption">4</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab5" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">5</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab6" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">6</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab7" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">7</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab8" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">8</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab1" class="tab" style="background-color: #00BCD4">Tab 1
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab2" class="tab" style="background-color: #FFC107">Tab 2
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab3" class="tab" style="background-color: #795548">Tab 3
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab4" class="tab" style="background-color: #FF9800">Tab 4
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab5" class="tab" style="background-color: #00BCD4">Tab 5
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab6" class="tab" style="background-color: #8BC34A">Tab 6
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab7" class="tab" style="background-color: #00BCD4">Tab 7
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab8" class="tab" style="background-color: #8BC34A">Tab 8
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Your rows have 1px height which results in the pointer dropping down 1px for every circle. I fixed your fiddle, see here.
You can set the color of the pointer with just CSS, like for instance:
a[href="#tab1"]:after {
border-bottom-color: rgb(0, 188, 212) !important;
}
a[href="#tab8"]:after {
border-bottom-color: #8BC34A !important;
}