# PG slider tutorial Qs

**URL:** <https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508>\
**Category:** Beginners\
**Created:** [April 19, 2022, 8:27pm UTC](https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508 "2022-04-19T20:27:11Z")\
**Posts on this page:** 10\
**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:** [April 19, 2022, 8:27pm UTC](https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508/1 "2022-04-19T20:27:11Z")

</div>

Below the slider is text.- why? `^.pgia-slider|.pgia-slides-container ^.pgia-slider|.pgia-slides-container ^.pgia-slider|.pgia-slides-container`

```auto
<div class="pgia-controls">
    <a class="prev pgia-control" href="#" data-scroll-to="prev" data-pg-ia='{"l":[{"name":"ScrollTo","trg":"click","a":{"l":[{"t":"^.pgia-slider|.pgia-slides-container","l":[{"t":"tween","p":0,"d":0.5,"l":{"scrollTo":{"dest":"prev_page"}}}]}]},"pdef":"true"}]}'>&lsaquo;</a>^.pgia-slider|.pgia-slides-container ^.pgia-slider|.pgia-slides-container ^.pgia-slider|.pgia-slides-container<a class="next pgia-control" href="#" data-scroll-to="next">&rsaquo;</a>
    <div class="pgia-pagination">
        <a class="pgia-pagination-item" href="#"></a>
    </div>
</div>

```

 ![Screen Shot 2022-04-19 at 1.22.20 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/75caa5f7f642d524373aa4bb8b3e7bdce50e099b.png)

---

<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:** [April 19, 2022, 8:35pm UTC](https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508/2 "2022-04-19T20:35:16Z")

</div>

Hi @kat,  
Which slider is that. I looked at the three in the Interactions tab of the Library and none have that code. It looks like some code has been deleted. Here is what mine looks like:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b953dc8a6d5b809fef9bb3c610ba4a592f26ddc6.png)  
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:** [April 19, 2022, 8:42pm UTC](https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508/3 "2022-04-19T20:42:55Z")

</div>

> **[Creating a Slider with Pinegrow Interaction 2 | Pinegrow Web Editor](https://pinegrow.com/tutorials/creating-a-slider-with-interactions-2/)**
>
> A step-by-step tutorial about creating custom sliders with Pinegrow Interactions 2.

I’ve tossed and redownloaded slider-base. I’ll start again. Wish me luck.

---

<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:** [April 20, 2022, 1:03am UTC](https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508/4 "2022-04-20T01:03:02Z")

</div>

Do I apply the following instructions to pgia-controls or a . prev which I am currently on?  
But let’s use a trick so that we can work with just this one interaction and apply the same interaction to all **.pgia-controls**.

- Go to the **Timeline editor** and click on the **Transition bar** to edit the **transition settings**
- For **ScrollTo** value enter **${target.data-scroll-to}**  
 ![Screen Shot 2022-04-19 at 5.59.30 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/727e9fc1cd444709f58539873e95973b19c61b26.jpeg)

---

<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:** [April 20, 2022, 9:30am UTC](https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508/5 "2022-04-20T09:30:23Z")

</div>

Hi @kat,  
You should keep working with the existing animation on the .prev 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:** [April 20, 2022, 9:21pm UTC](https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508/6 "2022-04-20T21:21:25Z")

</div>

Clicking on pagination dots doesn’t work. Help please

 ![Screen Shot 2022-04-20 at 2.16.14 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/6c7ec8eca479b67ddcdb628c7b0e2abc07e83f89.jpeg)

---

<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:** [April 21, 2022, 9:44am UTC](https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508/7 "2022-04-21T09:44:12Z")

</div>

Hi @kat,  
Everything looks correct from the screen shot. My best guess is that there is a problem with the pagination controls on the main scroll scene. It should look like this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/1cd2c250b2ea87bf5986824c5ef10e61f9ee9218.png)  
Hope this helps,  
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:** [April 21, 2022, 1:44pm UTC](https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508/8 "2022-04-21T13:44:35Z")

</div>

The same except Infinite Scroll wasn’t checked. Neither works.  
No Infinite Scroll on pgia-slides-container  
{“s”:“whole”,“snap”:“e”,“pag”:“p”,“pag\_i”:"^.pgia-slider|.pgia-pagination-item",“pag\_clone”:“true”,“pag\_pa”:“Current”,“pag\_pd”:"-Current",“pag\_inf”:“true”}{“s”:“whole”,“snap”:“e”,“pag”:“p”,“pag\_i”:"^.pgia-slider|.pgia-pagination-item",“pag\_clone”:“true”,“pag\_pa”:“Current”,“pag\_pd”:"-Current",“pag\_inf”:“true”}  
\_\_\_\_\_\_\_\_------  
pgia-pagination-item  
{“l”:[{“name”:“Current”,“trg”:“no”,“a”:{“l”:[{“t”:"",“l”:[{“t”:“tween”,“p”:0,“d”:0.2,“l”:{“scale”:1.5}}]}]}},{“name”:“ScrollToSlide”,“trg”:“click”,“a”:{“l”:[{“t”:"^.pgia-slider|.pgia-pagination-item",“l”:[{“t”:“tween”,“p”:0,“d”:0.5,“l”:{“scrollTo”:{“dest”:“item”}}}]}]},“pdef”:“true”}]}

 ![NoInfiniteScroll](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/bc4ddd466ef15b71eab830f206e1adc2c17ba793.png)

 ![InfiniteScroll](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/6afa155e781dde8ba3f678f138e2411c03e94d38.png)

---

<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:** [April 21, 2022, 6:01pm UTC](https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508/9 "2022-04-21T18:01:30Z")

</div>

Hi @kat,  
Is your JavaScript turned on?  
Can you check if the final project is working as expected?  
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:** [April 21, 2022, 9:28pm UTC](https://forum.pinegrow.com/t/pg-slider-tutorial-qs/6508/10 "2022-04-21T21:28:02Z")

</div>

Final works fine in browser and in PG.  
But in PG there are 4 pagination dots, in browser 3.  
My Javascript is turned on and I turned on test clicks.

Maybe I’ll just continue on with the tutorial without the pagination section moving slides and see what happens.