Comments (8)
Hi,
you can edit the .carousel__slide
css by simply styling it in your css. Just make sure you use !important
. So for example:
.carousel__slide {
padding-left: 0 !important;
padding-right: 0 !important;
}
would work. But you got a point here. I will definitely improve on this as !important
is not a friendly solution. 😅
For hiding the bullets there is an option though. By setting [bullets]
to false
the bullets disappear.
<angular-carousel [bullets]="false">
<!-- ... --->
</angular-carousel>
from angular-carousel.
@tohedul So, I've just released v2.0.0 of this package which makes it easier to adjust the styling of the carousel. No !important
needed anymore 🎉 . Please refer to the updated docs for further instructions.
Let me know if this helps you 🙂
from angular-carousel.
Hello @marcreichel, Earlier I tried to override carousel__slide class but It didn't work. Now I just tried your latest package. It breaks down the whole carousel. All the carousel images are showing vertically and carousel totally broke down. Please check on your code.
from angular-carousel.
Yeah, this is because you've installed a major release which had some breaking changes (which is why it was a major release). Please refer to the updated docs. You need to import the new main.css
file into your css where you also import one of the themes. In between you can set your .carousel__slide
stylings (without !important
).
from angular-carousel.
There aren't any main.css in your package. How can I import that
from angular-carousel.
My bad, it was missing from the published package indeed. I've fixed it with version 2.0.1.
from angular-carousel.
Now it's working. Though I can't override CSS on my component CSS file, I have to override in global style.css. Which sometimes can be a problem if I'm going to use carousel in multiple components with different carousel config. Btw Thankyou @marcreichel.
You can also add z-index text with shadow and routerLink on carousel's image.
If you make those changes and updates, I hope it can be the most useful and popular carousel package.
from angular-carousel.
This is a limitation due to view encapsulation in Angular. If you want to style the carousel from within your component css file you'll need to set encapsulation
to ViewEncapsulation.None
inside your component ts file. This way you'll be able to overwrite the styles.
Another solution would be to set encapsulation
to ViewEncapsulation.ShadowDom
and @import
the package css files in the component css file but this way all (other) elements inside your component would not be styled using your global styles.css
.
So it depends on your use case.
I will think about your suggestions and on how to implement them 👍🏼 Thank you for your suggestions 🙂
Thank you for your kind words 🙂 If you like you can give this repo a star in order to support my work 🙂 I'd really appreciate it 🙂
from angular-carousel.
Related Issues (3)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-carousel.