# Slider with text over image

**URL:** <https://community.sitejet.io/t/slider-with-text-over-image/2609>\
**Category:** Website Builder\
**Tags:** cms\_presets, cms\_usability\
**Created:** [September 20, 2023, 5:08pm UTC](https://community.sitejet.io/t/slider-with-text-over-image/2609 "2023-09-20T17:08:24Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lisa\_Tippette](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lisa_tippette/32/44_2.png) [@Lisa\_Tippette](https://community.sitejet.io/u/Lisa_Tippette)\
**Post date:** [September 20, 2023, 5:08pm UTC](https://community.sitejet.io/t/slider-with-text-over-image/2609/1 "2023-09-20T17:08:24Z")

</div>

Can someone show me how to set up a slider like in the Ashop template with text on TOP of the images? TIA!

---

<div class="post-metadata">

**Author:** ![Martin.Sitejet.Team](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/martin.sitejet.team/32/25_2.png) [@Martin.Sitejet.Team](https://community.sitejet.io/u/Martin.Sitejet.Team)\
**Post date:** [September 21, 2023, 8:14am UTC](https://community.sitejet.io/t/slider-with-text-over-image/2609/2 "2023-09-21T08:14:34Z")

</div>

Hi @Lisa_Tippette,

you could simply copy the whole preset from the Ashop template and paste it into your website, then you head back to the Ashop template and copy also the CSS

```auto
/* HEADER - Slider */
.ed-element.preset-content-slider-ashop {
	@include content-slider(
		$background: $none, 
		$adaptive-height: true, 
		$border-width: 0px, 
		$border-style: solid, 
		$border-color: $color-primary, 
		$box-padding: 0rem, 
		$margin: 0rem, 
		$margin-tablet: 0rem, 
		$margin-mobile: 0rem, 
		$arrows: true, 
		$arrows-show-on-hover: false, 
		$arrow-position: inside, 
		$arrow-size: 2.5rem, 
		$arrow-color: $none, 
		$arrow-color-hover: $none, 
		$arrow-background: $color-background, 
		$arrow-background-hover: $color-primary, 
		$arrow-circle: false, 
		$dots: false, 
		$dots-position: inside, 
		$dots-color: $color-primary, 
		$dots-color-active: $color-primary, 
		$dots-margin: 6px, 
		$dots-width: 12px, 
		$dots-height: 0px, 
		$dots-circle: true
	);

	padding: 0 2rem;

	.slick-slider .slick-list { border-radius: 20px; }

	.content-container {
		>.inner {
			padding-top: $spacer-container-lg*2;
			padding-bottom: $spacer-container-lg*2;
		}
	
		.content-inner { max-width: 30rem; }
	}

	@media screen and (max-width: $breakpoint-md-max) {
		padding: 0 1rem;
	}

	@media screen and (max-width: $breakpoint-sm-max) {
		padding: 1rem 0;
	
		.content-container >.inner {
			padding-top: $spacer-container;
			padding-bottom: $spacer-container;
		}
	}
}

/* HEADER - Slider - Unequal column */
.ed-element.preset-unequal-columns-ashop {
	@include unequal-columns(
		$box-background: $none, 
		$box-padding: 0rem, 
		$box-width-xs: 100%, 
		$box-width-sm: 50%, 
		$box-width-lg: 60%, 
		$margin: 0rem, 
		$margin-horizontal: false
	);
}

/* HEADER - Container with Title */
.ed-element.preset-banner-ashop {
	@include banner(
		$arrow: true, 
		$arrow-boxed: false, 
		$arrow-circle: false, 
		$arrow-margin: 2vw, 
		$arrow-padding: 1rem, 
		$arrow-size: 30px, 
		$arrow-color: $white, 
		$arrow-background: $color-default, 
		$min-height: 50vh, 
		$min-height-subpage: 400px, 
		$pattern-on-bg: false, 
		$animate-background: false, 
		$headline-color: $color-default
	);

	margin: 0 2rem;
	border-radius: 20px;

	@media screen and (max-width: $breakpoint-md-max) {
		margin: 0 1rem;
	}

	@media screen and (max-width: $breakpoint-sm-max) {
		//needs important to overrite the height
		min-height: 260px !important;
		margin: 0;
		margin-top: 1rem;
	}
}

.header-container-sample {
	margin: 0 2rem;
	border-radius: 20px;

	>.inner {
		padding-top: $spacer-container-lg*2;
		padding-bottom: $spacer-container-lg*2;
	}

	@media screen and (max-width: $breakpoint-md-max) {
		margin: 0 1rem;
	}

	@media screen and (max-width: $breakpoint-sm-max) {
		margin: 1rem 0;
	
		>.inner {
			padding-top: $spacer-container;
			padding-bottom: $spacer-container;
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![Lisa\_Tippette](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lisa_tippette/32/44_2.png) [@Lisa\_Tippette](https://community.sitejet.io/u/Lisa_Tippette)\
**Post date:** [September 25, 2023, 4:08pm UTC](https://community.sitejet.io/t/slider-with-text-over-image/2609/3 "2023-09-25T16:08:45Z")

</div>

Thanks, Martin. I’ll try that! 🙂

---

<div class="post-metadata">

**Author:** ![David\_McArdle](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@David\_McArdle](https://community.sitejet.io/u/David_McArdle)\
**Post date:** [April 19, 2024, 12:06am UTC](https://community.sitejet.io/t/slider-with-text-over-image/2609/4 "2024-04-19T00:06:37Z")

</div>

I tried this with a new site of mine and it broke the site.

Is there an easier way to put text on a slider image? I am trying to duplicate the header on this site: [https://mhmrlaw.com/](https://mhmrlaw.com/)

Thanks!

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [April 22, 2024, 9:20am UTC](https://community.sitejet.io/t/slider-with-text-over-image/2609/5 "2024-04-22T09:20:42Z")

</div>

Hey @David_McArdle - on which website (ID?) are you trying to reproduce this?

Looking at your link, I would recommend adding an image slider that changes the background and a static text above it - without testing it. Because the text is basically the same on all sliders.

---

<div class="post-metadata">

**Author:** ![David\_McArdle](https://avatars.discourse-cdn.com/v4/letter/d/a3d4f5/32.png) [@David\_McArdle](https://community.sitejet.io/u/David_McArdle)\
**Post date:** [April 22, 2024, 2:53pm UTC](https://community.sitejet.io/t/slider-with-text-over-image/2609/6 "2024-04-22T14:53:10Z")

</div>

Thanks @Andre, I will give that a try.

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [April 23, 2024, 7:01am UTC](https://community.sitejet.io/t/slider-with-text-over-image/2609/7 "2024-04-23T07:01:29Z")

</div>

If it does not work, feel free to post the website ID 🙂

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [September 5, 2024, 8:40am UTC](https://community.sitejet.io/t/slider-with-text-over-image/2609/8 "2024-09-05T08:40:38Z")

</div>

Closed on September 5, 2024, 8:40am UTC