Ultimate CMS Slider for Webflow

what's up YouTube in this tutorial we'll be learning how to build Sliders in webflow using swiperjs here we can use the scroll bar to control our slider we have pagination dots we can use our arrow keys on our keyboard or even just scroll left and right to move our slider this works with multiple instances of a slider on the page we have options to make it Loop infinitely and we'll also look at how to control these using attributes so let's get started so we'll have many different slider designs throughout our site and each slider is going to go in its own component div that holds the slider content and slider controls together this keeps the controls linked to the correct slider and allows us to have multiple instances of a slider component on the same page in our slider titles component there's classes that swiper relies on to create draggable functionality we'll leave these classes completely unstyled so we don't affect other sliders across our site instead we'll give each of these elements a combo class based on the name of their component so in slider titles in this case and now we can style each of these elements independently without affecting other sliders so let's start by building our main slider design we'll make this component here so this will be a slider dash mean underscore component inside that we have a collection list the wrapper is going to get a class of swiper and we'll give it a combo of is slider main to make style adjustments swiper is set to overflow hidden by default we want to switch that to overflow visible so we see excess slides hanging over the edge inside that we have our list this gives a class of swiper Dash wrapper and it will get a combo of is slider main so we can set flexbox to stack all the items side by side inside that we have the item it gets a class of swiper Dash slide and we'll give it a combo of is slider main we want three items in view so we'll do 100 divided by three percent and then we also need to set don't shrink or grow so we have our three items in view here on tablet we're going to switch that to 50 percent to get 2i items per the component and then on mobile portrait we'll make this a hundred percent so we get one item in view next let's add our pagination and scroll bar controls these can go anywhere inside our slider component so we'll go ahead and drop in a div we'll give it the class of swiper bullet wrapper this is going to house our pagination dots we'll give it a combo of is slider main so we can make style adjustments we found affecting other sliders across our site inside of that we can have a placeholder div with the class of swiper bullet the bullets will get automatically generated on page load based on the number of Sliders we have but we can use this placeholder div to style what they should look like so we'll go ahead and give it a width and for it to look right we need to give it a Min height instead of height we'll also go ahead and give it a radius of 50 percent to perfectly round it off and we'll give it a background color and then we can go ahead and just duplicate the bullets whichever one is active is going to get a combo class of is active so we can use that class to style it now these dots will look the same across every slider on our site unless we use custom CSS to give them unique Styles now we can add our draggable scroll bar so we'll have a div with the class of swiper drag wrapper and we'll give it a combo so we don't affect other sliders and we'll give this a width of 3080 em Max width of a hundred percent to prevent overflow a height of 0.9 M let's give it a radius to round it off and a background color inside that we can have the actual draggable piece so this gets a class of swiper Dash drag we'll give it a combo so we can style this one uniquely we'll give it a width but that width will get overridden by swiper based on the number of slides we have so we can go ahead and give this a border radius and sort of a background color and then lastly we have these link blocks to control our slider we just need to give them classes of swiper Dash priv and then swiper Dash next for this one this is what swiper uses to control the navigation let's duplicate our entire section to test having two slider main components on the same page and we'll limit one of them to only show three items to test how that looks also in page settings custom code we've added the swiper CSS file in the first block in the swiper Javascript file in the second block I've also linked up a code sandbox file underneath to write our code let's start with our component name our components have the class of slider main underscore component so we'll go ahead and Target this class here and We're looping through each element with that class and creating a swiper for each of them and we want to apply the swiper settings to the swiper div that's inside of this component We're looping through so if we save and then refresh our page we'll notice that both of the sliders have the draggable functionality here and the slides default to 100 width on swiperjs.com we'll click on API and then we'll head over to the parameters tab these are all the settings we can apply to our slider we'll look for one called slides per view and that is right here and the default value is one that's why each slide is full width but we can pass in a certain number like five slides per view or we could pass in Auto if we wanted to be Auto with based on the width we set in webflow so we'll go ahead and set slides per view and we'll set that to Auto so if we refresh our page we have three per view just like we said in webflow if we head down to tablet we get two per view just like we set and then on the next break point down we get that one slide per view let's set the slider speed to 700 milliseconds the default is 300. we'll also allow the user to control the slider with their arrow keys by putting keyboard true and will allow them to control it from scrolling by putting Mouse wheel true so if we save that and we refresh here notice how the slider moves a little slower we're also controlling it with our arrow keys or we can swipe left and right or up and down to move the slider now whenever we're swiping on this up and down we can't scroll the rest of the page we have to hover off to be able to scroll the rest so that could be kind of frustrating so what we're going to do here is open up an object and we'll add something called Force to access and we'll set that to true and what this means is the swiper will only change by swiping the direction of the slide so left and right here swiping up and down allows us to scroll the rest of the page another setting we can add is free mode true and before what would happen every time we drag the slider would sort of snap to its correct place and every time we swipe it would change by one slide but if we refresh with free mode true now we can drag freely and the sliders sort of never snap into place and whenever we're scrolling left and right it's free scrolling not sort of swiping to change the slide we can also add slide to click slide true and whenever we click on a slide it should slide us to that slide another option we have is follow finger false if we have this set we need to remove free mode and what follow finger false does is by default we sort of can scrub through our slides by dragging and they snap into place well with follow finger fall house instead of scrubbing through every time we drag it sort of swipes the slide and we're not scrubbing them in real time if we want some gap between our slides we can use the space between option it accepts a value of pixels like this or a percent like this now when we refresh notice how our slides get this Gap at it between them but the edge of the slide doesn't align with Edge of the content anymore to fix that we'll have to manually apply a number of slides we want per view in this case three and it's going to override the width we set on our slides in webflow to make sure three of them can fit in view including the Gap and it aligns to the edge now it's three slides on every break point here so we want to adjust that we'll set these settings to how they need to look on our smallest mobile breakpoint so one slide per view and a five percent Gap then we'll override those on different screen sizes so for mobile landscape we'll keep one slide per view but a four percent Gap hero and tablet will do two slides per view with a three percent Gap and on desktop we'll do three slides per view with a 2 Gap so we're just overriding these settings on different break points so if we refresh here we get our three slides per view on desktop two percent Gap switch it over to tablet the Gap increases a little bit we have two slides per view and then one down it's one slide per view so now we can link up our slider controls underneath our breakpoint settings We'll add settings for pagination navigation and scroll bars we're giving these element custom classes so we can override the default styling that swiper adds to these elements so our pagination wrapper is going to be the swiper bullet wrapper inside the current component We're looping through the active bullet gets a class of is active and the base class on the bullet is swiper Dash bullet it'll be a button HTML element and it'll be clickable to change the slide our next and previous arrows are going to be the swiper next and Swiper preve inside our current component and they're going to get a combo class of is disabled when we reach the end or the beginning of the slide we also have our scroll bar it has a class of swiper drag wrapper and the handle has a class of swipe or drag it's actually draggable so it's not just a visual indication but we're allowing the user to drag on that and it'll snap to the closest slide on release so if we save that and we refresh our site here we'll notice we can actually click these arrows we can click on our pagination dots and we can drag on the scroll bar and it snaps to the closest slide there is some base styling that's forcing our swiper bullet wrapper to be a hundred percent width we want that to be Auto width instead so we'll basically just copy that class in our page settings custom code will Target that class and we'll go ahead and set the width to Auto and then save whenever these arrows are disabled we want to grade them out so we're going to copy the class of our button elements and we'll open up an embed we'll say slider main button with the combo class of is disabled we'll set it to opacity 0.3 and let's give it pointer events none so that it's not clickable so now our pagination wrapper is auto width and our arrows are disabled when we reach the end another option we have for our sliders is to set them to Loop true so they appear infinite in both directions so this is our first slide here and it's in the active position the slides now in the active position and we can keep going through this slide is actually a duplicate of the first one so when we bring it over it resets our list back to the beginning to make this appear infinite so we get to choose what we want our active class to be on the slide and this case is active and I like to set the duplicate it slide when it's in the active position to have the same combo class so they have the same Styles when they're active whenever our slides in the active position we'll want to grab the image inside and scale it up to 1.2 but we'll want this animation to feel smooth and seamless so we'll apply a transition here and we'll apply it to transform and we'll make it last 400 milliseconds so now if I change this to 1.2 notice how it animates to that position and it animates back down we'll also want to increase the font font size on this text wrapper so we'll apply a transition and this time it will be to font size it'll have the same duration of 400 milliseconds and when we increase the font size notice how it animates up and then when we back it down it animates back down so inside our embed we'll Target the class of swiper Dash slide with the combo class of is active and then we'll find the slider main sort of text wrapper inside of it and we'll give that a font size of 2m then we can Target our active slide again and this time we'll find the slider main sort of image element inside of it and we'll scale that image up to transform of 1.2 so now whenever we add the is active combo class to our slide notice how everything inside sort of animates so if we preview that we can change our slides and notice how this slide animates whenever it becomes active one last option we have is centered slides true and with that applied the active slide will always be in the middle so notice how this one's active and when this goes to the middle position it becomes active I'm going to set loop and centered slides to false for now and we'll save that and so this first slider has a clear start and end point the second slider only has three slides in it so all the controls are hidden by default but when we head down to the next break point we get the controls back because there's enough space to actually be able to move the slider and when we come back to desktop the controls are gone just because our components share the same code doesn't mean they have to have the same layout or structure so maybe we remove the arrows from this one and maybe we take the pagination dots move them up into the top here maybe we decide not to have a scroll bar at all in this layout and maybe we need sort of like different arrows for this sort of design so I'll just go ahead and drop in a div I'll give this a class of slider Main and I'll call this wrap and I'll basically put the swiper inside this I'll make the wrap position relative and then it'll drop in sort of this custom link block that's position absolute to the wrap with margin Auto so we have this basically over the slide lighter I'm going to give the slider sort of a z index of one so that way I know it rests underneath these arrows and then I can go ahead and duplicate this arrow and maybe I give this first one the class of swiper Dash priv so that's what creates the actual functionality of this being clickable and then this one will get a class of swiper Dash next and for this I can absolute it to the other side and maybe we apply a different transform of like positive 50 percent and then for this Arrow I would just remove is reversed so even though these two components are using a slightly different structure and different controls we're still able to have them working from the same code if we want a second type of slider that's going to have completely different settings in code from our main slider component here we can just duplicate our entire block of code add another copy underneath and then we would just create a new component with a different component name maybe this is slider vertical component then we change out the code to our liking we can use the same class names like swiper next impreve to control the elements inside of it and we can just adjust this freely for this totally new component but what if these two components are mostly the same they can pretty much use the same code but we want one to maybe move a little faster and maybe be looping well this is where we can use attributes to customize our slider so we can create an attribute called Loop mode and set its value to true for this one we can also create another attribute called slider duration and set that to sort of 300 milliseconds and we can publish that so we'll start by creating the default values for slider components that don't have the attribute applied so the default value for Loop mode will be false and then we'll create an if statement and say if this which is the component We're looping through and then we'll get the value of its attribute of loop mode we'll say if that value equals true then we'll go ahead and update our Loop mode variable to be true instead of false so components with no attribute applied this is false for components that have an attribute of loop mode that's value value is true Loop mode will be changed to true then we can just take this variable and use it to adjust whatever we'd like in our setting so maybe that'll toggle Loop between true and false and maybe when it's looping we also want the slides to be centered so we'll use that here for centered slides also the slider with no attributes isn't looping and the focus is on the left the slider with the attribute is looping and the focus slide is in the middle we can do the same thing for slider duration we'll set the default duration to 700 for components that don't have an attribute set then we'll create sort of an if statement here and we're going to say if this component That We're looping through and we'll get the value of its attribute called slider duration and we'll check to make sure that attribute does not equal undefined so we're just making sure that this attribute is set in that case we'll update our slider duration variable to be equal to the value of whatever this slider duration attribute Is Now by default that's going to return a string like 300 or 700 or whatever we put there but we need this to be a number type so we can use it in our code so we'll just add a plus sign in front of this and that converts the string to a number then we can take this number for slider duration and plug it into our slider speed we could use the same process to set attributes for slides per view or really anything else that relies on a number with that set our first slider is 700 milliseconds and our second slider is 300 milliseconds so that wraps up how to build and customize a swiper slider in my next tutorial I'll show you how to create this slider using the techniques we've learned so far

Channel: Timothy Ricks

Views: 54,779

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive, collection, collection list, cms, slider, ca, carousell, drag bar, draggable, swipe, infinite, swiper, swiper.js, swiper js, library

Id: Qn1qL3TGMug

Length: 16min 29sec (989 seconds)

Published: Wed Nov 30 2022