HOW TO INITIALIZE A SLIDER PROPERLY | Slider Not Working !!! Trick to Handle ANY Slider
Aug 15, 2023
HOW TO INITIALIZE A SLIDER PROPERLY | Slider Not Working !!! Trick to Handle ANY Slider
If a slider is not working or you don’t know how to properly initialize a slider then this video is for you. Almost every website has got a slider. Two most popular sliders are Slick Slider and Flex Slider. You can use these in any frontend project or in WordPress. Even after using these sliders again and again, every now and then a slider just stops working or just does not show up or throws console errors. I just have templates of sliders that I use, to just make sure I don’t miss anything and don’t waste time on usual and repetitive fontend tasks. In this video we are exploring how to initialize a slider properly and the right way and what to do if a slider is not working even if we have copied the exact code as in docs.https://www.webstylepress.com https://www.facebook.com/webstylepress https://twitter.com/webstylepress https://github.com/webstylepress
Content
0.16 -> welcome to webstylepress almost every website
has got a slider two most popular sliders are
5.84 -> slick slider and flex slider even after using
these again and again every now and then some
12.08 -> sliders just stops working or just does not
show up i just have templates of sliders that i
20.48 -> use to just make sure i don't miss anything
and don't waste time on usual stuff
27.12 -> in this video we are exploring how to initialize
a slider and what to do if a slider is not working
33.76 -> even if you have copied the exact code as in
docs remember this website this is cdnjs website
42.48 -> you can get the code for popular libraries from
here it will save you from downloading files and
49.36 -> extracting required files for sliders or any
other library i will copy css and javascript
57.36 -> files for these two sliders from this website
you can just search for libraries from here and
64.32 -> then it will show you files for required libraries
and even their versions you can select the version
72.48 -> and you can copy the code exact code or tag
and you can use that code in your project
80 -> this is slick slider if we go to its usage this
is what we need to use a main div and then divs
89.36 -> inside it these inner divs will be slides
and then slider will be initialized at this
97.44 -> main div and it has got css files and then it has
got js files that we need and this is flex slider
110.4 -> and this is how we use it this is the
structure a div with glass flag slider and then
117.6 -> unordered list with the class slides and then we
have got a gs code that we need for this slider to
128.48 -> make it work okay let's start with slick
slider we will need css files for slick slider
136.24 -> that i will paste here again these are
cdn links and this is slick min css
146.24 -> css file for select slider it's minified version
and then slick theme men css select theme file
155.6 -> and slick css file these two files are css
files first click slider that came from cdnjs
165.2 -> and i am pasting these after bootstrap and
even after these i have got my custom.css file
174.48 -> after this for slick slider we will need
javascript file that i will paste after jquery
182.4 -> this is slick min js minified version
for slick js file copied after jquery
194.08 -> save and then we will need some html
for this slider this is the slider
203.76 -> structure and we've got a class slider for wrapper
and inside the wrapper each div will be a slide
215.6 -> save
218.56 -> this is the output just three images no slider
229.52 -> so slider will not just run like this reason is we
have the slider files but we are not initializing
237.84 -> it yet we have to point to a class to turn that
area into slider given that our html structure
245.84 -> is correct so we have our custom.js file this
is the file and here we will use document.ready
256.48 -> function
261.28 -> inside it we will use this class
this is the slider so slider
271.36 -> jquery slider dot slick now slick slider will be
initialized at area that has class named as slider
284 -> save
286.48 -> refresh and now we have got this slider
294.72 -> now it's initialized
301.52 -> now this slider will work this
is how we initialize a slider
305.28 -> almost all slider will need an initializer now
this initializer has got few settings as well
312.88 -> you can change how the slider should behave like
these are few settings it should be infinite
321.2 -> and these are key value pairs these value can be
string these can be numbers these can be true or
329.68 -> false so it should be indefinite true slides
to show one slides to scroll one and auto play
338.08 -> should be true auto play speed 5 seconds and dots
false and arrows true let's use arrows false and
354.16 -> dots true
358 -> save and let's use slides to
show two slides to scroll to
365.44 -> refresh now we have got two slides in it all
376.64 -> so this initializer is very
useful it comes with the settings
380.56 -> you can change these settings to change
slider according to your need so dots false
391.12 -> arrows true
397.12 -> refresh and now we have got slider with one slide
that is scrolling and we have got the arrows
405.84 -> and dots have been disappeared
410.4 -> now the slider is working this is how we
initialize a slider almost all sliders
416.72 -> will need an initializer like this this is
very important you have to initialize this
423.84 -> slider for some area in html okay let's
take example of flex slider now comment
435.12 -> and this will be commented as well
448.8 -> now we don't need this library now
453.52 -> also we don't need these two css files now
460.48 -> so files for slick slider have been commented now
we are using flex slider for flex slider we will
469.28 -> need its css file it is flex slider css minified
version then we will need its javascript file
483.92 -> jquery.flexslider js minified version we will
paste it after jquery because jquery is dependency
495.36 -> then it will need a specific structure like this
this is the main wrapper with glass flex slider
504.32 -> and it has got an unordered list inside it with
class slides inside this unordered list each
514.32 -> ally will turn into a single slide and here can
be our content whatever content we want to use
523.52 -> this is required by flex slider flag
slider needs this kind of structure save
532.32 -> like this one you see this this
is the structure that we will need
540.32 -> for html and for js this is its initializer if
we see our page there's nothing to show here
552.56 -> no errors no warnings we will have
to initialize this slider as well
561.44 -> so window on load
565.84 -> flex slider flex slider animation slide we
can change this class you know this is the
573.68 -> class and this is the initializer this is the
slider this is where slider is being initialized
581.12 -> and this is basically the class we can change
this class this flex slider let's use slider 2.
590.88 -> save and let's use slider 2 here
597.44 -> so flex slider is being initialized and
class with the name slider dash 2 and its
604.8 -> animation should be slide animation type should
be slide so refresh and here we have got it
622.64 -> so this slider is working but
there is some kind of styling issue
631.84 -> if we change back this class
640.96 -> flex slider then it is all right then it is it
has been initialized properly the reason being
650.4 -> this flex slider class is needed
655.36 -> now if i add another glass here i can
target this class in the initializer
667.68 -> refresh and now this slider is working so
you know this flex letter class is needed
677.52 -> there will be some styles in this flex slider
css file that will be specific to this class
685.76 -> flex slider so this is needed don't forget this
and then get another class initialize flex slider
693.2 -> at that class so the animation is slide
we can change it and use fade here
704.24 -> refresh now the effect is fade instead of slide
716.4 -> so initializer with the settings you
can skip the settings and it will follow
726 -> default configuration refresh it is working
738.16 -> and here you can specify
more settings for this slider
743.44 -> and also window on load you can
also use document dot ready here
753.44 -> save refresh and it is working but
762.64 -> if you
767.52 -> use window load like this refresh and slider
disappeared in console there is an error
779.68 -> right but flex slider recommended it like this you
see this window dot load but this will not work
795.12 -> for this may not work for latest jquery so
you'll have to use it like window on load
806.56 -> now it will work
810.64 -> or just simply use document
dot ready it will also work
824.24 -> right
826.88 -> so this is how you initialize a slider
you have to follow exact html structure
831.76 -> and point initializer to its class to make slider
work you will need css files for this slider
840 -> you will need javascript file for this slider
that you will keep after jquery then in your
849.36 -> custom script you will initialize that slider
inside document.ready you'll initialize the slider
857.6 -> and then you will you can define or you can place
your custom settings for this slider inside the
865.2 -> initializer this initializer is very important
also if a slider does not work make sure you
873.76 -> check the console for errors also make sure that
there is no conflict with other jquery plugins
881.28 -> and make sure that you are using
the right version for slider
885.04 -> and not older version make sure jquery version
is the version that is required by the slider
892.24 -> these are the things that you can
keep in mind to work with sliders
896.8 -> efficiently and without wasting time
and you can use multiple sliders as well
906.08 -> like this was initialized for a slick slider
this was initializer for flex slider and let's
916.4 -> uncomment this that was for slick slider and let's
uncomment this js file that was for slick slider
930.24 -> and then let's uncomment this html structure and
then let's place break between these two sliders
941.76 -> and then refresh this page and we have got two
sliders this is slick slider and this is flex
952.16 -> slider you can even have multiple flag sliders
or multiple slick sliders at the same page
963.84 -> that is also no problem
974.16 -> okay like share subscribe and i
will see you in the next video
Source: https://www.youtube.com/watch?v=12aPsN2Hsuw
