Creating a Slider with Pinegrow Interaction 2

A step-by-step tutorial about creating custom sliders with Pinegrow Interactions 2.

Before we start

What you’ll learn?

By following this tutorial you will learn how to:

Use scroll interactions
Create Scroll scenes with snapping and pagination
Add smart auto play to the slider
Animate individual slides with Scroll scenes and custom animations
Working with custom selectors
Using data attributes in animations
Reusing interactions on multiple sliders
Generate standalone JavaScript file to power sliders without using Interactions data attributes and more!

What you’ll need?

Of course, you can just watch the tutorial to see how Pinegrow Interactions work. But we recommend that you follow along the tutorial, doing all the steps on the provided landing page. To do that, you’ll need:

Pinegrow Web Editor, either a free trial or activated license that includes Pinegrow Interactions.
Download the starting project without interactions. Unzip the file and open it as a project in Pinegrow Web Editor.
You can also download the finished project as a reference and the the example slider with animated slides.

If you already have Pinegrow Web Editor, but don’t have the Interactions add-on you can start a trial in Support -> Purchase & Activate under Add-ons: Interactions.

Want to know more about Pinegrow Interactions?

Visit the Pinegrow Interactions Documentation portal to learn more about Interactions, actions, licensing, API and more.

Need help?

Post any questions and feedback about this tutorial to a dedicated Pinegrow Forum topic.

Watch the whole tutorial

The tutorial has 10 parts, total length is around 50 minutes.

We recommend that you watch the whole tutorial and follow along with the provided project.

Alternatively, you can scroll down past the video to watch and read transcripts of individual tutorial parts.

The following section contains the videos and transcripts of individual parts of the tutorial:

1. Introduction

Hi there, today we’ve come up with a super cool tutorial! In this tutorial we will use Pinegrow Interaction 2.0 to create a custom slider.

Pinegrow Interaction 2.0 gives you the power to add custom animations and interactive components to your web projects, all without coding and without dependencies on any other JavaScript libraries.

This is only one of the capabilities of the new Pinegrow Interactions 2.0. Here is a preview of the end result of the slider that we are going to build. Our slider will auto play, it will pause when the user interacts with it and it can be controlled by control buttons.

On touch enabled devices users will be able to navigate using touch gestures.

In addition, we also have pagination dots, which are clickable and will take us to the associated slide.

This is a pure HTML & CSS slider. It doesn’t depend on any CSS framework. The layout and styling used is completely up to you. Pinegrow Interactions works with any HTML project.

You can use this slider as a starting point for your own custom sliders, or just as an example of what can be built, as well as how to build it with Pinegrow Interactions.

The ready-made slider is also available in Interactions Blueprints from where you can easily add it to your projects.

That being said, nothing beats looking under the hood to learn how things are made and unlock the full power of Pinegrow Interactions.

Now let’s build this slider with Pinegrow Interactions. For this tutorial we have already prepared the layout for you to get started. Please get the starter project from the link in the description and follow along this video tutorial.

2. Layout for the slider

Open your Pinegrow Web Editor

Click on Open Project
Now choose the starter project folder
And click Select
Now click on the index.html file to open it

Now you should see a block with horizontally scrollable contents, which are our slides. At the moment this is built with just HTML and CSS.

Now let’s check the HTML layout, the div with class name .pgia-slider is our slider block. It has 3 main child blocks with the class names: .pgia-slides-container, .pgia-controls and .pgia-progress

As you might have guessed,

.pgia-slides-container – contains the main slide blocks with class name .pgia-slide, you can have any number of slides here and each slides can contain its own contents

.pgia-controls – contains all the control buttons and .pgia-pagination block. Control buttons are the 2 links for triggering the slider to go to previous and next slides. And .pgia-pagination block has only one item initially, later we will dynamically add more pagination dots depending on the number of slides, with the help of Pinegrow Interactions.

.pgia-progress – contains .pgia-progress-bar block which will be used as an indicator for slides

The CSS styles applied to these blocks are pretty simple. In any subsequent project you should modify the height of the .pgia-slider block and alter the .pgia-slide blocks to work with your contents. It is best to keep the rest as it is but you can modify CSS to change the placement or styles of slider controls and pagination dots.

Now I want to show you something interesting in the style.css file. In the Project panel click on the CSS folder, then click on the style.css and it should open in the code editor.

Now if you check the code, classname .pgia-slides-container has overflow: hidden so that the scroll bar will not be visible.

But this prevents scrolling with touch gestures on touch enabled devices. So, we used the media query any-pointer: coarse to set the overflow to auto for devices with touch pointers.

We also have a neat trick that makes it easier to edit the slider in Pinegrow. We are targeting the .pgia-slides-container with a data-pg-id attribute and applied overflow: auto, making its scrollbar visible.

data-pg-id is a special attribute used by Pinegrow during editing. This will make the scrollbar visible only when we are viewing the slider in Pinegrow. The scrollbar will make it easier to navigate around the slider when we are working on it. But it won’t be shown in the browser.

The CSS file on this starter project only contains CSS for this slider and there is no extra CSS applied.

So that is it for the layout of our slider, let’s close the code editor and start adding interactions to it.

3. Adding navigation to the slider

So let’s start adding interaction to the slider controls. Slider controls will be used to move the slider to the next or previous slide.

We already have the slider controls layout in place, as you can see this has 2 .pgia-control links that will be used for moving our slider, so let’s add interaction to the first control link

Go to the tree panel and select the .pgia-control link with class name .prev
Go to Interactions panel and click on Activate Interactions if it is not enabled
Now go to the Actions List and click on Interactions, interaction settings should appear
For Name enter ScrollTo
For Trigger > select Click on…
Leave the Target blank
Click on Edit Animation and the Timeline editor should appear
Go to the Timeline Editor, on Selector > click on Edit selector
On the popup field enter ^.pgia-slider|.pgia-slides-container, this is a very useful selector.

First part of this selector has caret ( ^ ) which goes up the tree to target the closest matching parent in this case .pgia-slider and the pipe character ( | ) is used to look for the .pgia-slides-container within that element.

Now press Ok
Now click on the blank space of the Timeline editor to create new transition and a transition settings should appear
For Type keep it as Tween
On Position enter 0
For Duration keep 0.5
Now click on Add property > go to Scroll > select Scroll to
For Scroll to we can set any of the options available here, but for this button it we should select prev_page
Lastly click on Advanced Options and enable Prevent default action, this is usually done when we don’t need the link to go anywhere. Our link has # as the href value, so if we don’t apply prevent default it will scroll to the top of the page.

Save and refresh the page and we can test the button now. But as we are already on the first slide, let’s manually scroll the slider. You can just click on the empty space of the slider. If you are on a laptop with a touchpad, you might easily do a horizontal scroll with a swipe on the touchpad.

Now the slider is on the last slide, let’s test the interaction. Press the Alt key on the keyboard and click the control link on the left and it should take you to the previous slide. This way we can set next for Scroll to value on the second control link.

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}

Now let’s add Apply to many interaction to integrate same interaction to other pgia-control

Go to Actions List and click on Apply to many

Go to Apply to many settings
On Target select Edit selector
On the popup field enter $.pgia-control and press Ok

Now save and refresh the page. Click on each slider control to check their functionality; don’t forget to press the Alt key on your keyboard if you have page clicks turned off. You should be able to see that next.pgia-control and prev.pgia-control should work as intended.

Instead of creating different interactions – one for each button – we created just one interaction and assigned scroll transform to read the scroll destination from data-scroll-to attribute of the link target element. This is done with the statement ${target.data-scroll-to}. Target refers to the target element of the interaction and data-scroll-to is the attribute name.

With this setup we just need to set the data-scroll-to attribute on each link. We can do that in the Attributes editor in the Properties panel, or use the Edit element code editor and do it in the code.

Note that after editing the code of elements with interactions we have to refresh the page view to refresh interactions on these elements.

4. Making the slides snap

Now we have a working slider that moves when we click on the control buttons. But wouldn’t it be nice if the slides snapped in place when we horizontally scroll the slide? This will be most useful for the touch devices.

Now let’s start by applying interactions to our .pgia-slides-container, this is the main container block that contains the slides so the sliding interactions should be applied to this block.

Go to the tree panel and select .pgia-slides-container and go to Interactions panel

Now go to Actions List and click on Scroll Scene, Scroll Scene settings should appear
For Direction select Auto detect
Now click on Start and End and select Whole Scroll Area from the dropdown

Now the .pgia-slides-container will work like a slider and we can add more interactions to this. So let’s add snapping to this.

Now click on Snapping, some options should popup below
For Snap to select Elements

This tells the scene to snap to its child elements, in this case slides.

There is duration, ease and other options that you can play with to change the snapping behaviour.

Now manually scroll the slider or click on the empty space of the scrollbar and it should snap to the sides so we can always see the full slide contents. Test this with a mobile or a touch device if you can.

5. Adding pagination

Now our slider is all set, let’s enable pagination as well.

We have our layout for pagination inside .pgia-control block, which has a link within a div with the class name pgia-pagination. First we are going to add interaction to make the active pagination item stand out from the other dots.

On the tree panel now select the .pgia-pagination-item link. Now go to the Action List and click on Interactions, the interaction settings should appear

For Name enter Current
On Trigger > select No event, as this will automatically triggered as the slider scrolls
Leave the Target blank, as we are targeting the element itself
Now click on Edit Animation and Timeline editor should appear
Now click on the blank space of the Timeline editor to create new transition and a transition settings should popup
For Type keep is as Tween
On Position enter 0
For Duration enter 0.2
Click on Add property > go to Transform > select Scale
For Scale enter 1.5

Now this is the interaction that should be applied to the active slide. We will do this next while enabling the pagination on our slider. This is on the same Scroll Scene settings which were applied to the .pgia-slides-container. Here we need to do 3 things; enable pagination, generate pagination items as the same number as the slides and apply animation for active pagination item.

So select .pgia-slides-container on the Tree panel and go to scroll scene settings.

Click on Pagination & Options
Now some settings will appear
For Paginate > select .pages
For Items click on Edit Selector
On the popup field enter ^.pgia-slider|.pgia-pagination-item

This selector targets all pgia-pagination-items inside the .pgia-slider element.

Now press Ok
Next we should enable Create Items below, this will automatically generate pagination items by detecting number of slides on the slider

Now let’s apply animation for the active pagination item, we have already created an interaction on pgia-pagination-item with the name Current. Now let’s use it

On Activate item animation enter Current
On Deactivate item animation enter -Current, to play the same animation in reverse.

Now we are done with the pagination setup. Also you can check the first pagination item is 1.5 times larger than others, because this is running active item animation. Check this by clicking on the slider control buttons. Press the Alt key on your keyboard and click on any of the control buttons. And you should see the pagination item moving to the active item as well. This will be useful when we set our slider for auto play later.

Now pagination dots will show which slide we are on, so let’s add one more interaction to make it work on click. We can make it go to the particular slide when we click on any of the pagination dots.

On the tree panel select .pgia-pagination-item link and check on the interaction panel, we already have one interaction applied to it. Now click on the Add Interaction button and new interaction settings should appear.

For Name enter ScrollToSlide
On Trigger > select Click on…
Leave the Target blank
Click on Edit Animation and Timeline editor should appear
Go to the Timeline Editor, on Selector > click on Edit selector
On the popup field enter ^.pgia-slider|.pgia-slides-container. This selects the slides container within the closest slider block
Click on Ok
Now click on the blank space of the Timeline editor to create new transition and a transition settings should appear
For Type keep it as Tween
On Position enter 0
For Duration keep 0.5
Now click on Add property > go to Scroll > select Scroll to
For Scroll to select or type item

Using the value item will auto detect the index of the pagination item and matches the same index of that slide.

At last click on Advanced Options and enable Prevent default action

Now save and refresh the page and click on the pagination item and it should take you to that particular slide. To click on the pagination item press Alt key on the keyboard and click on one of the pagination items.

6. Creating auto-play animation and making the slider infinite

Now we have a working slider that works when we slide or click on the controls. We can add one more important interaction to our slider, to make it slide automatically.

We will create AutoPlay interaction, but before that let’s create a separate interaction for the slide to go next.

For this go to the tree panel and select the div with the class name pgia-slider. Now go to the Action List and click on Interactions, the interaction settings should appear

For Name enter GotoNext
On Trigger > select No event, as this will be automatically triggered by AutoPlay interaction that we are going to create next
Leave the Target blank
Now click on Edit Animation and Timeline editor should appear
Go to the Timeline Editor, click on Selector, on the popup select div.pgia-slides-container
Now click on the blank space of the Timeline editor to create new transition and a transition settings should popup
For Type keep it as Tween
On Position enter 0
For Duration enter 0.5
Click on Add property > go to Scroll > select Scroll to
For Scroll to enter next

Now let’s create a new interaction for .pgia-slider on the interaction panel click on Add Interaction, new interaction settings should appear

For Name enter AutoPlay
On Trigger > go to Page & Window and select Load – Immediately
Leave the Target blank
Click on Edit Animation and Timeline editor should appear
Now click on the blank space of the Timeline editor and a transition settings should popup
For Type select Set
On Position enter 2, this will be the time interval for our slides to go next so you can set it as you prefer
Now click on Add property > go to Interactions > select Play Animation
For Play Animation enter GotoNext

GotoNext is the name of the interaction we created before which triggers the slider to scroll

By default this interaction is played only once but we need to repeat this so the slide can go next infinitely.

For this go to the interaction panel, on AutoPlay interaction settings click on Advance Options, other settings should appear below
For Repeat enter -1, to repeat the interaction infinitely value of Repeat should be set to -1

Now save the project, hit refresh and you should see our slider automatically slides.

But another thing is that our slide stops at the end. Now we need to make it slide in a continuous loop. For this we should enable the Infinite Scroll option on our main Scroll Scene settings.

For this select .pgia-slides-container and go to scroll scene settings.

Check under Pagination & Options and enable Infinite Scroll

Now check the slider and it keeps sliding in a loop, but after the fourth slide it goes to the second slide. So what we need to do here is to clone the first slide and add it at the end.

On the tree panel select .pgia-slider again and go to the Interactions panel then click on the Add Interaction button, new Interaction Settings should appear

For Name enter CloneFirstSlide
On Trigger > go to Page & Window and select Load – Immediately
Leave Target blank
Now click on Edit Animation and Timeline editor should appear
Go to the Timeline Editor, on Selector > select first.pgia-slide block
Now click on the blank space of the Timeline editor to create new transition and a transition settings should popup
For Type select Set
On Position enter 0
Click on Add property > go to DOM > select Create Clone
Again click on Add property > go to DOM > and select Create insert at
For Create insert at enter Append

Now refresh the page and check our slider should go from 1, 2, 3, 4 and 1 again as we need it.

Now let’s make it more interactive by enabling the progress bar. We already have .pgia-progress-bar block at the top, we need to make it go from 0 to 100 to show the slide progress.

We need to implement this inside the AutoPlay interaction, as this interaction triggers the slide to go next.

So let’s go to the interaction panel, on AutoPlay interactions settings click Edit Animation
Now go to the Timeline Editor and click on Add Timeline, new selector should appear
Click on selector and select div.pgia-progress-bar
Now click on the blank space of the Timeline editor to create new transition
For Type select Set
On Position enter 0
Click on Add property > go to Dimension > select Width
For Width enter 0

Now create another transition, so the our progress bar would have width 100% at the end

For Type keep it as Tween
On Position enter 0
For Duration enter 2, this duration should be the same value as Position of our GotoNext interaction above
For Ease > go to Linear > and select Linear.easeNone, this is to remove the default ease effect
Click on Add property > go to Dimension > select Width
For Width enter 100%

Now refresh the page and check, for every slide our progress bar should go from 0 to 100% width.

7. Stopping the auto play on user interaction

Our slider is quite complete but we can make it more interactive. What if the slider stops when we hover over the slider and continues to play when we do not. Let’s do that, for this we need to create 2 interactions, one to pause the slider and another to play again. Let’s start with the first one, we are already working on .pgia-slider

Now go to the Interactions panel and click on the Add Interaction button. New Interaction settings should appear
For Name enter UserActive
On Trigger > go to Mouse & Touch > select Mouseenter/Touchstart
Leave the Target blank
Click on Edit Animation
Now click on the blank space of the Timeline editor and transition settings should appear
For Type select Set
On Position enter 0
Click on Add property > go to Interactions > select Pause Animation
For Pause Animation enter AutoPlay
Now go to the interaction settings again > click on Advanced Options and enable Restart on play

Now if you hover over the slider, it should stop sliding. As this is done, now we need to do a similar interaction to start the slider again.

Go to Interactions Panel, and click on the Add Interaction button to create new interaction

For Name enter UserInactive
On Trigger > go to Mouse & Touch >select Mousleave/Touchend
Leave the Target blank
Click on Edit Animation
Now click on the blank space of the Timeline editor to create new transition
For Type keep it as Tween
On Position enter 0.5, this is to add little delay to start the animation
On Duration enter 0.5
Click on Add property > go to Interactions > select Play Animation
For Play Animation enter AutoPlay
Now go to the interaction settings again > click on Advanced Options and enable Restart on play

Now hover over the slider and check, it should stop and it should run again as we hover out of the slider. You can know the AutoPlay interaction is paused by checking it on the Tree panel.. For this one we also have the progress bar that stops as we hover over the slider.

So this is how to create a fully custom slider with Pinegrow Interactions 2.0.

8. Adding interactions to individual slides

We’ve completed building a fully custom slider with Pinegrow Interactions 2.0. But still there is a lot we can do here. For example we are going to add an animation to the slider contents so that on each slide, the contents will have some animation.

We need to apply scroll scene interaction to our slides. Before that let’s create 2 interactions for ShowContent and HideContent that will be used on the scroll scene settings. This will be our fade-in effect for the slider content.

Go to Tree panel and select first .pgia-slide
Go to Interaction panel > go to Actions List and click on Interactions, new interaction settings should appear
For Name enter HideContent
On Trigger > select No Event, as this will be handled by the scroll scene later
Leave the Target blank
Click on Edit Animation
Go to the Timeline Editor > click on Selector, on the popup select h2.placeholder
Now click on the blank space of the Timeline editor to create new transition
For Type keep it as Tween
On Position enter 0
For Duration enter 0.1
Click on Add property > go to Opacity > select Auto Opacity
For Auto Opacity enter 0
Now go to the interaction settings again > click on Advanced Options and enable Restart on play

Now let’s create ShowContent interaction.

Go to Interaction panel > click on Add Interactions, new interaction settings should appear
For Name enter ShowContent
On Trigger > select No Event, as this will also be handled by the scroll scene later
Leave the Target blank
Click on Edit Animation
Go to the Timeline Editor > click on Selector, on the popup select h2.placeholder
Now click on the blank space of the Timeline editor to create new transition
For Type keep it as Tween
On Position enter 0.4, to add a little delay for the animation
For Duration enter 0.6
Click on Add property > go to Opacity > select Auto Opacity
For Auto Opacity enter 1
Now go to the interaction settings again > click on Advanced Options and enable Restart on play

Now let’s apply scroll scene interaction

Go to Interaction panel > go to Actions List and click on Scroll Scene
For Direction select Auto Detect
Click on Start and End, for Start and End select Describe, some new settings will appear below
For Scene Element’s select Start
For reaches the select End

This means when element’s strat is at the end of the view

Now for The select End
For reaches scroller’s select Start

This means when element’s end is at the start of the view

Now go below to Animation 1 settings
First let’s set how the scroll scene will work, click on Advanced Options
For Play select with scroll
Now click on Edit Animation above
Go to the Timeline Editor and create new transition
For Type keep it as Tween
On Position enter 0
On Duration enter 0.5
Click on Add property > go to Interactions > select Play Animation
For Play Animation enter HideContent

Now add new transition to show content
For Type keep it as Tween
On Position enter 0.5
On Duration enter 9
Click on Add property > go to Interactions > select Play Animation
For Play Animation enter ShowContent

Again for the end add new transition same as the first one
For Type keep it as Tween
On Position enter 9.5
On Duration enter 0.5
Click on Add property > go to Interactions > select Play Animation
For Play Animation enter HideContent

Now refresh the page and check, content on the first slide should have a fade-in effect and it will re-animate when it appears again. This way you can create advanced animations even if you have multiple elements inside the slide. You can even add different animations for different elements.

Now we need to apply this same animation to other slides as well. For this we can simply add Apply to many interaction.

Now keep .pgia-slide selected > go to Actions LIst and select Apply to Many
Apply to Many setting should appear above
On Target click on Edit Selector
On the pop filed enter ^.pgia-slider|.pgia-slide, with this we are selecting all the slides within the .pgia-slider
Now press Ok

Now save and refresh the page, content on each slide should fade in when it comes into the view.

9. Reusing the interaction on multiple sliders

Now we’ve completed building a custom slider and you may be thinking; Do I have to create a slider every time I need it? Of course not! Pinegrow is here to help you. You can reuse these same interactions within the same project but also for a different project.

To reuse the interactions, the layout of the slider has to be the same. You can just copy and paste the same layout or make it into a component, it is that easy

So to reuse the slider in the same project we can simply add Apply to Many wherever the interactions are applied. This is very helpful since we only have to edit interactions on one slider only.

Let’s do this, first duplicate this slider and remove all the interactions from it. On the tree panel select .pgia-slider and press right click on it and select Duplicate. You can also do this by pressing Ctrl + D on Window or Cmd + on Mac from your keyboard.

Now remove all the interactions form all the elements on the second slider. And you should see that the second slider is just the basic layout without the interactions.

So let’s work on the first slider and add Apply to many, on all the elements where interactions are applied.

First select the .pgia-slider block on the tree panel

Go to Actions list > click on Apply to many
For Target > click on Edit selector
On the popup field enter $.pgia-slider and press Ok

Now select the .pgia-slides-container block on the tree panel

Go to Actions list > click on Apply to many
For Target > click on Edit selector
On the popup field enter $.pgia-slides-container and press Ok

Now go to .pgia-slide block on the tree panel, this already have Apply to Many interaction so we just have to edit it

Go to Interactions panel
Go to Apply to many settings
On Target > click on Edit selector
On the popup field replace with $.pgia-slide and press Ok

Similarly select the .pgia-control block, this also have Apply to Many interaction so let’s just edit it

Go to Interactions panel
Go to Apply to many settings
On Target > click on Edit selector
On the popup field replace with $.pgia-control and press Ok

Now for the .pgia-pagination-item select it on the on the tree panel

Go to Actions list > click on Apply to many
For Target > click on Edit selector
On the popup field enter $.pgia-pagination-item and press Ok

Now we’ve applied Apply to Many to all the blocks with interactions. The $ sign in front of a class name means this will target any elements on the page with that class name.

Now save the project and refresh the page. The second slider will function just like the first one, click on control links and pagination items and it will work. This way you can have as many sliders as you need.

10. Generating reusable Javascript code & Conclusion

Pinegrow provides another very efficient way to reuse your custom built slider. There is an option to export the interactions that has been applied to the slider. And you can use the same interactions for other projects just by importing the exported JS code. You do need to duplicate the layout for it to work in the same way, but this will eliminate the process to add interactions on all the elements.

To export these interactions, first select one of the elements which has at least one interaction applied
Go to Interactions panel
Go to Actions list
On the top beside the search box there is a wrench icon, click on it
And click on Generate script

On the popup enter a file name for the file that will be exported but at the end of the filename add .js. As exported code is javaScript code this will help when using in another project. I’m naming my file myslider.js

If you want to export to a different location you can click on the folder icon and select where you want to export the code. If not this will be exported to the same project folder.

Now click on Generate Interactions Script

Now your interactions script should be exported and it should also appear on the Project panel. You should see the file myslider.js, let’s check the code. Click on the and it should open in the code editor.

You do not need to understand the code, but to reuse this, you can just copy and paste this code inside your JS file. If not you can directly link your myslider.js in your HTML, like any other JS file.

This slider runs on Pinegrow Interactions, so the pgia.js file should be included before your custom JS code.

So let’s try this. For this example I’m going to create a new HTML page inside this same project.

To create a new page

Go to the top menu > click on File > click on New page
You should get the same popup when you create a new project
We just need a basic html page so click on Plain HTML and select index.html
On the next popup enter the name for the file, here I’m going to enter newpage.html
Now press Ok

Now this new page will open automatically, you can see this file on the project panel. Next we’ve to copy the layout and CSS. Since we have created this new HTML file following the process, style.css is already included in the code.

Press Ctrl + E or Cmd + E on Mac and you can view the code on the code editor. There you should find style.css included at the end of the Head tag. When you are done, press Ctrl + E or Cmd + E on Mac again to close the code editor.

Now let’s go to index.html and copy the layout.

From the Project panel click on the index.html, page should open in the viewer
Now go to the tree panel and select the second slider block, you can press Ctrl + C or Cmd + C on Mac

Now we need to paste into the new page, go to the project panel and click on newpage.html and it should appear

Go to the tree panel and click on body tag
And you can simply press Ctrl + V or Cmd + V on mac

Now our layout should appear and CSS should be already applied to it.

Now instead of applying interactions again let’s use our generated JS script. And before including our JS script we need to first include Pinegrow interactions file, and that can be done by just activating Interactions for this page.

So let’s go to the interactions panel and click on the Activate Interactions button. Let’s check the code by pressing Ctrl + E or Cmd + E on Mac and go to the bottom of the page and you should see pgia.js file included at the end of the code.

As pgia.js file is included, now we can include our script. Since we already have saved it as a JS file, we can include it similar to other JS files.

On the code editor, just below where the pgia.js file is included, type <script src=”myslider.js”></script>

And as soon as you finish typing, your slider should start sliding and you will know that it works. And do save the project when you are done.

Conclusion

This concludes our tutorial for creating Slider with Pinegrow Interactions 2.0.

In this tutorial:

We created a powerful slider based on our custom HTML layout and styling.
We also learned how to reuse this interaction to power all slider instances in our project.
And we did all of this without writing any Javascript code.

There is a lot more customization that we can work on. And we can use this as the base for our customized sliders. I’d like to show another custom slider that we’ve done. This uses the same layout but some CSS is customized and there is additional content inside the slides. Almost all interactions are the same except the interactions for the slide contents.

So this is how you can create your own custom slider with the new updated Pinegrow Interactions. Pinegrow Interactions 2.0 brings a lot more amazing updates, do not forget to check our other videos and our website.

One new feature is that we’ve prepared a pre-built library of most useful interactions, we call it Interactions Blueprints. Blueprints have components like sliders, galleries and tooltips. So now you don’t have to create components from scratch. Instead you just use a blueprint and customize it according to your needs.

You can access Interactions Blueprints by going to the library panel and clicking on the Interactions tab. Here you can find all different types of blueprints and most of them have multiple components of different types.

Now let’s check the slider blueprints, to do that click on the Sliders.

Currently, you should find 3 types of sliders

Horizontal with 1 slide per page
Horizontal with 4 slides per page and
A Vertical slider

To use one of the sliders just click and drag it inside the page where you need it. This way you can insert a slider in any page in no time. Do remember Blueprints are prepared with their own CSS styles and the CSS files are placed inside the PGIA folder.

That is it for this tutorial, I hope the video was helpful.

Also do check the finished project, you can reuse the code or customize it as you need.

If you’ve any questions please feel free to contact us via email or through the Pinegrow forum.

We will be coming up with more videos related to Pinegrow Interactions and How to videos for creating more interactive animations. So keep watching and following.

Thank you for your time and we will see you in the next video.