Can the carousel be used on pages other than SFNT

[dplsr]

I tried to use the carousel on other pages or category headers. It would not work. Is there away to do this or should I find a third party product?

[Brennan]

Re: Can the carousel be used on pages other than SFNT

There is no restrictions on where you can use it. The carousel is a core bootstrap feature. As long as you have the same HTML structure it should work anywhere.

Where are you getting the products to display? From the same featured products category the homepage uses? If so this is tied to having the featured_products item assigned to the page.

[dplsr]

Re: Can the carousel be used on pages other than SFNT

Hi Brennan! That's what I thought. I put the code in the Category Header of a Category. It stakes the pictures up. (please see attachment.) My code:
<div class="container"> <div class="row">
<div class="col-md-12">
<div id="bs-storefront-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active"><a href="/Delta-Faucet.html"><img src="Delta-Faucet/slider/Addison-Large-in-use.jpg" alt="Slide 1" /></a></div>
<div class="item active"><a href="/Delta-Faucet.html"><img src="Delta-Faucet/slider/Allora_Kitchen_Large_New.jpg" alt="Slide 2" /></a></div>
<div class="item active"><a href="/Delta-Faucet.html"><img src="Delta-Faucet/slider/Cassidy-Kitchen-Large-2b.jpg" alt="Slide 3" /></a></div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#bs-storefront-carousel" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#bs-storefront-carousel" data-slide="next"><span class="icon-next"></span></a>
</div>
</div>
</div>
</div>

[marshallw]

Re: Can the carousel be used on pages other than SFNT

Hi Brennan! That's what I thought. I put the code in the Category Header of a Category. It stakes the pictures up. (please see attachment.) My code:
<div class="container"> <div class="row">
<div class="col-md-12">
<div id="bs-storefront-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active"><a href="/Delta-Faucet.html"><img src="Delta-Faucet/slider/Addison-Large-in-use.jpg" alt="Slide 1" /></a></div>
<div class="item active"><a href="/Delta-Faucet.html"><img src="Delta-Faucet/slider/Allora_Kitchen_Large_New.jpg" alt="Slide 2" /></a></div>
<div class="item active"><a href="/Delta-Faucet.html"><img src="Delta-Faucet/slider/Cassidy-Kitchen-Large-2b.jpg" alt="Slide 3" /></a></div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#bs-storefront-carousel" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#bs-storefront-carousel" data-slide="next"><span class="icon-next"></span></a>
</div>
</div>
</div>
</div>

The reason this happened is your classes for each one is active. Remove the class="active" from the all the lines except the first one.