Visual Composer Slider (or Carousel) Is Easily Customizable – Visual Composer Tutorials Part 6

In this video I’m gonna show how to use the visual composer slider also called the carousel to create sliders of your images and normally you’d use a different plugin for this something like revolution but if you don’t have huge demands for the functionality of that slider using the one built in the visual composer works just fine I’m going to show you how to use it how it works right now it’s up guys welcome back to another video is Beorn from WP learning lab where we help you get better at WordPress so you can earn more for yourself for your clients and for your business could your first time here hit subscribe then hit the bell icon so you don’t miss anything just out of curiosity what type of sliders have you guys used in the past and do use a mic sliders are they kind of played out those those headers or images on the site somewhere that just flip over time do you even use those even look at those I know I don’t that much anymore but people still seem to want them on their websites just curious what you guys think of them and now let’s get in the screen capture to see how to create them with visual composer I’ll see you there to get started with a visual composer slider we clearly have to have a page to put it in so if you don’t have a page you’re working on right now just go to pages and then add new to create a new page to play around with this I’m going to call this VC slider to keep it simple and I’m going to use the front-end editor so going to click on this button right here it’s going to save changes first going to publish this page and then click on friends and editor and some of these tutorials down the back editor some in the front end so you get to see both pick the one you like and use that one consistently they’re both equivalent it’s just the front end is more visual and makes it easier and faster for you to try different things so we have our header up here which is part of the theme here’s a look different title the page and then this is the content area right here so I click on add element here and I’m going to find the image slider which is under image image carousel is what they call it in visual composer it does function a lil bit differently than a slider and I’ll show you what that means in just a second we’re going to click on image carousel I’m not going to give it a title the reason being if you title the elements writing here it makes it more difficult to style them a CSS later if you want to do that so I usually use separate headings instead of titling a widget I just have the widget do what its purpose is and this is an image carousel that’s the purpose of this widget so I’m going to click on images right here we’re going to have to add some images to our carousel and I’ve got some stock photos here I’m just going to select these five just upload all those okay all our image is uploaded you can check and uncheck these boxes up here if you want to choose other images or do select images I’m going to choose all five of these and then click on the add images button in the bottom right and now we have them all in here and then we do some settings so the carousel size this one is a thumbnail by default doesn’t look great a thumbnail so I’m going to type in large which is one of the keywords listed down below we also have the option of defining precise pixel height and width if you want to there’s an on click action open pretty photos the default none means when they click on it won’t do anything or choose that one for right now I’m going to keep the orientation horizontal slider speed is in milliseconds so this is five thousand milliseconds which is five seconds and change out the two the purpose of this video slides per view is how many slides appear on the page at one time so I’m just going to choose that as one it’s going to auto play and all the rest will stay as it is then click on Save Changes and we see it update live right in the page and large still not that large so I’m just going to actually make this bigger and it changes to full see what happens Save Changes now we have the images in full and we have this slider going every two seconds or a carousel I should say the difference between a slider and a custom one of the big ones is if you click on the navigation buttons at the bottom a carousel slides through all the intermediary images where the slider just goes directly from the image you’re on to the one you’re going to so pay close attention as I click on the very last little curly on the first one I click on the last one it’s going to scroll through the middle ones very quickly see all that happened that’s a carousel versus a slider which would take you right back and forth between the front and back images or the two images you choose and there’s little arrows on the right they’re hard to see in some of the images just because of the contrast and the colors if you click on this edit link right here let’s add a little click action to it so on click let’s open pretty photo save that now for clicking these images it opens pretty photo which is just another image carousel which is interesting it is kind of the duplicate functionality so if we close this again go back to the Edit you also have the option of using custom links so if you click on our image it opens links and the way you do this is the first image is the first link here so we’re going to have this hashtag 1 to make up map the first link that’s going to be the one of the first image links to hit enter hashtag 2 is going to be the link for the second image enter again hashtag freezing the link for the third image so that’s how you link images if you want to skip an image hit enter twice as a blank space I have there should be 5 so we have this link for the first link to the second link for the third no link for the fourth link for the fifth so that’s how we assign links to images they can set same window or new window for when that image is clicked on now if we change this slides per view interesting functionality and take off these links sets up back to none click on Save Changes now we have two images appear at a time and when you slide its slides like this now we have an uneven number of images so the last spot is blank if you have multiple images per view like I do here make sure the number of images you have is divisible by the number of images per view so if you have three images per view you want to make sure that the number of images you have in your slider is a multiple of three otherwise you’re going to have blank spaces at the end maybe you like the blank spaces in that case choose whatever image number you want and some of the other options that are available are actually pretty nifty click on this pencil again to access the image carousel settings I’m going to switch this back to one slide per view and I kind of like the partial view I shouldn’t turn a bunch of these on at once so the height next various buttons which we can barely see anyway like right there barely visible high that loop with slider Save Changes now you can see a partial of the next image before it loads which I find pretty interesting so every time you switch images you see a partial the next one obviously this doesn’t look quite right to the image height of the image aspect ratios are the same so some are taller than others in the space available so you need a specific size of images to make this work properly but it’s a pretty cool or interesting feature on the one has interesting by the other hand it looks like it might be broken if you have someone who’s not familiar with it they might be like oh it’s broken it’s got half the other image in there that’s weird but I still kind of like it I’m going to unhide those take off that partial view and then we’re back to our slider settings and as you can tell you can mess around with a lot of settings and not break anything if things get really bad you can just go ahead and delete this image curve so let’s click on the delete button delete it and start over there’s nothing to worry what is go in here play around and just experiment and learn how this stuff works as you know visual composer is a premium plug-in which you can buy from code Kenny net if you buy it through the link below I get a couple percentage of the purchase price there’s no extra cost to you but what I’m going to send to you if you buy to that link is my complete visual composer course for free because basically I’m being paid by a visual composer instead of paid by you so I’m going to give you that course for free all you have to do is send me the receipt after you purchase visual composer and I will get you access to that course if you have a theme that has visual composer so you don’t actually buy the plug-in you won’t have access to the template library and a couple other features but I will give you a heavy discount for the visual composer course if you have a theme that has visual composer so if that’s the case is send me an email at Bjorn at WP Learning Lab comm say you have such such a theme with visual composer and I was sending the discount in for me so the next step is go ahead click below by visual composer send me the receipt learn all about it in my complete course and start building awesome stuff with visual composer so that’s so easy it is to create a slider or a carousel whatever you want to call it with visual composer if you have any questions or comments please leave them down below the video if you haven’t done so yet hit subscribe then hit the bell notification icon so you don’t miss anything and next up is clicking one of these videos on the right hand side to learn even more about WordPress or just keep cruising on this playlist and learn all about visual composer until next time keep crushing with WordPress that I will see you in the next video

As found on Youtube

(Visited 3 times, 1 visits today)

About The Author

You Might Be Interested In