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.
can slider (carousel) be added to featured products on home?
MVP
Certified Developer
- 1623
- 15968
- 11/25/2013
- Bangladesh
robbyr wrote:
Can take a look==>https://www.nopcommerce.com/p/1381/noproot-bootstrap-theme-free.aspx
else
,
You can do it using ==>http://www.landmarkmlp.com/js-plugin/owl.carousel/
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.
Can anyone help with code?
No plugins please.
Can take a look==>https://www.nopcommerce.com/p/1381/noproot-bootstrap-theme-free.aspx
else
,
You can do it using ==>http://www.landmarkmlp.com/js-plugin/owl.carousel/
- 41
- 223
- 11/11/2016
- United States
I have done this but i don't see any carousel on home?
@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>
MVP
Silver Solution Partner
Certified Developer
- 2639
- 42712
- 1/21/2010
- United States
kaushik2010 wrote:
Hello kaushik2010,
you can follow these steps to make a carousel for your Featured products:
(This is a solution for version 4.1)
1) You need to open the following file in your text editor:
~ Presentation\Nop.Web\Views\Shared\_Root.Head.cshtml
2) Add the following code to the bottom of the <head> section, like so:
<head>
...
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
</head>
3) Then add the following link to the end of the <body> section in the same file:
<body>
...
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
</body>
4) After that, to initialize the carousel you need to add another <script> tag under this one like so:
Just use the settings of the Slick carousel from its documentation, depending on what you are trying to achieve. I've added some sample settings that you can use to test if everything is working.
Have in mind that you might need to adjust some of the stylings for the product for them to appear properly in the carousel. E.g. you would need to remove the clear property and the margin for sure.
Hope this was helpful.
Regards,
Valentin.
can you guys can please share your code if you had done to display carousel for featured product on home page.?
Thanks,
Thanks,
Hello kaushik2010,
you can follow these steps to make a carousel for your Featured products:
(This is a solution for version 4.1)
1) You need to open the following file in your text editor:
~ Presentation\Nop.Web\Views\Shared\_Root.Head.cshtml
2) Add the following code to the bottom of the <head> section, like so:
<head>
...
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
</head>
3) Then add the following link to the end of the <body> section in the same file:
<body>
...
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
</body>
4) After that, to initialize the carousel you need to add another <script> tag under this one like so:
...
<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>
Just use the settings of the Slick carousel from its documentation, depending on what you are trying to achieve. I've added some sample settings that you can use to test if everything is working.
Have in mind that you might need to adjust some of the stylings for the product for them to appear properly in the carousel. E.g. you would need to remove the clear property and the margin for sure.
Hope this was helpful.
Regards,
Valentin.