Content Slider | HTML, CSS & JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ธ.ค. 2024

ความคิดเห็น • 117

  • @mryoutuber3807
    @mryoutuber3807 6 ปีที่แล้ว +8

    Its Copied from codepen

    • @codegrid
      @codegrid  6 ปีที่แล้ว +27

      1. I started learning through the documentation, on their official website. And then I went through every code, snippets which came in front of my eyes. And I strongly believe that it's the best way to practice and learn. This is how you learn by practicing readymade code.
      2. There are tons of codes which are untouched because everyone not use codepen and such platforms. So, many times, if I think this kinda blog/snippet can help people learn as it helped me, I create video on it.
      3. Thanks for making so much fake IDs and following from the deep of your heart! This motivates me a lot.

    • @mryoutuber3807
      @mryoutuber3807 6 ปีที่แล้ว +2

      Hahaha... one day everyone will know your realty... I have a list of all your copied videos url with real one...keep it up You are a big fraud... who copy others...

    • @prerakhere
      @prerakhere 6 ปีที่แล้ว +3

      Mr TH-camr may you be blessed by some positive energy🙏

    • @codegrid
      @codegrid  6 ปีที่แล้ว +11

      @Mr TH-camr that's why I pin your comments so that everyone can see your hard work and can know how much people gonna hate. Keep grinding! My intentions are pure and tryna bring the useful content to people. Thank you so much for motivating me!

    • @tinkugupta1
      @tinkugupta1 6 ปีที่แล้ว +6

      @@codegrid you are doing graet job it doest matter where u find these content matter is that but really your contents are really best i am always waiting your videos and there are only two best you tubers which i know you and online tutorial who belongs to create such a awsm content on you tube

  • @phillreinhard9310
    @phillreinhard9310 6 ปีที่แล้ว +1

    this is what i've been looking for my whole life, like google can't even understand me, glad to subscribe man 👍not just this but every videos

  • @serj.danyliuk
    @serj.danyliuk 6 ปีที่แล้ว +1

    See you uploading the video - instant like!

  • @NicolasMasterChief
    @NicolasMasterChief 4 ปีที่แล้ว

    Great video man keep going like your content

  • @malebolo-cucarachon
    @malebolo-cucarachon 6 ปีที่แล้ว +3

    i think that u got a really good style for minimalism, i like that :) (ohh and my english is really bad sorry
    )

  • @reshmakhatun1862
    @reshmakhatun1862 5 ปีที่แล้ว +1

    Hats off sir...,🤠

  • @JoelAntwi
    @JoelAntwi 6 ปีที่แล้ว

    I've been thinking about creating a fashion based website entirely centred around this slider mechanic and greensock. thanks for the tut👍🏾

  • @RajeshKumar-uw9qi
    @RajeshKumar-uw9qi 6 ปีที่แล้ว

    Hi Dear great work and keep up a good work. i learnt most of JavaScript work from you. don`t listen such people. have a good day

  • @007nahian
    @007nahian 4 ปีที่แล้ว

    can you plz explain about the backgroundPosition mechanism here.?? i can not understand this animation part only.

  • @kylemacdonald1503
    @kylemacdonald1503 5 ปีที่แล้ว +1

    Hey awesome tutorial thanks so much! for some reason I am able to slide down to the second img/blog but from there I am stuck...I cannot slide up or down again. Any idea as to why this is happening?
    Thanks!

    • @alextheblockchaindev
      @alextheblockchaindev 5 ปีที่แล้ว +2

      Make sure your code is the same as his. He also has a source code link in the description. Also, open up the console and see if you have any errors. If so, tell me here and I will see what I can do to help you!

    • @kylemacdonald1503
      @kylemacdonald1503 5 ปีที่แล้ว

      Effective Code Academy awesome thanks! Will do!

  • @sebasliano
    @sebasliano 6 ปีที่แล้ว

    LOVE greensock

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      yea 🙌

  • @rajatprakash6474
    @rajatprakash6474 5 ปีที่แล้ว

    thank u so much buddy
    l learnt many things from u
    and thank u for your codes in description
    good job bro

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      Thanks mate

  • @StepanCCCC
    @StepanCCCC 6 ปีที่แล้ว +1

    What the hell, man, you're crazy! Another video and another amazing work! Keep going man. I really love your videos, anyway I got some notes to you.
    1.) What about your music used in videos, is it possible to get any tips for good music channels/interprets?
    2.) Could you please make a video like "preloader based on pageload", which would wait till the page is loaded? Anything like what you use on your personal website?
    3.) On you personal websites in section called "what I do" should be written "Graphic designing" instead of "Graphic desinging" - the difference is in ign -> ing
    Thank you! I am looking forward to new videos.

  • @이집사-j1r
    @이집사-j1r 4 ปีที่แล้ว

    땡큐~~~~~~~~~~~~♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡

  • @rajusam5
    @rajusam5 6 ปีที่แล้ว +1

    Awesome stuff

  • @Luckywynne
    @Luckywynne 6 ปีที่แล้ว +1

    How did you get the direct links for the Unsplash photos? :)

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      Open image in new tab and copy the url.

  • @geoffreylucas8829
    @geoffreylucas8829 4 ปีที่แล้ว

    So good man ! I would like to change the swipe from top/down to right / left ? Could you tell me how could I do it please ?

  • @synthaistudio
    @synthaistudio 6 ปีที่แล้ว

    Can you use typical scroll (the wheel) or is it required to press those arrows?

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      This code only works for arrow keys.

  • @ankitsingh7919
    @ankitsingh7919 6 ปีที่แล้ว

    one word ... cooooooooool....

  • @1basketeveryday
    @1basketeveryday 5 ปีที่แล้ว

    how did you create that video intro??

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      After effects

  • @pronayksarkar
    @pronayksarkar 6 ปีที่แล้ว

    Which Software Are You Using For Coding ? Plzz

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      Atom

    • @pronayksarkar
      @pronayksarkar 6 ปีที่แล้ว

      @@codegrid thanks a lot.
      I am beginner.

  • @marissasmith3065
    @marissasmith3065 5 ปีที่แล้ว

    if you click the arrows quickly it messes up the enitre animation

  • @kylemacdonald1503
    @kylemacdonald1503 5 ปีที่แล้ว

    This is awesome I love your work! Is it possible to make this compatible for mobile devices? Thanks!

  • @dobelem
    @dobelem 6 ปีที่แล้ว

    Wonderfull as usual. Can I ask you for something special? I have an slider with 3 sections and I couldnt yet find here or anywhere an slider that when refresh Page, It open the second section, I mean the middle section like a mobile app to scroll to the both sides. Only Fullpage I saw It has an 'active' class to do this functionality but is not open source and heavy... So. Thanks a lot for your time and awsome designs.

  • @nicolaszito4506
    @nicolaszito4506 6 ปีที่แล้ว

    is it responsive?

  • @emmanueleban1096
    @emmanueleban1096 5 ปีที่แล้ว

    How do I switch autoplay

  • @INKWEON7269
    @INKWEON7269 6 ปีที่แล้ว

    It's great video. thanks. I wonder how to switch pages with mouse scrolling???

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      This code might only works for click events. You better try to apply vanilla JS to call those functions.

  • @franciscososa91
    @franciscososa91 6 ปีที่แล้ว

    Pure beauty

  • @germainrodriguez5230
    @germainrodriguez5230 6 ปีที่แล้ว

    Where do you learn so of this from?

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      Read the reply of the first comment you see.

  • @bihireboris3407
    @bihireboris3407 6 ปีที่แล้ว

    the 123link not working for me is there anywhere else i can check the code

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      that link will work for you in the same way as it's working for others and I've checked it. It's working perfectly.

    • @bihireboris3407
      @bihireboris3407 6 ปีที่แล้ว

      @@codegrid it says"your link is almost ready" and after get stuck a 0 seconds and i really would like to use some of the code i mean if you dont mind

    • @bihireboris3407
      @bihireboris3407 6 ปีที่แล้ว

      @@codegrid any github link or codepen???! and dope content by the way

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      I've checked again and it's working bro! No issues. Here you go : www.dropbox.com/sh/y3e23y5f51fyxez/AAAxW7fD6VCVEfOd2NMNMBGTa?dl=0

    • @bihireboris3407
      @bihireboris3407 6 ปีที่แล้ว

      @@codegrid thx bro big love

  • @ravikumar444418
    @ravikumar444418 5 ปีที่แล้ว

    thanks

  • @_frankrocha
    @_frankrocha 6 ปีที่แล้ว +1

    what theme ??

    • @codegrid
      @codegrid  6 ปีที่แล้ว +1

      For UI - Atom material,
      Syntax - Neutron

  • @pvincentrod1175
    @pvincentrod1175 5 ปีที่แล้ว

    Hello! First of all, this is just simply awesome! There is nobody on youtube platform who can design web apps batter then you! Slider is really nice, but I noticed that this one is not responsive, how would you recommend make it responsive so on 760px it would show up as picture on the top and all other content with text below? Thank you for your time!

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      You gotta play around with the media queries.

    • @pvincentrod1175
      @pvincentrod1175 5 ปีที่แล้ว

      Codegrid That’s what I was thinking about, but I think it could break animation itself(

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      Try it.

  • @evakuator8118
    @evakuator8118 6 ปีที่แล้ว +1

    That's some quality shit. Man, you're great. Also, could you please tell what theme you are using in your editor?

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      thank you so much bro!

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      For UI - Atom material,
      Syntax - Neutron

  • @ivango1182
    @ivango1182 6 ปีที่แล้ว

    I don’t understand these codes what should I do?

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      See the basics of greensock.

  • @razitutorial257
    @razitutorial257 6 ปีที่แล้ว

    Amazing

  • @vinzer72frie
    @vinzer72frie 5 ปีที่แล้ว

    *if(slideIn.length !== 0)* did not work for me if anyone else has this problem change it for *if(index != -1)* on both goToNextSlide and goToPrevSlide this prevents the slides from going out of boundaries if you're either at top or bottom

  • @yueliu5502
    @yueliu5502 5 ปีที่แล้ว

    The design is so good! Could you update your source code link because I think there are many people request for downloading and it turns down, I will be appreciated!

    • @codegrid
      @codegrid  5 ปีที่แล้ว +1

      123link.vip/LYDoHkKj

  • @CuongNguyen-yx5jp
    @CuongNguyen-yx5jp 6 ปีที่แล้ว

    Can I contribute my some simple effects (Front End Dev) for your channel? Thanks for reading. Have nice day :D

  • @vinzer72frie
    @vinzer72frie 5 ปีที่แล้ว

    Hello Codegrid as always great stuff I love your design, I have an observation though I have noticed that you do not clean cache before recording you probably test and then record so properties might keep values, this is pretty confusing because if you code as video follows there's different outcomes I suggest that you open an incognito window before recording

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      I don't think this should be the case. I always check source code before sharing it if it works properly or not. You can see it as reference what I have done in the video. Anyway, thanks for the suggestion! I'll keep that in my mind. 🙌

  • @gauravmaurya8745
    @gauravmaurya8745 6 ปีที่แล้ว +1

    We want pricing table design

  • @jhonatanrodriguez6341
    @jhonatanrodriguez6341 6 ปีที่แล้ว +1

    Nice

  • @saileshpatra2488
    @saileshpatra2488 6 ปีที่แล้ว

    Awesome content as always.Why don't you provide these projects all together in a github account.

    • @codegrid
      @codegrid  6 ปีที่แล้ว +1

      I've got a github account but I don't use it that much. Currently I'm using dropbox. You can find source code files in the description of each video. Thanks!

    • @saileshpatra2488
      @saileshpatra2488 6 ปีที่แล้ว

      @@codegrid no issues bro. Keep the good work up. Thank you

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      🙌

    • @parmodkumar2999
      @parmodkumar2999 6 ปีที่แล้ว

      He is nothing just a copy paste youtube channel

    • @saileshpatra2488
      @saileshpatra2488 6 ปีที่แล้ว +1

      @@parmodkumar2999 I don't care. I'm benefited from his content. Stop spreading bullshit.

  • @dogistyle89
    @dogistyle89 5 ปีที่แล้ว

    Dude I love your work, can you plz provide a working link for the source code?

    • @codegrid
      @codegrid  5 ปีที่แล้ว +1

      123link.vip/LYDoHkKj

    • @dogistyle89
      @dogistyle89 5 ปีที่แล้ว

      thank you :)

  • @ajefersonstiv
    @ajefersonstiv 6 ปีที่แล้ว

    And how to make it responsive?

    • @codegrid
      @codegrid  6 ปีที่แล้ว +1

      You have to add some media queries and change positions, heights and widths of certain divs! This video is about the concept only.

    • @ajefersonstiv
      @ajefersonstiv 6 ปีที่แล้ว

      @@codegrid thanks

    • @wibblefish1155
      @wibblefish1155 6 ปีที่แล้ว +1

      If you're still wondering how to make it responsive, this code worked for me:
      @media screen and (max-width: 600px) {
      .card {
      flex-direction: column;
      }
      .card-img, .card-content {
      width: 100%;
      height: 50%;
      }
      }
      However this seems to cause the arrow styles to glitch out

  • @parmodkumar2999
    @parmodkumar2999 6 ปีที่แล้ว +3

    Online tutorial ne codepen link diya hai iska jaha se tune ye copy kiya hai... Dekh le ja kr

    • @codegrid
      @codegrid  6 ปีที่แล้ว +1

      I appreciate your hard work! Keep doing.

    • @mrigankabora4835
      @mrigankabora4835 5 ปีที่แล้ว

      @@codegrid
      he is saying that you have copied from codepan

  • @AllenMarsam
    @AllenMarsam 6 ปีที่แล้ว

    great

    • @codegrid
      @codegrid  6 ปีที่แล้ว +1

      thanks bro!

  • @DungNguyen-eg7ss
    @DungNguyen-eg7ss 6 ปีที่แล้ว

    Oh year... Oh year heeeee oh year @@ nice

  • @atanudas3333
    @atanudas3333 5 ปีที่แล้ว +1

    sir not working

  • @tinkugupta1
    @tinkugupta1 6 ปีที่แล้ว +1

    this is same as online tutorial @onlinetutorial

    • @codegrid
      @codegrid  6 ปีที่แล้ว

      Take your time and check out the upload time.

  • @xrt-un6hx
    @xrt-un6hx 6 ปีที่แล้ว +1

    n!Ce

  • @code184
    @code184 6 ปีที่แล้ว

    Как же охуенно

  • @HisSonsMusic
    @HisSonsMusic 5 ปีที่แล้ว

    You copied ihatetomatoes exact code come on bro

    • @codegrid
      @codegrid  5 ปีที่แล้ว

      Read comments