I added three sliders in my hero section, first slider only animation working, another two slider animation not working what should I do now?
I used https://michalsnik.github.io/aos/ this for animation, and https://www.npmjs.com/package/react-slick-carousel this for carousel.
<div data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-mirror="true"
data-aos-once="true">
<h2>test</h2>
</div>
Related
I'm trying to show navbar dropdown over the slick slider. it's only show when i style .slick-slider z-index negative value, but this is not right because i can't click inside slider.
You can use a className in your dropdown menu with attribute "z-index:1000".
For example..
<div className="dropdown-menu">...</div>
on your .css file
.dropdown-menu{
... //another attributes for your div and finally..
z-index:1000
}
I have in React a tooltip component that is wrapping a button component.
How can I position the tooltip relative to the button position?
<div class="tooltip">
<div class="button"></div>
</div>
Here is a codesandbox you can play with.
You cannot do that with the way your markup is structured. I would suggest you making a div that wraps both the elements.
<div class="wrapper">
<div class="button"></div>
<div class="tooltip"></div>
</div>
You would then apply position relative to the wrapper element. Then you can use position absolute on the tooltip to position it however you want it according to the wrapping div.
I'm building a website with ReactJS. On my page, I have a content section as well as a sidebar.
When I click on a button the sidebar should be toggled. At this moment, I'm changing the class of the content from col-md-9 to col-md-12 from bootstrap and set the attribute hidden to the sidebar.
But now, I want to add some transitions like fade in and fade out the sidebar and increase the size of the content. I have no idea how I can add these transitions because I'm changing the classes.
Can you tell me what I have to do?
You can use CSS. Take a look at animate.css
https://daneden.github.io/animate.css/
You can use css transition by changing classes. Here is example of two clsses that will do fade animation:
.fade-in {
opacity: 0;
transition: opacity 400ms;
}
.fade-out {
opacity: 1;
transition: opacity 400ms;
}
However it wouldn't work along with hidden Bootstrap class name, because it sets display attribute to none value. TO make it work you can use fade-in class name instead of hidden and fade-out, when side nav should become visible
I have a problem getting the active slide in an Angular-UI Bootstrap carousel outside the carousel.
I have a panel, with the carousel inside, and want to put buttons in the footer of the panel that makes actions using the selected slide, but using jquery selectors is not an option.
I want to implement it using something in pure angular.
I think I can use the active attribute, but maybe there is something clever that can do the trick more smoothly.
Some code (Jade syntax):
.panel.panel-info
.panel-body
carousel.imgCarousel(interval='5000')
slide(ng-repeat='media in selCard.superviseTab.media')
img.img-responsive(preload-image ng-src='/api/cards/{{selCard.superviseTab.sID}}/media/{{$index}}')
.carousel-caption
multiSelect
h4 Slide {{$index+1}} of {{selCard.superviseTab.media.length}}
p {{media.originalFilename}}
.panel-footer
.navbar-collapse.collapse
ul.nav.navbar-nav.navbar-left
li
a.btn.btn-danger
i.fa.fa-unlink
If you look at the AngularUI documentation, you can see this is how the slides are integrated into the HTML:
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
...
</slide>
</carousel>
We can see that the active slide is determined by the active property on each slide.
So, you should be able to iterate through the slides and return the first slide with the active property on it. As long as you haven't modified the slides array outside of this carousel, it should give you the index of the current slide.
For example, something like:
function isActive(slide) {
return slide.active;
};
$scope.getActiveSlide = function() {
var activeSlides = $scope.slides.filter(isActive)[0];
//return the first element, since the array should only return one item
};
Should do the job (or however you choose to implement your find functionality).
i am using Angular UI Bootstrap carousel with angular-nvd3 chart and on the first slide the chart displays fine but the resto of the slides the chart is horizontally squeezed. is there a way to fix this problem?
<carousel interval="5000">
<slide ng-repeat="slide in [1,2,3,4,5]" >
<nvd3 options="sva.options" data="sva.data"></nvd3>
</slide>
</carousel>
here is the code on plunker
Thanks :)
I had the same issue, while i was trying to have gridster into carousel and charts kendo into that gridster.
i finally had it resolved by refreshing the binding of the chart based on the current active slide.
put a watch on the current scope and check which slide is active and rebind the data of the chart.