I have implemented a carousel using PrimeNG in angular which looks like this:
On page load the carousel is loaded with its last slide. I want the carousel to get loaded with the first slide by default. Also, notice the indicators at the bottom. The indicator is not highlighted on page load. It only gets highlighted when I click on indicators or the left arrow carousel navigation button. It does not work with the right button.
How do I solve these issues? Is this a bug or library issue?
PrimeNG Documentation - https://www.primefaces.org/primeng/carousel
My code:
<p-carousel
[value]="planDetails"
styleClass="custom-carousel"
[numVisible]="3"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="4000"
>
<ng-template let-plan pTemplate="item">
<div class="centered-div">
<div class="plans">
<div class="card plan-card">
<div class="card-content">
<div class="plan-name">{{ plan?.planName }}</div>
<div class="plan-desc">
{{ plan?.description }}
</div>
<div class="plan-price">
<span class="plan-cost"
>$ {{ plan?.pricePerUser }}
<span>
<sup class="plan-currency">{{ plan?.currency }}</sup>
</span></span
>
</div>
<div class="billing-way">per user billed annually</div>
<div class="plan-upgrade-div centered-div">
<button
type="button"
class="remediator-blue-btn upgrade-btn centered-div"
>
<span class="button-text" (click)="onUpgrade(plan)">
Select
</span>
</button>
</div>
<hr />
<div class="plan-features">Features</div>
<div
class="plan-feature-1"
*ngFor="let planfeature of plan.planFeatures"
>
<img
src="assets/images/orange-check.svg"
alt=""
class="feature-check"
/>
<span class="feature-text">{{ planfeature }}</span>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</p-carousel>
SOLUTION: I change the numScroll to 3 and circular to false and my issue was solved
Related
I am adding some semantic-ui cards dynamically to a page. These cards have dimmers.
Example from SUI site.
<div class="ui special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Add Friend</div>
</div>
</div>
</div>
<img src="/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Team Fu</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
</div>
Now, if I add the above content dynamically (using jQuery) - currently, for testing, I am just using a string of the above HTML markup (cards) and calling $("#myDiv").append(cards).
I then need to activate the dimmers using:
$('.special.cards .image').dimmer({
on: 'hover'
});
If I call this after the append, then the dimmers do not work. As I understand it, this needs to be delegated. So I tried:
$("#myDiv").on('click','.special.cards' , function() {
$('.special.cards .image').dimmer({
on: 'hover'
});
});
This works but requires me to first click on a card before the on: hover is activated.
Is there a way to activate the on: hover without the need for a click?
I have a portfolio webpage, where I need describtions and and "Image"-tag to show, when the projects are clicked. For this I am using toggle, javascript.
I currently have this piece of code, where I want the span.class and the paragraph to both expand when the project is clicked. Otherwise I wish that both elements remain hidden on the page. Right now I cannot make span.class hide before toggle, and so only the paragraph show on toggle, which causes the whole thing to look wierd. This is the code I am using.
$(document).ready(function(){
$(".li_element").each(function(index) {
$(this).find('p','span.PopUp').first().hide();
});
$("li").click(function(){
$(this).find('p','span.PopUp').first().toggle();
$(this).toggleClass("expand");
});
});
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1">
Lirma Type
</span>
<span id="year">
2019
</span>
<div class="Describtion">
<span class="PopUp" >Images</id>
<p style="display:none;">
Typedesign
</p>
</div>
<div id="myModal_1" class="modal" >
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Lirma/type.jpg" alt="img" width="100%">
</div>
</div>
<p>Type design</p>
</div>
</div>
</div>
</li>
Just one string:
$(this).find('p,span.PopUp').first().hide();
or maybe you want
$(this).find('p').first().hide();
$(this).find('span.PopUp').first().hide();
I've been doing a lot of research on this and can't find a good solution. Basically, I have a panel in my app (Panel 2) and would like to collapse it to the left when the button is clicked and if the button gets clicked again then expand it to the right.
Here's my working Code: PLUNKER
<div fxFlex fxLayout="row" fxLayoutAlign="space-between stretch" style="background-color:green;">
<div fxFlex [fxShow]="explorerShow" style="background-color:white;">
<div (click)="toggleDirection()" > <img src="../../../assets/images/button1.png" alt="Button" style = 'float: right'>
</div>
Panel 2
</div>
Use fxHide and [fxShow]="expand" on Panel 2 element
<div class="container">
<div class="content" fxLayout="row" fxFlexFill>
<div class="sec1" fxFlex="20%" fxHide [fxShow]="expand">
SIDEBAR
</div>
<div class="sec2" fxFlex="100%">
BODY
</div>
</div>
<button (click)="expand = !expand">Toggle Sidebar</button>
</div>
Here is a working stackblitz | your plunkr
UPDATE: Here is a stackblitz with animation
I am now developing AngularJS based web application and have trouble to realize this.
Please see this image.
As you can see here, I need to display utterly different template when I click any item on accordion.
<accordion close-others="true" >
<accordion-group is-open="isopen"
ng-repeat="account in vm.accounts"
ng-controller="AccountController">
<accordion-heading>
<div class="row" ng-click="templateChange({{isopen}})">
<div class="col-md-4">
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-up': isopen, 'glyphicon-chevron-down': !isopen}"></i>
{{ ::account.name }}
</div>
<div class="col-md-3 pull-right">
<p class="text-uppercase">Balance</p>
${{ ::account.balance }}
<p class="text-uppercase">Annual Return</p>
{{ ::account.annualReturn }}%
</div>
<div class="col-md-5">
</div>
</div>
</accordion-heading>
</accordion-group>
And this is the controller part but still empty.
function AccountController($scope) {
$scope.templateChange = function(isOpen){
// Here, I hope to know what should I wrote to use another templatge
}
}
So, I hope to know how to change the template of individual accordion-group when I click it to expand or collapse.
Please help me!!!
I have about 14 related products for each parent product and want the Owl-Carousel slider to function so visitors can scroll thru seeing 4 at a time.
The related products I have set up are rendering nicely except they are listed down the page vertical and not inside the carousel slider.
There is another owl-carousel Slider on this same site on the home page (index.html) which works fine.
The Difference?
This one gets each product detail form Business Catalyst module rendered as:
<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">
the id is different for each product of course.
Here is link if you want to View page source - starts on LINE 289
Link to product parent detail page
To see the module result - Here is some code from ONE product inside the owl-carousel
What can I add to this to make each block of product detail render horizontal?
<section class="section wow fadeInUp">
<h3 class="section-title">Accessories and Related Products</h3>
<div class="owl-carousel home-owl-carousel custom-carousel owl-theme outer-top-xs">
<div class="item item-carousel">
<div class="products">
<div class="product">
<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">
<!-- product detail -->
<div class="product-image">
<div class="image"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only"><img id="catsproduct_9568921" src="/assets/images/products-sm/FF400-2.jpg?bc_t=jVmrpgtTMrRukibgVCEGpA" alt="Fibre-Metal Headgear-Headgear" border="0" /></a> </div>
<!-- /.image -->
</div>
<!-- /.product-image -->
<div class="product-info text-left">
<h4 class="name"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">Fibre-Metal Headgear-Headgear</a> </h4>
<div class="description"></div>
<div class="product-price"> <strong>$19.50</strong> discountcryo price</div>
<!-- /.product-price -->
</div>
<!-- /.product-info -->
<div class="cart clearfix animate-effect">
<div class="action">
<h4>
<div class="action"><a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">SEE DETAIL</a></div>
</h4>
</div>
<!-- /.action -->
</div>
<!-- /.cart clearfix -->
<div class="padd-bottom-20"></div>
<!--/ END product detail -->
</li></ul> </div>
<!-- /.product -->
</div>
<!-- /.products -->
</div>
<!-- /.item item carousel -->
</div>
<!-- /.home-owl-carousel -->
</section>
<!-- /.section -->
Hope this is better to understand?
Thank You
Willz
Problem solved
The trouble was with the Business Catalyst Module productfeaturelist
- here is the module as edited to function correctly in owl-carousel:
{module_productfeaturelist tag="{tag_name}" render="collection" rowCount="99" sortType="Weight" template="/Layouts/OnlineShop/prodFeature.tpl"}
{% comment %} /* OLD */ {module_productfeaturelist,{tag_name},99,weight,_self,true } {% endcomment %}
Try Using:
display: inline-block;
Also have a look Here for tips on creating a grid.