Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Styling #111

Open
anesask opened this issue May 21, 2020 · 2 comments
Open

CSS Styling #111

anesask opened this issue May 21, 2020 · 2 comments

Comments

@anesask
Copy link

anesask commented May 21, 2020

CSS Styling not applying on Slider and children elements.

@bilalmohib
Copy link

bilalmohib commented Nov 23, 2020

CSS Styling not applying on Slider and children elements.

Please help me I am having the same issuse.This all code is not working.Please tell me what to install on using the following css.Any help is very much appreciated.Thanks
.slider {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;

& a {
	&.previousButton, &.nextButton {
		font-size: 22px;
		line-height: 0;
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		transition: all .3s linear;
		z-index: 1;
		color: #333;
		padding: 10px;
		text-decoration: none;
		backface-visibility: hidden; /* prevent jump effect when scaling */

		&:not(.disabled):hover {
			transform: translateY(-50%) scale(1.25);
			cursor: pointer;
		}
	}

	&.previousButton {
		left: 20px;
	}

	&.nextButton {
		right: 20px;
	}
}

}

.slide {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;

&.hidden {
	visibility: hidden;
}

&.previous {
	left: -100%;
}

&.current {
	left: 0;
}

&.next {
	left: 100%;
}

&.animateIn,
&.animateOut {
	transition: all 2s ease;
}

&.animateIn {
	&.previous,
	&.next {
		left: 0;
		visibility: visible;
	}
}

&.animateOut {
	&.previous {
		left: 100%;
	}

	&.next {
		left: -100%;
	}
}

}

@abhidadhaniya23
Copy link

Just use your own style.css in your repository and use below code in your own file.

.slide {
width: 100%;
height: 100% !important;
position: absolute;
overflow: hidden;

You can solve your problems by using !important

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants