<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 ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--topic in demand start-->
<div class="container topicdemand">
<div class="row">
<div class="col-sm-12 col-lg-2 col-12">
<h6># Topics in Demand</h6>
</div>
<div class="col-sm-12 col-lg-10 col-12">
<!--slick slider-->
<div class="multiple-items">
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
<div class="col-md-12">
<div class="demand-slider">
<h5><a href="#">Startups</a></h5>
</div>
</div>
</div>
<!--slick slider-->
</div>
</div>
</div>
<!--topic in demand end-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="custom.js"></script>
<script>
$('.multiple-items').slick({
infinite: true,
// variableWidth: true,
outerEdgeLimit: false,
slidesToShow: 5,
slidesToScroll: 1,
dots: false,
speed: 300,
arrows: true,
prevArrow: '<i class="fa fa-chevron-left text-dark slick-arrow-left"></i>',
nextArrow: '<i class="fa fa-chevron-right text-dark slick-arrow-right"></i>',
centerPadding: '100px',
responsive: [{
breakpoint: 1025,
settings: {
slidesToShow: 6,
slidesToScroll: 1,
infinite: true,
dots: false,
}
}, {
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 2
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 2
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
}
]
});
</script>
</body>
</html>
.multiple-items { padding: 0px 40px;}
.multiple-items .demand-slider {
display: none;
}
.multiple-items .fa-chevron-right {
position: absolute;
right: 0px;
top: 5px;
z-index: 999;
}
.multiple-items .fa-chevron-left {
position: absolute;
left: 0px;
top: 5px;
z-index: 999;
}
.multiple-items.slick-initialized .demand-slider {
display: block;
}
.demand-slider h5 {
margin-bottom: 0px;
}
.demand-slider h5 a {
text-decoration: none;
color: #000000;
padding: 0px 30px 0px 0px;
font-size: 16px;
}
