# How to add img to slider?

**URL:** <https://forum.pinegrow.com/t/how-to-add-img-to-slider/6524>\
**Category:** Beginners\
**Created:** [May 9, 2022, 12:00am UTC](https://forum.pinegrow.com/t/how-to-add-img-to-slider/6524 "2022-05-09T00:00:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [May 9, 2022, 12:00am UTC](https://forum.pinegrow.com/t/how-to-add-img-to-slider/6524/1 "2022-05-09T00:00:16Z")

</div>

How do I add img to slider?  
When I tried I got an alert that

 ![Screen Shot 2022-05-08 at 4.56.28 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/ecb093ef872b97cd4f0b2cad678f1c3b7b710d82.jpeg)  
slider.css is locked.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [May 9, 2022, 9:31am UTC](https://forum.pinegrow.com/t/how-to-add-img-to-slider/6524/2 "2022-05-09T09:31:02Z")

</div>

Hi @kat,  
If you click on the “Learn how to use” button above the slider in the Library, you can see that the first instruction is to not alter the slider.css file.  
You can add new images in either your own stylesheet targeting the `.pgia-slide` class as background, inline on the element.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [May 9, 2022, 6:29pm UTC](https://forum.pinegrow.com/t/how-to-add-img-to-slider/6524/3 "2022-05-09T18:29:26Z")

</div>

I duplicated into my styles2022.css and placed my css below slider. Works for first slide. Do I replace slides 2, 3, 4 with ninth child or something else?

```auto
.pgia-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-image: url('../imgs/WolfSite400h.jpg');
}

```

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [May 9, 2022, 7:46pm UTC](https://forum.pinegrow.com/t/how-to-add-img-to-slider/6524/4 "2022-05-09T19:46:56Z")

</div>

Yup, nth child will work just fine.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [May 13, 2022, 4:42pm UTC](https://forum.pinegrow.com/t/how-to-add-img-to-slider/6524/6 "2022-05-13T16:42:55Z")

</div>

whoops, nth, thanks.  
1.Why does slide 1 go in .pgia-slide and the rest need nth-child?

```auto
.pgia-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-image: url('../imgs/WolfSite400h.jpg');
    background-repeat: no-repeat;
}

.pgia-slide:nth-child(2) {
    background-image: url('../imgs/McGraphics400h.jpg');
    background-repeat: no-repeat;
}

```

1. To get rid of Slide 1, 2, 3, 4 ok to comment out  
`<h2 data-pg-ia-hide class="placeholder">Slide 1</h2>` ?
2. Do slide imgs load immediately or sort of like lazy loading?