i want to add slider (like carousel) to homepage featured products and homepage categories so users can go right or left to view more products but in single line.
Can anyone help with code?
No plugins please.
@model IList<ProductOverviewModel>
@using Nop.Web.Models.Catalog;
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.theme.css">
<!-- jQuery 1.7+ -->
<script src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/js/jquery-1.9.1.min.js"></script>
<!-- Include js plugin -->
<script src="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.min.js"></script>
<script>
$(document).ready(function () {
$("#owl-example").owlCarousel();
});
</script>
<div id="owl-example" class="owl-carousel">
<div>
@if (Model.Count > 0)
{
<div class="product-grid home-page-product-grid">
<div class="title">
<strong>@T("HomePage.Products")</strong>
</div>
<div class="item-grid">
@foreach (var item in Model)
{
<div class="item-box">
@Html.Partial("_ProductBox", item)
</div>
}
</div>
</div>
}
</div>
</div>
...
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script>
$(document).ready(function() {
$('.home-page-product-grid .item-grid').slick({
// Your settings go here
slidesToShow: 5,
slidesToScroll: 1,
arrows: true,
dots: false,
infinite: false
});
});
</script>
</body>