slick slider | slick slider tutorial

00:14:17
https://www.youtube.com/watch?v=Xhve9Cpaw1s

摘要

TLDRNeste vídeo, explícase como crear un deslizante HTML usando a biblioteca Slick Slider, que axuda a crear deslizantes efectivos e responsivos. O vídeo guía sobre a incorporación de enlaces CSS e JS necesarios, menciona a importancia das imaxes de igual tamaño para evitar problemas visuais e detalla os pasos para establecer unha páxina HTML básica que inclúe un deslizante de varias imaxes. Tamén se aborda a integración do archivo de jQuery esencial para o funcionamento de Slick Slider, e suxire formas de personalización do deslizante, como modificar as frechas de navegación e o espaciado entre imaxes. Así mesmo, ofrece consellos para activar o deslizante só en dispositivos móbiles.

心得

  • 📚 Aprende a usar a biblioteca Slick Slider.
  • 🖼️ As imaxes deben ter a mesma dimensión.
  • 👨‍💻 Inclúe CSS para estilización e JS para funcionalidades.
  • 🛠️ Personaliza deslizantes con estilos propios.
  • 📱 Adaptación para distintos dispositivos.
  • 🔍 Asegúrate de que jQuery está ben engadido.
  • 🎯 Útil para páxinas con múltiples deslizantes.
  • 🌐 Consulta exemplos no sitio de Slick Slider.
  • 🔄 Deslizamento infinito é posible.
  • 📝 Modifica estruturas HTML para mellor integración.

时间轴

  • 00:00:00 - 00:05:00

    Neste vídeo, discútese como crear un desprazador HTML utilizando a biblioteca de código aberto llamada Slick Slider. A biblioteca permite crear desprazadores múltiples nunha mesma páxina web, garantindo que sexan responsivos e non se descompongan nos puntos de interrupción. O vídeo proporciona instrucións sobre como engadir ligazóns CSS e JS necesarias, configurar imaxes para o desprazador e iniciar un proxecto básico de demostración con varios exemplos visuais.

  • 00:05:00 - 00:14:17

    Unha vez configurado o proxecto básico, o vídeo demostra como implementar o arquivo min.js copiado, asegurarse de que jQuery estea cargado correctamente e utilizar un exemplo de código para inicializar o desprazador con imaxes. Explícase o funcionamento do mostrador de diapositivas e os seus parámetros básicos, incluído como personalizar botóns e espazos de flechas. No remate, ofrece consellos sobre como integrar o Slick Slider máis eficazmente en varios dispositivos, destacando capacidades como a activación de desprazadores en base á anchura da ventá do navegador.

思维导图

Mind Map

常见问题

  • Que é un Slick Slider?

    Slick Slider é unha biblioteca que permite crear deslizantes dentro de páxinas HTML e é coñecida por ser responsiva.

  • Cales son os ficheiros necesarios para implementar un Slick Slider?

    Necesítanse un ficheiro CSS para a estilización e un ficheiro JS para as funcións necesarias do Slider.

  • Por que é importante que as imaxes teñan a mesma dimensión?

    É importante para asegurar que o deslizante non amose problemas de deseño, como imaxes movéndose cara arriba ou abaixo.

  • Cal é a función do contedor `container` en HTML?

    O contedor `container` úsase para manter un tamaño e altura específicos para a páxina web, axudando na organización do contido.

  • Cal é a importancia de jQuery na implementación dun Slick Slider?

    jQuery é necesario para que Slick Slider funcione correctamente, xa que esta depende dalgunhas funcións desta biblioteca.

  • Pódese personalizar o Slick Slider?

    Si, pódese personalizar, engadindo estilos, modificando frechas de navegación e espazos entre imaxes.

查看更多视频摘要

即时访问由人工智能支持的免费 YouTube 视频摘要！
字幕
en
自动滚动:
  • 00:00:00
    in this video let's discuss about how we
  • 00:00:03
    can create a HTML slider uh in this
  • 00:00:06
    video we will be discussing about the
  • 00:00:07
    how we can Implement a slick slider so
  • 00:00:10
    slick starter is a library
  • 00:00:12
    which is useful for creating the sliding
  • 00:00:15
    inside the any HTML page
  • 00:00:19
    okay now uh you can have the overview of
  • 00:00:23
    that particular
  • 00:00:26
    liability over here with a can wheeler
  • 00:00:29
    GitHub github.io.c
  • 00:00:31
    this is a library that we are going to
  • 00:00:33
    use this is useful for creating the
  • 00:00:34
    multiple sliders inside the same page
  • 00:00:36
    and also helpful for the responsive
  • 00:00:39
    responsiveness as because these sliders
  • 00:00:41
    never break down on the any break point
  • 00:00:43
    on the HTML page to say now uh to
  • 00:00:47
    demonstrate all these things uh there is
  • 00:00:49
    this demos as well so what we will be
  • 00:00:52
    doing is like we will be going through
  • 00:00:53
    you know one or two demos from here and
  • 00:00:56
    we'll see how we can adjust and how we
  • 00:00:58
    can put them in the you can put them
  • 00:01:00
    into it together to make the website
  • 00:01:03
    very much
  • 00:01:05
    look beautiful okay so to get started
  • 00:01:10
    we will have to go here here it is the
  • 00:01:13
    you can see there are two links one is
  • 00:01:15
    the CSS link and one is the JS link CSS
  • 00:01:17
    CSS link is useful for you know styling
  • 00:01:20
    the whole this HTML slider
  • 00:01:22
    and JavaScript uh file is necessary for
  • 00:01:25
    you know like having the all the
  • 00:01:27
    necessary uh functions which are useful
  • 00:01:32
    for making this Library uh slight slider
  • 00:01:36
    basically
  • 00:01:37
    so let's have first of all we will uh we
  • 00:01:40
    will clear creating a uh one folder
  • 00:01:43
    where we will be storing our all the
  • 00:01:44
    project so I created one product called
  • 00:01:46
    slatter demo here I'm uh having these
  • 00:01:49
    four Images this is these four Images I
  • 00:01:51
    created from the photopia it's an online
  • 00:01:54
    tool for uh like a Photoshop where you
  • 00:01:57
    can create a
  • 00:01:59
    uh create edit the images basically so
  • 00:02:03
    and also I'm I make sure that this image
  • 00:02:06
    Dimension is the same with the for all
  • 00:02:09
    of the all the four Images are the same
  • 00:02:11
    of the same size the reason for this one
  • 00:02:13
    is like if you have the different width
  • 00:02:16
    and height images for the slider it will
  • 00:02:18
    not work why it will not work because it
  • 00:02:20
    will be showing up and down uh we can
  • 00:02:22
    have the look on that one as well in the
  • 00:02:24
    demo itself so then let's have the uh
  • 00:02:29
    demo start get started so I will be
  • 00:02:30
    creating home.html file here
  • 00:02:33
    okay now I will be heading towards the
  • 00:02:36
    like our basic bootstrap
  • 00:02:41
    fine
  • 00:02:43
    so I will as
  • 00:02:45
    I will be taking the basic template from
  • 00:02:47
    here startup template
  • 00:02:49
    and just copy this thing here I will
  • 00:02:51
    save it automatics hit save so now I
  • 00:02:54
    will be adding these two links I first
  • 00:02:55
    place this one
  • 00:02:57
    uh this will go below the bootstrap CSS
  • 00:03:00
    and the second one is this one's this
  • 00:03:01
    CSS this will go below the bundle of GS
  • 00:03:06
    right
  • 00:03:08
    oh I will be keeping it here so what I
  • 00:03:11
    will do is I will just make sure that
  • 00:03:12
    this slash structure will get removed to
  • 00:03:14
    https
  • 00:03:17
    slash
  • 00:03:19
    and also this slash slash
  • 00:03:22
    with this one uh okay now this looks
  • 00:03:27
    okay fine so I will be now having a
  • 00:03:30
    container and just created
  • 00:03:34
    container here
  • 00:03:36
    container is useful for you know holding
  • 00:03:39
    the
  • 00:03:40
    due to maxite or having the particular
  • 00:03:42
    width and height for our website that
  • 00:03:45
    will be very much helpful
  • 00:03:47
    so now okay
  • 00:03:50
    created this so I will be creating one
  • 00:03:53
    View
  • 00:03:54
    this is shortcut for the HTML because my
  • 00:03:57
    um slider or you can say
  • 00:04:01
    image demo
  • 00:04:04
    slider
  • 00:04:08
    right so in this one there will be
  • 00:04:10
    multiple images we will be showing so I
  • 00:04:13
    will create one ramper
  • 00:04:16
    image
  • 00:04:21
    like this and now I will be putting the
  • 00:04:24
    image here yes I see
  • 00:04:27
    slash cost
  • 00:04:30
    in class as a
  • 00:04:34
    image flowing image Pro is only making
  • 00:04:38
    sure that the image is making the whole
  • 00:04:39
    bit of the website
  • 00:04:42
    and height is auto holds so I made up
  • 00:04:45
    there are four Images so I'll make you
  • 00:04:47
    can support two
  • 00:04:50
    team
  • 00:04:53
    okay I'm just skipping at the name of
  • 00:04:56
    the image demo
  • 00:05:00
    fine so we have the page ready let's go
  • 00:05:03
    to our folder and open this inside
  • 00:05:06
    rather than here
  • 00:05:09
    other than here let's open it into
  • 00:05:12
    Chrome
  • 00:05:15
    see we have these four images to say
  • 00:05:19
    see these four Images are looks okay but
  • 00:05:22
    those are built one minute right so to
  • 00:05:24
    make the slider uh more effective what I
  • 00:05:27
    will do is first of all I will have to
  • 00:05:28
    create a window JS where I've been
  • 00:05:30
    putting the sliders code let's customize
  • 00:05:32
    code so I will creating the mid.js I
  • 00:05:34
    will just import that one here
  • 00:05:37
    uh like below the screen
  • 00:05:42
    Source Dot
  • 00:05:44
    minuteches
  • 00:05:46
    we can put the type
  • 00:05:51
    so I will refresh this side and speak I
  • 00:05:55
    will make sure that all the files are
  • 00:05:56
    here
  • 00:05:58
    okay jQuery is not defined fine so I
  • 00:06:02
    will we will have to download the jQuery
  • 00:06:08
    and I'm just going here
  • 00:06:10
    to this website this is the main website
  • 00:06:13
    for checkmate
  • 00:06:14
    [Music]
  • 00:06:15
    um
  • 00:06:31
    minified I will be keeping the minified
  • 00:06:33
    jQuery and I will just I will just
  • 00:06:35
    create a file which is really
  • 00:06:39
    those
  • 00:06:42
    let me just copy this name that will be
  • 00:06:45
    much more easy
  • 00:06:46
    you can name this copy paste
  • 00:06:49
    I'll copy paste this
  • 00:06:53
    so to have again we will have to add
  • 00:06:57
    that check with here
  • 00:07:03
    name of the file will be JPM
  • 00:07:07
    so I'll just refresh now
  • 00:07:15
    ah okay sleep call me not this okay okay
  • 00:07:19
    I will tell me I will make sure that the
  • 00:07:21
    jQuery is on the top of the uh all the
  • 00:07:23
    uh files there so see this error has
  • 00:07:27
    been gone so now I will just go to the
  • 00:07:30
    basic demo of this one like image or
  • 00:07:32
    Sleek I will just add this one
  • 00:07:35
    let's see how this will help us
  • 00:07:38
    keeping his name is copy paste it now
  • 00:07:42
    remember why I am taking this wrapper
  • 00:07:44
    only and not that this individual image
  • 00:07:46
    to make this link right so this uh
  • 00:07:50
    Whenever there is a slick slider we need
  • 00:07:52
    to make sure that the child or images or
  • 00:07:55
    child wrapper
  • 00:07:57
    on the image gets linked not the parent
  • 00:08:00
    one right so remember
  • 00:08:02
    here you can see the parent one is like
  • 00:08:05
    this one immediate parallel not the
  • 00:08:08
    parent Bank we need to make sure that
  • 00:08:10
    the parent of children is slit and we
  • 00:08:14
    need to initialize on that so I will be
  • 00:08:16
    only taking this one not the container
  • 00:08:19
    and passing the class name here like
  • 00:08:22
    this
  • 00:08:23
    now it should be good to go now see
  • 00:08:27
    Aaron has been gone the elements are in
  • 00:08:30
    the elements you can see now
  • 00:08:32
    here is our HTML see now the Slicks
  • 00:08:35
    initialize six six slider is been
  • 00:08:37
    initializing also the buttons has been
  • 00:08:40
    already been created by default by the
  • 00:08:42
    slick and then now you can see slick
  • 00:08:45
    drag it up draggable stick drag and now
  • 00:08:47
    you can see each and every image has
  • 00:08:49
    been slicked
  • 00:08:50
    let's see
  • 00:08:51
    slip clone uh we can discuss that one as
  • 00:08:54
    well uh these are the one two three
  • 00:08:57
    these are the four Images basically
  • 00:08:59
    which are the VR we have provided now
  • 00:09:02
    slick clone you can see here are the
  • 00:09:04
    replications or the duplication of the
  • 00:09:06
    same image there are four
  • 00:09:09
    five and six five five images has been
  • 00:09:12
    uh Chrome yeah so these are for this
  • 00:09:15
    this will go now if I click on previous
  • 00:09:18
    display slick like previous one going
  • 00:09:20
    backward
  • 00:09:23
    now this is infinite you can go backward
  • 00:09:26
    as as many times as you want right and
  • 00:09:30
    also the next one you can go as many
  • 00:09:32
    times as you need as you want
  • 00:09:36
    okay now uh let's make a more beautiful
  • 00:09:40
    now what I will do is I will just copy
  • 00:09:43
    this one
  • 00:09:44
    uh okay rather than copy I'm just
  • 00:09:48
    copying this one and what I will do I
  • 00:09:51
    will just pass on the
  • 00:09:53
    parameters
  • 00:09:54
    like this
  • 00:09:57
    let me format this code is little bit
  • 00:10:01
    okay
  • 00:10:02
    now you can see
  • 00:10:05
    uh what I'm doing I'm just keeping the
  • 00:10:08
    infinite through true like uh the Slick
  • 00:10:11
    loan will be there slide to show how
  • 00:10:13
    many slides I want to show if I keep
  • 00:10:15
    this three let's see what happened and
  • 00:10:17
    let's see if the slide score is
  • 00:10:19
    uh I'm just refreshing see now there are
  • 00:10:22
    three images showing in the same row if
  • 00:10:26
    I click on next only all the three will
  • 00:10:29
    be like
  • 00:10:31
    only one why it is only one here because
  • 00:10:34
    there is only one images which is the
  • 00:10:36
    actual image
  • 00:10:37
    so it's only getting Scroll once
  • 00:10:42
    like this one
  • 00:10:44
    this is the basic demo you can go with
  • 00:10:46
    now customizing this uh previous and the
  • 00:10:49
    next button is easy what we need to do
  • 00:10:51
    is like uh
  • 00:10:58
    um okay so what we need to do is just go
  • 00:11:01
    inspect the element
  • 00:11:03
    this inspect this element see now you
  • 00:11:06
    can see there is a thicknessed slick
  • 00:11:08
    arrow and there is this
  • 00:11:22
    you can enter all the CSS whatever you
  • 00:11:24
    wanted to have like background image you
  • 00:11:26
    can add also
  • 00:11:29
    there's a water pasty water like if I'm
  • 00:11:33
    passing the URL
  • 00:11:38
    compare this one for I'm just taking
  • 00:11:40
    this for example to show you you can
  • 00:11:43
    also
  • 00:11:44
    see current sources this one so what I
  • 00:11:47
    will do is I will just make sure that
  • 00:11:49
    this is clean yeah
  • 00:11:53
    see now that images has been here so you
  • 00:11:55
    can customize the all the arrows like
  • 00:11:58
    you wanted to have like here as well so
  • 00:12:01
    it's completely on the person and the
  • 00:12:03
    design you will be getting from the big
  • 00:12:05
    person
  • 00:12:06
    right so now uh you may want to add some
  • 00:12:09
    spacing around so other videos I was
  • 00:12:12
    just adding padding apx so now see this
  • 00:12:15
    has been added parameter padding so it's
  • 00:12:19
    wrapper
  • 00:12:21
    it is
  • 00:12:24
    what I will do is I will just uh
  • 00:12:33
    and I will just copy this one
  • 00:12:44
    now you have the spacing around here as
  • 00:12:47
    well now you can see the spacing also in
  • 00:12:49
    the right hand left hand side as well so
  • 00:12:51
    this also needs to be taken care of
  • 00:12:54
    this is a basic demo I wanted to show on
  • 00:12:57
    how quickly you can integrate this like
  • 00:12:59
    slider inside here now it doesn't matter
  • 00:13:01
    now uh where the images coming from like
  • 00:13:04
    this path Source path is coming from you
  • 00:13:07
    just need to make sure that you are
  • 00:13:08
    slicking those parent not the children's
  • 00:13:10
    and parent takes the image parent of the
  • 00:13:14
    children's like this one
  • 00:13:17
    that's it that's it for this demo and
  • 00:13:20
    you can also have the look on this Lake
  • 00:13:23
    slider
  • 00:13:24
    here as well there are multiple things
  • 00:13:27
    has been shown like this one this is
  • 00:13:28
    heading up
  • 00:13:30
    this can be also been added
  • 00:13:34
    okay and also you can also unselect for
  • 00:13:37
    particular that point as well this on
  • 00:13:39
    slick will be helpful for you friends uh
  • 00:13:41
    let's consider you wanted to have a
  • 00:13:44
    mobile in a select slider in the mobile
  • 00:13:46
    but do not in the desktop this may
  • 00:13:50
    happen to you so what you can do is like
  • 00:13:52
    you can keep the on sleek
  • 00:13:54
    and on the width of the particular on
  • 00:13:57
    viewport you can make this slider enable
  • 00:14:02
    this can be also been done
  • 00:14:05
    so this is just a little bit information
  • 00:14:07
    about how we can integrate this
  • 00:14:10
    slick title
  • 00:14:13
    thanks for watching see you in the next
  • 00:14:15
    one
标签
  • HTML
  • Slick Slider
  • biblioteca
  • deslizante
  • jQuery
  • CSS
  • JavaScript
  • responsividade