I recently used bootstrap to help me align my projects portfolio on my website. Certainly it did what i was expecting except the time i run the website on my mobile. I used container on every div element to keep it inside the area but the result is totally different.
If i run the mobile phone emulator inside a desktop browser it will display the expected result however, if i run it in real cell phone the result is all messed up.
The link to my website is- www.ijatin.ca and visit the project section inside it and try to run on mobile phone emulator and on real phone you would see 2 different results.
Can anyone tell, why is there such a difference and how can i overcome it?
Thanks so much
I see that you've used Bootstrap 4 and the best formation of usage should be like,
container -> [row -> col-* -> card] [row -> col-* -> card] [row -> col-* -> card] end of container.
But in your code
container -> [row -> col-* -> card] end of container, container -> [row -> col-* -> card] end of container, container -> [row -> col-* -> card] end of container
You don't have to have a container div for each row. Container divs can be placed as a parent where you would want to place your child elements within a bootstrap specific width. So I suggest to change your code like below
<article id="work" style="display: block;" class="active">
<div class="container">
<h2 class="major">Projects</h2>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12"> <!-- change column size according to your need -->
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container offset-lg-1 row">
<div class="card col-md-7 col-sm-12 offset-md-2 offset-lg-2 float-left project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
<div class="container offset-lg-1 row">
<div class="card col-sm-12 col-lg-7 flaot-right project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
<div class="container col-sm-12 offset-lg-1 row">
<div class="card col-md-7 col-sm-12 offset-md-2 offset-lg-2 float-left project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
<div class="close">Close</div>
</article>
This would look like
Hope this helps!
Related
I have an angular web page like this
this is the picture
I have no problem in web version but I want to display in another way in mobile version like title picture and text
this is an example of my code
<div class="our-company-history section-space--ptb_100">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="faq-custom-col">
<div class="section-title-wrap">
<h3 class="heading"><span class="text-color-primary">Développement Logiciel</span></h3>
<h6 class="text" [innerHtml]="cont.developement"></h6>
<p [innerHtml]="cont.developement_suite" class="text mt-30"></p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="rv-video-section">
<div class="ht-banner-01 ">
<img class="img-fluid border-radus-5 animation_images one wow fadeInDown" src="assets/images/banners/logiciel4.png" alt="">
</div>
<div class="ht-banner-02">
<img width="188" height="115" class="img-fluid border-radus-5 animation_images two wow fadeInDown" src="assets/images/banners/logiciel3.png" alt="">
</div>
<div class="main-video-box video-popup">
<a class="video-link mt-30">
<div class="single-popup-wrap">
<img class="img-fluid border-radus-5" src="assets/images/banners/logicielb.png" alt="">
<div class="ht-popup-video video-button">
</div>
</div>
</a>
</div>
<div class="ht-banner-03">
<img width="188" height="115" class="img-fluid border-radus-5 animation_images three wow fadeInDown" src="assets/images/banners/logiciel1.png" alt="">
</div>
<div class="ht-banner-04">
<img width="190" height="190" class="img-fluid border-radus-5 animation_images four wow fadeInDown" src="assets/images/banners/logiciel2.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
I looked a lot for a method to display mode in another way in mobile version I need some help and thank you
With the given problem, I think its better if you use media queries to hide/show elements in browser. Further you may need to add few lines of html to change layout.
Or you can follow bootstrap grid layout / flex box to give it basic responsiveness.
there are a lot of references out there to solve this issue.
I have several card decks that respond nicely. In each case I have expand/collapse content that also works nicely. When I click on expand, it expands the card and shows the previously hidden content. When I click on collapse, it returns to showing just the card's "headline" content.
Unfortunately this isn't quite the behaviour I'd like. The big problem is that when I expand one card, all the other cards in the row expand as well. Their hidden content doesn't show but I get a large blank area (the card background).
When the card deck is static content, it pushes the subsequent content down. This isn't a big issue. But when the content is dynamic (created with javascript from an XML file), I have to use z-index to elevate above the subsequent content. In this case the empty expanded card sections end up obscuring the content below them. I could live with it being just the currently expanded card since that would only obscure less than 1/4 of the content, but with all the cards expanding, it covers pretty much everything.
<div class="container">
<div class="card-deck">
<div class="card mb-4">
<div class="card-body bg-light" id="1">
<h4 class="card-title">March 27, 2020</h4>
<p>
<img class="card-img-top" src="images/somephoto.jpeg" alt='some description' />
<a href="#c1" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="c1">
<span class="collapsed">more...</span><span class="expanded">...less</span>
</a>
</p>
<div class="collapse" id="c1">
<p>some content</p>
</div>
</div
</div>
<div class="card mb-4">
<div class="card-body bg-light" id="2">
<h4 class="card-title">August 19, 2019</h4>
<p>
<img class="card-img-top" src="images/anotherphoto.jpeg" alt='another description' />
<a href="#c2" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="c2">
<span class="collapsed">more...</span><span class="expanded">...less</span>
</a>
</p>
<div class="collapse" id="c2">
...
Can anyone suggest a way for me to get what I want - just having the one card expand?
I believe coordinating the same height across multiple cards is a feature of the card-deck class. Try using the card-columns class and see if that works with your content as desired. Each column will expand independently, but the cards could have different heights depending on the content. Here's the documentation for bootstrap's card-columns component.
Here's an example:
<div class="container">
<div class="card-columns">
<div class="card mb-4">
<div class="card-body bg-light" id="1">
<h4 class="card-title">March 27, 2020</h4>
<p>
<img class="card-img-top" src="images/somephoto.jpeg" alt='some description' />
<a href="#c1" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="c1">
<span class="collapsed">more...</span><span class="expanded">...less</span>
</a>
</p>
<div class="collapse" id="c1">
<p>some content</p>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body bg-light" id="2">
<h4 class="card-title">August 19, 2019</h4>
<p>
<img class="card-img-top" src="images/anotherphoto.jpeg" alt='another description' />
<a href="#c2" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="c2">
<span class="collapsed">more...</span><span class="expanded">...less</span>
</a>
</p>
<div class="collapse" id="c2">
<p>More content</p>
</div>
</div>
</div>
</div>
</div>
Hope that helps.
I have a section on my site container-fluid,row, with two equal col-md-4 sections. the right section has image, the left has header and paragraph on the next row it switches image on the left and header/paragraph on right and so on for six sections. I am trying to re order for mobile where the image is above the header / P on every section. I have tried using order-sm-1 and order-sm-2 on the divs but not having luck. it is just changing the order on all breakpoints. here is first section.....
<div class="container-fluid pt-5 pb-5 process">
<div class="row text-left p-5 mb-5 justify-content-center">
<div class="col-md-4">
<div class="h-100 d-flex justify-content-center flex-column">
<h3>Implementation</h3>
<p class="text-secondary">We've refined implementation to an industry-leading procedure, from 'taxi' to 'lift-off'.
We're with you every step of the way, holding your hand as much or as little as you see fit.</p>
</div>
</div>
<div class="col-md-4 mr-5 text-center"><img src="images/onboard.svg" width="400" class="img-fluid"></div>
</div>
</div>
I don't think there is a order-sm-* class similar to how col-sm-* has been changed to col-* so I believe the answer would be to do:
<div class="container-fluid pt-5 pb-5 process">
<div class="row text-left p-5 mb-5 justify-content-center">
<div class="order-2 order-md-1 col-md-4">
<div class="h-100 d-flex justify-content-center flex-column">
<h3>Implementation</h3>
<p class="text-secondary">We've refined implementation to an industry-leading procedure, from 'taxi' to 'lift-off'.
We're with you every step of the way, holding your hand as much or as little as you see fit.</p>
</div>
</div>
<div class="order-1 order-md-2 col-md-4 mr-5 text-center"><img src="images/onboard.svg" width="400" class="img-fluid"></div>
</div>
</div>
<div class="container-fluid pt-5 pb-5 process">
<div class="row text-left p-5 mb-5 justify-content-center">
<div class="col-md-4 order-2 order-md-0">
<div class="h-100 d-flex justify-content-center flex-column">
<h3>Implementation</h3>
<p class="text-secondary">We've refined implementation to an industry-leading procedure, from 'taxi' to 'lift-off'.
We're with you every step of the way, holding your hand as much or as little as you see fit.</p>
</div>
</div>
<div class="col-md-4 mr-5 text-center order-1 order-md-0"><img src="images/onboard.svg" width="400" class="img-fluid"></div>
</div>
</div>
Anything smaller than medium (xs & sm) will have image at top as its order is set to 1 and the other div has order 2. In med+ the orders are 0, they are small value so will be order normally.
I am trying to add a script for the search filter and having an error in implementing it. Please let me know where I am wrong
I have added the search bar using the code
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
and after that I added the script inside the body tag
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable h4").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->
You need to show something higher than what you are currently finding.
You cannot hide the cards and then try to show the H4 inside the card.
Access $("#myTable .card") instead
Also you abuse a side effect of filter - Either filter on content or toggle on content
If the wrapping div is not hidden, you will get a scattering. So now I toggle the hidden wrapper instead
$(document).ready(function() {
$("#myInput").on("input", function() {
var value = $(this).val().toLowerCase();
$("#myTable .card").each(function() {
$(this).parent().toggle(
$.trim(value)!="" && $(this).text().toLowerCase().indexOf(value) > -1
)
});
});
});
#myTable>div { display:none; float:left; border:1px solid grey; margin:5px; padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->
You are toggling the h4 instead of the .card that contains it.
You also do not need to toggle while filtering. Filter the ones you want and show them in one go. If you want to go one-by-one then use the .each instead of the .filter
$(document).ready(function() {
$("#myInput").on("input", function() {
var value = $(this).val().toLowerCase();
var allCards = $('#myTable .card');
allCards
.hide() // hide all cards
.filter(function() { // filter the cards that match
var h4text = $(this).find('h4').text().toLowerCase();
return h4text.indexOf(value) > -1;
}).show() // show the filtered cards
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->
I am working in an Angular4 application,In this I have a carousel were I show the products and product name and price .Currently I have 6 products (3+3).I have 2 buttons if I clicked on left carousel will show 3 products from left side for right button will show 3 products from right ride.
The problem is when I add a new product carousel generate a new row instead showing like in the line of products.
How to resolve is .
HTML
<section class="carousel slide" id="myCarousel">
<div class="container">
<div class="row">
<div class="col-sm-12 text-right mb-4">
<a class="btn btn-outline-secondary carousel-control left" href="#myCarousel" data-slide="prev" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary carousel-control right" href="#myCarousel" data-slide="next" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/iPhone1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" src="assets/Images/Popular_Products/iPhone2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span #Pname1>iPhone</span>
<br>
<br>
3433 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/indianSpices1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname)" class="img-fluid two" src="assets/Images/Popular_Products/indianSpices2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span #Pname>Indian Spices</span>
<br>
<br>
747 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img class="img-fluid" src="assets/Images/Popular_Products/6.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span>Home Appliances</span>
<br>
<br>
<span >4500 $</span>
</div>
</div>
</div>
</div>
</div>
<div class="row row-equal carousel-item m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/8.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/9.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Bicycles
<br>
<br>
2329 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/5.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/12.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Electronic Items
<br>
<br>
8333 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/2.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/7.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Natural Oils
<br>
<br>
5435 $
</div>
</div>
</div>
</div>
</div>
</div>
</section>
In stackblitz, there's no button to add a new product. Either you are adding the new product manually or the code is missed from the solution.
If adding manually, possibly you are adding it as a new row instead of another column. Since you are using bootstrap layout, your code divides the screen area in 12 parts, and each image is using 4 parts (sm-12, sm-4 respectively). Now when you add another product, that creates a new row since there's no space remaining in the current row.
To fix this out, rather than giving part by part allocation, give a fixed size to each product card, and then let the whole scroll horizontally.
Or, create another sm-12 row (3rd carousal) and add elements to it. You will be required to create a component hosting 3 products and each left/right button will cycle in the main carousal. Any product addition will go in the empty component and once filled, will create another instance to host the product.
--- pseudo code below, customize with actual values ----
#Component( {} }
export class ProductsContainerComponent {
products: Product[]
// template shows 3 products
}
#Component()
export class ProductCarousalComponent {
carousal: ProductsContainerComponent[]
btnPrevious, btnNext: Button => Each set the current pointer to a given container in list, which gets displayed
addNewProduct() {
ProductsContainerComponent container;
carousal.each(prod => if (prod.products.length < 3) { container = prod; break; } );
if (container == null)
{ container = new ProductsContainerComponent(); carousal.push (container); }
// construct your new product here (url, images, text etc)
container.products.push (new Product() );
}