D4mations.com

Bootstrap tutorial 21 – Carousel (Slideshow)

[ad_1]
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

d4mer

,
, , , , , , , , , , , , ,

50 responses to “Bootstrap tutorial 21 – Carousel (Slideshow)”

  3. 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">

  5. 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

  41. 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>

  43. 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.

Leave a Reply