Responsive Image Slider With Auto-sliding And Full Controls | HTML,CSS & Pure JavaScript

Поділитися
Вставка
  • Опубліковано 18 гру 2024

КОМЕНТАРІ • 66

  • @mhhamzaedits
    @mhhamzaedits Рік тому +4

    your tutorial is not a five star.
    This is a Seven Star.🌟
    Thank You Bro.

  • @rhymekidstv
    @rhymekidstv Рік тому +4

    Wow! The best so far on youtube. Straightforward and informative. Thank you. Subscribed 👍

  • @sumitbappy2447
    @sumitbappy2447 22 дні тому

    You are legend bro... I had watch too many videos in earler. By comparism your video is most easier and comfortable for me... love you bro

    • @five-startutorials7530
      @five-startutorials7530  21 день тому

      @@sumitbappy2447 thank you so much bro.
      I am very happy this tutorial helped you

  • @discreet4551
    @discreet4551 Рік тому +4

    Your code for carousel is the simplest I've seen. Thank you.

  • @knowmore7852
    @knowmore7852 Рік тому +2

    keep uploading this types of project ....

  • @daw4680
    @daw4680 4 місяці тому +1

    Fantastic tutorial! Just what I was looking for

    • @five-startutorials7530
      @five-startutorials7530  4 місяці тому

      @@daw4680 I am glad it helped you.
      Also watch multi image slider tutorial.

  • @codewithdahir
    @codewithdahir 7 місяців тому

    hands down bro, I am so grateful how you presenting us your pure knowledge about programming in js

  • @msrinu1579
    @msrinu1579 5 місяців тому

    this video just wow.....
    The best step by step explanation and tq bro

  • @amigautier
    @amigautier 10 місяців тому

    Wow! The best tutorial. Thank you so much.

  • @printshop7481
    @printshop7481 19 днів тому

    SUPERB VERY HELPFUL

  • @ItzsufeeCodex-nb8ug
    @ItzsufeeCodex-nb8ug Рік тому +1

    What a good tutorial tnx

  • @khansawidhani9899
    @khansawidhani9899 Рік тому +1

    this is what I was really needed. Thanks 👍

  • @jimtacujan3272
    @jimtacujan3272 6 місяців тому +3

    thanks for the tutorial, but there is an white screen after each end of the slider, the if-else statement is actually way too late recalled the value of counter(variable) and the animation would be called even if the variable has already been incremented nor decremented. please put an additional IF after the immediate ++, and before the immediate --(minus).

  • @mcroman-superfeat
    @mcroman-superfeat Рік тому +1

    Also very LOGISTIC to put in photo links... NO mess here 4 SURE ! ::: ;) Clean HTML and .css and .js Design ...

  • @chamodhimasha4549
    @chamodhimasha4549 2 місяці тому

    Thank you so much brother

  • @sayidsayid8488
    @sayidsayid8488 11 місяців тому

    many many thanks for the source file

  • @Kiriannaone
    @Kiriannaone 10 днів тому

    Your codes really helped me!
    But what should I do to have 5 image slider containers?

    • @five-startutorials7530
      @five-startutorials7530  10 днів тому +1

      I have create this tutorial long before.
      I have create another tutorial on image slider which is much simpler and effective, you won't have any problems, so please refer to that tutorial.

    • @Kiriannaone
      @Kiriannaone 10 днів тому

      @@five-startutorials7530 Got it! Thank You!

  • @cheurfiabdelhakim2631
    @cheurfiabdelhakim2631 2 місяці тому

    Thanks bro .. 🎉

  • @khansawidhani9899
    @khansawidhani9899 Рік тому

    Subscribed!!! ❤

  • @dr.dilwarislammazumder138
    @dr.dilwarislammazumder138 4 місяці тому

    Hi sir, Thanks for your excellent video. I will be grateful if you can make video on how to make multiple auto sliders on the same page. I have written the code. it is not sliding independently. I mean it is sliding sequentially first set of slides then the second set of slides. I want both sets should slide parallelly independently.

    • @five-startutorials7530
      @five-startutorials7530  4 місяці тому

      I already have a tutorial on multiple images slider, you can find the tutorial in the recent tutorials of our UA-cam channel.
      I hope it will fulfill your requirements.

  • @hugocangi6214
    @hugocangi6214 4 місяці тому

    buenisimo gracias

  • @elias.r17
    @elias.r17 Рік тому +1

    Hello brother, I did everything and everything works great, thank you, but there is a problem that when I get to the last picture, it does not return to the first picture, the background appears empty, and after 6 seconds the first background appears, what should I do please

    • @five-startutorials7530
      @five-startutorials7530  Рік тому

      I uploaded the source code bro, now you can download the source code from the video description.

  • @heckencubana8357
    @heckencubana8357 7 місяців тому

    please help!
    first of all, thank you very much for the video and even the download of the file. that is almost exactly what I have been looking for for a long time.
    However, I have a small problem:
    it is only partially "responsive". if the page is made smaller, it reduces the "width", but unfortunately not the "height" as a percentage. This makes the image narrower in the view and you only see part of the image.
    how can I change the file in the CSS part so that the whole image is reduced proportionally in "width and height" at the same time?
    thank you very much for your help.
    greetings Matthias

    • @five-startutorials7530
      @five-startutorials7530  7 місяців тому

      I am glad it helped you.
      To adjust the width and height, there are many ways through which you can do it, but I prefer to use 'media query':
      At the bottom of the CSS code, write:
      @media(max-width: 600px){
      .slide-container{
      width: 500px;
      height: 300px;
      }
      }
      /* Note: you can vary the width of the media queries and use different width and height for the slide-container according to your need.
      Also add padding to the left and right of the body element to look better:
      Exp:
      body{
      padding: 0px 8%;
      }
      I HOPE THIS SOLUTION WILL HELP YOU!

  • @AfriEye
    @AfriEye 2 роки тому +1

    Thanks bro. But, can you pls show how to duplicate and place slider side by side

  • @pivardonesta4678
    @pivardonesta4678 11 місяців тому

    It's a bit hard for me when I try to found my issue, they are many img on my file so that makes the query select image gone wrong, but I fixed it. However I've been success. Thanks a lot

  • @printshop7481
    @printshop7481 19 днів тому

    HAV U MADE ANY VIDEO (CLIENT NUMBER, RATING ) COUNT ON SCROLL

  • @cgianimationtv1828
    @cgianimationtv1828 Рік тому +1

    Can you code Prev and Next for post layout, not numeric pagination

  • @myty5563
    @myty5563 8 місяців тому

    doesnt work, i need it for images of products but the images doesnt seem to change
    :/

    • @five-startutorials7530
      @five-startutorials7530  8 місяців тому

      I don't know what problem you are facing, check the format of your images.
      Also I have given you the source code in the video description, you can download it.
      For your product images you may need a multiple images slider, and I am going to upload a new video tutorial soon, may be tomorrow.
      I hope it will help you, so stay tuned.

  • @NedumEze
    @NedumEze 2 роки тому +1

    Great Bro.
    Shame, you didn't make this code available for download. Please reconsider.

  • @alihamza9575
    @alihamza9575 11 місяців тому

    bhai my javascipt was not workon prev help me

  • @imaneimane1806
    @imaneimane1806 Рік тому +1

    can you give me file this is project

  • @syediqbalahmed3176
    @syediqbalahmed3176 2 роки тому +1

    💩 *_valoo ... uku ... may deham poray ..._* ☠

  • @UnscriptedPriTri
    @UnscriptedPriTri Рік тому +1

    It is not responsive.
    🥲

  • @imaneimane1806
    @imaneimane1806 Рік тому +2

    can you give me file this is project