How to add img to slider?

Beginners
1

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
Screen Shot 2022-05-08 at 4.56.28 PM1836×1126 227 KB

slider.css is locked.

2

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

1 Like
3

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?

.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');
}
4

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

1 Like
6

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

.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?