How to replace Cornerstone-Slider-Arrows with own graphics?

[MalteK]

Hi there,
I would like to insert a simple slide-show on my homepage using cornerstone. I like the simplicity of the standart cornerstone-slider, but would love to change the design and position of the prev/ next-arrows. Can I somehow replace the arrows with .png or .svg files and position them left and right (vertically centered) of the slideshow-content?

Thanks!!

[christopher]

Hi there,

Please kindly add the CSS code below to X > Launch > Options > CSS:

.flex-direction-nav a.flex-next {
	left: auto;
    right: 14px;
    top: calc(50% - 10px);
}

.flex-direction-nav a.flex-prev {
	top: calc(50% - 10px);	
}

.flex-direction-nav [class*="x-icon-"].x-icon-chevron-right:before {
	content:  "";
	background:  url('https://image.flaticon.com/icons/svg/60/60758.svg') center center no-repeat;
	background-size: contain;
	display: block;
	width: 20px;
	height: 30px;
}

.flex-direction-nav [class*="x-icon-"].x-icon-chevron-left:before {
	content:  "";
	background:  url('https://image.flaticon.com/icons/svg/60/60758.svg') center center no-repeat;
	background-size: contain;
	display: block;
	width: 20px;
	height: 30px;
}

You will need to change the URL of the images with the URL of your images for the arrows and also you can use the width and height properties in the code to fine-tune the case for your image.

Thank you.