Navigation Control colors

rexonaoriginal
(@rexonaoriginal)

7 years, 11 months ago

Hi, I want to thank in advance this plugin so good and useful.
I need to know how I can customize the colors and appearance of the navigation controls, the previous and next arrows, and the links buttons to change slide.
Thank you

Viewing 1 replies (of 1 total)

Plugin Author

Fabio Rinaldi

(@fabiorino)

7 years, 11 months ago

Hi, you can customise the CSS however you like it.

For the controls:

.crellyslider > .cs-controls,
.crellyslider > .cs-navigation {
	z-index: 999;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
	opacity: 0;
	filter: alpha(opacity=0);
}

.crellyslider:hover > .cs-controls,
.crellyslider:hover > .cs-navigation {
	opacity: 1;
	filter: alpha(opacity=100);
}

For the prev/next arrows:

.crellyslider > .cs-controls {
	position: absolute;
	width: 100%;
	top: 50%;
	margin-top: -9px;
}

.crellyslider > .cs-controls > .cs-previous,
.crellyslider > .cs-controls > .cs-next {
	display: block;
	width: 35px;
	height: 35px;
	position: absolute;
	cursor: pointer;
	background-color:#fff;
	box-shadow:0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23);
	background-repeat: no-repeat;
	background-position: center center;
	border: 10px;
	border-radius: 50%;
}

.crellyslider > .cs-controls > .cs-previous {
	background-image: url('../images/arrow-left.png');
	left: 30px;
}

.crellyslider > .cs-controls > .cs-next {
	background-image: url('../images/arrow-right.png');
	right: 30px;
}

This reply was modified 7 years, 11 months ago by Fabio Rinaldi.

Viewing 1 replies (of 1 total)

The topic ‘Navigation Control colors’ is closed to new replies.

Tags