Linking 2 Carousels - first for navigation, second for content. Seamless integration.

in this video we're going to have a look at how we can use two carousels from oxy extras one for navigation the other for content and what we're going to do is we're also going to use advanced custom fields pro for the content in that repeater that will appear on the posts page so to get started what we can do is we can head over to custom fields to create our repeater field group to appear on the post page so we'll go add new let's call this the post repeater let's say post content repeater then we're going to add a field and we'll call that the content and we're going to make that the repeater field scroll down and select repeater with that selected we will now add the content for the repeater so we'll add a field and that field table will be named that'll be a simple text field then we're going to add another field which will be called description and we'll make that a yc-week editor and the last field we're going to add is an image field upload image and that we're going to make a standard image field so with that in place we scroll down to make sure that the post type is equal to post and we'll publish that now before we go and work in oxygen what we need to do is make sure there's some content to preview so we head over to posts and in posts we're now going to the hello world standard post and we're going to add some content if we scroll down you'll see that we have our repeater field we add the row the name will be we'll call that first content and this is and we'll just add in some bullet points just to make it more interesting and then we'll add an image and the image i just have some colored blocks here and then we're going to add a second row because we need that just to get the navigation working and i'm going to call the second content i'll copy that over and i'll add an image and i'll just make the image a different color so there we have the content that we're going to use on our post if we head over to the front page you'll see that there's nothing to see at the moment this is your first post start editing right so with that in place let's head back to oxygen so we head over to con the templates for the post content which is block post and we edit with oxygen oxygen loaded we're now going to edit the template we'll head over to structure and what we'll do is we'll insert some content just below the comments so just after the existing article and we'll add a section in there and then what we're going to do is add the two carousels so add we then go to extras and we've activated the carousel module so we add one the first one added we then add the second one so now when we look at our structure you'll see that we have the two carousels now we want to link these two carousels so we go to the second one which will be the navigation and we have a look at syncing which is in the menu we click on syncing and we say use navigation for another carousel we enable that and here you'll see other carousel builder selector we'll copy that and we'll head over to the top carousel and here we're going to paste in the selector so that's now linked the two carousels together now what we want to do is link the content so in the top carousel we're going to add in the carousel sorry we're going to select the repeater as the function for content so here you see you have a couple of options and we've said we're going to go with the repeater and then what we do is we add the repeater inside the carousel head over to helpers choose repeater the query we then select will be advanced custom fields in this case and it was called the content and we apply those query parameters so there we've applied the repeater as we would normally then we head over to the repeater and let's insert a basic div to get started and inside that div i'm going to add the title so i'll create a heading let's make that heading 3 and we'll double click on that content and what we're going to do then is insert the data and this is going to be the repeater field and that will be name so we've applied the name now we would like to apply the description to the next field so we'll add a new field we'll call that text we double click the text we'll say insert data again repeater field this time we say description description will be inserted and the last item to add is going to be the image so let's head down and select the image and here we select the data option for the image select the repeater field and this time upload image so there we have the fields for the content what we'd like to do is have the content display neatly in the center so we're going to do that and this stuff we're going to set to a hundred percent and we're also going to center that content so now we have our content centered in the middle and if we save that and we're going to have a look at that on the front end let's do it this way you'll see we have our content but our carousel is still not active because all our content is in one slide and at the bottom our navigation isn't working so let's arrange for the top slide then to just display the content elements one at a time so we head over to our cells and we say that the cell width should be 100 now you'll see that we have our content displaying one post at a time we can save that and just to test we can head over to the front end and now you'll see that we have the first content displayed only and click and i get the second content or i can just slide it across so there you see the carousel at the top is working so let's now get the navigation carousel working so we head down and we're going to use the same repeater to set up the navigation so once again we go over to the helpers we select repeater and we head over to our query and we say use an advanced custom field repeater the content and apply query parameters let's expand that and let's get started with a div and then we're just going to add some text and that text we're going to set to the name of that advanced custom field so we insert the data and we go to repeater field and we select name and insert so now what's going to happen is you're going to see that we have the name of the post of of the repeated field appearing now in the second carousel so when this loads up you'll see now we have first content and we have second content all right but the navigation is still not working so let's head back and now we're going to head over to our content so the first thing that we need to check if it's not working is make sure that the selector at the top is in place and you'll see that that says carousel build 2 which is incorrect so we head back to carousel builder we head over to syncing and we copy that selector we head over to the top repeater and we change change that we save and now when we refresh our carousel on the front page you'll see that your carousel is now working so make sure that that selector is correct obviously now these buttons are not in the right place and the dots are in the way so what we'll do on the top carousel is we'll head over to page dots and we will display and you'll see that the page dots have gone and we also don't need the navigation arrows so let's remove the navigation arrows so the navigation arrows we don't need because we're going to control the navigation from the second carousel the second carousel needs a little bit of styling so what we'll do is we'll head down to our buttons and we're just going to quickly give them a background color we'll just do it something light right something light and maybe you want to give them a quick border so let's go solid one pixel let's make it slightly darker and then let's give it a border radius of five so there we've styled our buttons we'll save that and if we have a look on the front end now you'll see that those buttons are now styled but still a little bit too close together so we'll need to adjust for that all right we head back we'll head back to our buttons and i'll just give it a little bit of more space inside the button right so there our buttons are looking quite nice and a little bit close together inside our div we're going to just give that a spacing of 5 right so that's looking much better now and what we're going to do is we're going to head over to the carousel builder and now we're going to select what's visible so what we can do is go to our cells in this case the buttons are the cells and the space between the cells we can set that maybe to 15 and you'll see that they are separated we save we head over to the front end to our blog post and you'll see that those formatting items have taken effect and now you can see first content and second content so there we are navigating between the cells now this could quite easily have been images in this case we are using some content right we also don't necessarily need those buttons at the bottom so we can head over to the second carousel and we can head over to the dots the page dots and we can disable them so no more page dots so let's head back to our content here i see the images and displaying so let's just make sure that the image will display and to do that what we do is we head back to our custom fields and in our repeater we'll make sure that the upload images repo return the image url and not the array right with that in place let's head over to posts and when we view that post now you'll see that the image is visible so in advanced custom fields you must return the url for the image to display and we can now browse between the content let's head back to our carousel builder let's save that and what you can do now of course is you might want to add some space and so we can go to the first carousel advanced and we can just put in some space below that and maybe we do the same for the second carousel builder and of course we can save that and now when we have a look at our content you'll see that we have the carousel slightly below the content right so we have a bit more space there still working if you find that it's a little bit frustrating from the bottom and you decide that you want to move your carousel to the top that's quite easy it's then just a case of moving your the one carousel above the other one okay that should do it and now when we head over to the front end you'll see we cannot navigate in that way so that's pretty much how you could add some content and then connect a second carousel for navigation purposes let's have a look at that on mobile so there we have the first content and there we have the second content and you'll see now that you might not be happy with the the styling in the layout so that you can update and change as you would any content element you might see it being cut off and let's head over to our mobile view so this mobile view looks okay if we go to the smaller screen we'll see that on the front end that is cut off so let's adjust that carousel settings and where we see overflow we make that visible so we select visible we save that and that ensures that the content is visible so let me just refresh that to show you and you'll now see that the the content is visible well that was just a quick introduction to show you how you can link the two carousels and put different content in the carousels and how you can make sure that it works nicely on a mobile device and you can of course remove the arrows or move them or style them differently and even move them above or below that carousel should you wish to assign a custom element but for now that's just a quick link of two carousels hope you enjoyed the video thank you for watching

Channel: Bruce Young

Views: 289

Keywords: OxyExtras, OxyExtra Cousousel, Linking Carousels, ACF Carousel, ACF repeater

Id: xLm_K4WYd2k

Length: 17min 56sec (1076 seconds)

Published: Sun May 02 2021