D4mations.com

Bootstrap Tutorial #25 – Carousels

[ad_1]
https://i.ytimg.com/vi/xReQ_nQbdmA/hqdefault.jpg



You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5Y…

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list…

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list…

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5Y… or http://thenetninja.co.uk

========== Social Links ==========

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

Original source

d4mer

,
, , , , , , , , ,

16 responses to “Bootstrap Tutorial #25 – Carousels”

  1. carousel not working i don't know why…

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap Practise </title>
    <meta name="viewport" content="width=device-width, intial-scale=1">
    <link rel="stylesheet" href="F:WorkBootstrapcss/bootstrap.min.css">

    </head>

    <body>
    <div class="carousel slide" id="myslider" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#myslider" data-slide-to="0" class="active"></li>
    <li data-target="#myslider" data-slide-to="1"></li>
    <li data-target="#myslider" data-slide-to="2"></li>
    <li data-target="#myslider" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
    <div class="item active">
    <img src="img/ban1.jpg">
    <div class="carousel-caption">
    <h2>Yo Kick Some Coding…!</h2>
    </div>
    </div>

    <div class="item">
    <img src="img/ban2.jpg">
    <div class="carousel-caption">
    <h2>Yo Kick Some Coding…!</h2>
    </div>
    </div>
    <div class="item">
    <img src="img/ban3.jpeg">
    <div class="carousel-caption">
    <h2>Yo Kick Some Coding…!</h2>
    </div>
    </div>
    <div class="item">
    <img src="img/ban4.jpg">
    <div class="carousel-caption">
    <h2>Yo Kick Some Coding…!</h2>
    </div>
    </div>

    </div>

    <a class="left carousel-control" href="#myslider" data-slide="next">
    <span class="glyphicon glyphicon-chevron-left"></span>
    </a>

    <a class="right carousel-control" href="#myslider" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

    </div>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script>

    $(function(){
    $('.carousel').carousel({
    interval:1000,
    pause:false,
    wrap:false,
    keyboard:true
    });
    });

    </script>

    </body>
    </html>

  2. Thanks for the video, top notch as always. I was wondering, could you make a tutorial for a similar carousel, but without bootstrap? I'm having trouble creating one that spans 100% of the page width. If you could show us what bootstrap does in the background with JavaScript and CSS that would be fantastic.
    Thank you

  7. thank you very much, best tutorial, but hey can you tell me is there any element or property like interval , pause etc. through which i can set the no. of images in one row or item class, any help will be appreciated

  15. Hey Ninja, i have a doubt, i wrote the script exactly as it is shown in your video but for some reason it doesnt change the intervals, or the pause or any of the settings inside that las script, Any ideas why it isnt working?
    By the way, these are really great tutorials man, keep the good work 😛

Leave a Reply