• Sunday , 5 April 2020

Bootstrap tutorial 21 – Carousel (Slideshow)

Code Canyon
https://i.ytimg.com/vi/1FnMDubA25A/hqdefault.jpg



In this tutorial I show you how to create a ‘carousel’ or a ‘slider’ in bootstrap. You also get to see some juicy looking fruit.

Sponsored by DevMountain. Get yourself career ready, check out their website: http://goo.gl/enNbQV

Useful links:
———————————–
Don’t forget to subscribe:
www.youtube.com/QuentinWatt

Follow me on Twitter:
www.twitter.com/QuentinWatt

Follow me on Facebook:
www.facebook.com/quentin.watt

Feel free to donate:
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CH68DBULMJ37N
————————————

Original source

3d Ocean

Related Posts

50 Comments

  1. Zink Jiv
    March 9, 2018 at 10:10

    Wow man , you explain so nicely… thanks

  2. Indhumathi Vinod
    March 9, 2018 at 10:10

    My pictures are stacked and the navigation is not working.I have imported the jquery from bootstrap.can anyone help me where I am going wrong?

  3. Zielona Mrówka
    March 9, 2018 at 10:10

    Oh my god.. after half of an hour I finally solved a problem with carousel not sliding.

    Because of navbar copy pasted from bootsrap (as it is told in one of the tutorials) I had to change version of bootsrap to the newest (4.0.0 <because the codes differed>), by which I mean upgrading the links for css, js, jquerry (+popper). But I couldn't found js for the newest version on Bootstrap download page and it stayed old. After a minutes of searching I finally found js on one of the pages on Bootstrap (why did they not put it in downloads? oO), and here it is: https://getbootstrap.com/docs/4.0/getting-started/introduction/

    So the last three lines before </body> tag were like this:
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    And the meta in <head> section looks like this:
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    Note also that in the newest version require you to change <div class"item"> to <div class="carousel-item">

  4. Hannah Cohen
    March 9, 2018 at 10:10

    Is there a way for the slider to hide under the nav bar when scrolling down on the website?

  5. Ceda Miskovic
    March 9, 2018 at 10:10

    if you set container-fluid instead of container it wont stretch to edges of browser, at least not to me. I just code it without container/container-fluid and without any rows and columns, just code for carousel

  6. Heba Gamal
    March 9, 2018 at 10:10

    Great tutorial, Thank you

  7. Evan Ricard
    March 9, 2018 at 10:10

    Does the image have to be a specific size for the carousel to work?

  8. Maria-Alexandra
    March 9, 2018 at 10:10

    and for who's curious, I resized to the same size the pictures in paint -> resize button

  9. Maria-Alexandra
    March 9, 2018 at 10:10

    amazing! i did it 😀 . Thank yoooooooou ! <3

  10. tough guy
    March 9, 2018 at 10:10

    can we change next and previous arrow color??

  11. franck herve kehi
    March 9, 2018 at 10:10

    please can i have your css file?

  12. Joel Monteiro
    March 9, 2018 at 10:10

    Great tutorial! Thank you very much! For some reason, the carousel goes missing on smartphones. Do you know how to fix this?

  13. Coding Successfully
    March 9, 2018 at 10:10

    Very good tutorial, thank you very much bro

  14. dat nguyễn
    March 9, 2018 at 10:10

    what if two pictures on one slide

  15. NEUB
    March 9, 2018 at 10:10

    So how do you make it span all the way to the side?

  16. Thắng Lương
    March 9, 2018 at 10:10

    sorry. I want to ask a question not related to video. what kind of fruit in your country is the name, how much it costs?

  17. Sabrina Anne
    March 9, 2018 at 10:10

    thanks!!

  18. Aquilalias
    March 9, 2018 at 10:10

    Doesn't work the same with Bootstrap 4 anymore; had my head against the wall finding the issue.

  19. himanshu sharma
    March 9, 2018 at 10:10

    Hey ! #Watt I just want to know how can i increase the size of carousel i am using width and height but not affecting to slider and ya thanks for Awesome tutorial

  20. Ali Najdi
    March 9, 2018 at 10:10

    My images wont change 🙁 do I need bootsrap 4 or is 3 ok?

  21. arunima banerjee
    March 9, 2018 at 10:10

    My carousel is not working . The pictures are stacked . I have them of the same size and no indication buttons and dots are showing . I have written the same code .

  22. Gautam Bhattacharya
    March 9, 2018 at 10:10

    Please please tell about the resolution of images, in my carousel the container changing size according to different images size. I tried many things but fail to do so. Please help!

  23. MikMakSky
    March 9, 2018 at 10:10

    Can someone please tell me how to get the slider to the full width of the webpage, thanks.

  24. Mirage 2000
    March 9, 2018 at 10:10

    How can center carousel caption? Help!

  25. samuel kellerhals
    March 9, 2018 at 10:10

    Thanks a lot. Took a bit of tweaking to get the final slider as I wanted it to be, but this is great thanks so much, am learning a lot! Keep it up!

  26. Iam Ali Vlogs
    March 9, 2018 at 10:10

    how to make multiple images scroll like in a Marquee tag…one after another like looping

  27. vamsi akula
    March 9, 2018 at 10:10

    where to get main.css file?

  28. 1cecile
    March 9, 2018 at 10:10

    Hi, what about the size of the images? Should I give them a specific size?

  29. Cameron Chardukian
    March 9, 2018 at 10:10

    anyone else had enough of the wix.com ads? lol

  30. Sai kiran
    March 9, 2018 at 10:10

    where is the Css code??

  31. pplayer666
    March 9, 2018 at 10:10

    for some reason image divs stack underneath eachother instead of hiding beyond the visibility scope. guess bootstrack doesn't work in my case.

  32. shayla sanders
    March 9, 2018 at 10:10

    can you use this for videos as well?

  33. Wim Mees
    March 9, 2018 at 10:10

    Thanks, it was verry complete !

  34. Abraham M Guerrero
    March 9, 2018 at 10:10

    where is the Jquery Code?

  35. Movie Reviews
    March 9, 2018 at 10:10

    Quentin love the videos 🙂

  36. REFFAS OUSSAMA FAKHREDDINE
    March 9, 2018 at 10:10

    plz can you give me your css file !!

  37. John Lima
    March 9, 2018 at 10:10

    Very nice. Thanks.

  38. Katty Larrosa
    March 9, 2018 at 10:10

    Well explained for beginners!!! Thanks man…

  39. Ice Man
    March 9, 2018 at 10:10

    Nice tutorial, well presented and code worked first time, thanks, keep em comong.

  40. Mark Alexa
    March 9, 2018 at 10:10

    Hello Quentin ! I followed your tutorial and I've learned a lot ! Thanks for the video. However, would you have a look at this: https://drive.google.com/open?id=0B6uVbJ5C2XJpZ3Y2OXFKX1VZams

    On that screenshot you can see a random grey area on the right side and don't know why it is there ?

  41. Mansoor Ahmad Khan
    March 9, 2018 at 10:10

    Pictures dont go in slider . but they form a shape of stack . . whats the problem ?
    CODE :

    <!DOCTYPE html>
    <html lang="en"
    <head>
    <meta charset="UTF-8">
    <title>asd</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">

    </head>

    <body>

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!– Indicators –>
    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!– Wrapper for slides –>
    <div class="carousel-inner" role="listbox">
    <div class="item active">
    <img src="img/123.jpg" alt="Chania">
    </div>

    <div class="item">
    <img src="img/123.jpg" alt="Chania">
    </div>
    <div class="item">
    <img src="img/123.jpg" alt="Chania">
    </div>
    <div class="item">
    <img src="img/123.jpg" alt="Chania">
    </div>

    </div>

    </div>
    </body>

    <script src="jQuery.min.js"></script>
    <script src="js/bootstrap.min.js"> </script>
    </html>

  42. GameBOY
    March 9, 2018 at 10:10

    how to change slide left to right , up to down ..
    can we do sir please tell

  43. Guy Person
    March 9, 2018 at 10:10

    Does this only work in Bootstrap (sorry, I haven't been watching the series, I just found this when searching how to make a html slider). I'm using Brackets and my pictures are separate, there are no arrows or dots, etc.

  44. Lodrick Thomas
    March 9, 2018 at 10:10

    i tried to copy it from bootstrap web but it didn't work!!! and i came across your tutorial, frankly speaking this was more than helpful thank you!!

  45. israel meza
    March 9, 2018 at 10:10

    How did you get all your images to be the sames size? did you edit them in a photo editor? mines are all different sizes

  46. Kevin Eontrainer
    March 9, 2018 at 10:10

    How do you align-center the images? My images are all potrait but all of them left-aligned for some reason… leaving a huge white space on the right side…

  47. Secretong Malupet
    March 9, 2018 at 10:10

    Can I see your head tag, I might be missing some required links for this to actually work.

  48. anan abuhamed
    March 9, 2018 at 10:10

    what is the code that i need to put in the javascript file and css ? help pls 🙂

  49. abiliorbjr1
    March 9, 2018 at 10:10

    Obrigado por compartilhar seu conhecimento!!!

  50. Aituar Adalbayev
    March 9, 2018 at 10:10

    Thank you, really helped me with my task! 🙂

Leave A Comment

You must be logged in to post a comment.