Skip to content

Instantly share code, notes, and snippets.

@dvigne
Created September 22, 2021 04:44
Show Gist options
  • Save dvigne/756ab594cd5f9f15e087d30c2e5c2a3c to your computer and use it in GitHub Desktop.
Save dvigne/756ab594cd5f9f15e087d30c2e5c2a3c to your computer and use it in GitHub Desktop.
Sbosticdesign.com JS for Carousel
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/4.0.9/scrollreveal.min.js" integrity="sha512-Kr+RPfLjQ71E0cJ9nseJ6jwTrnmMnuSPnnsVQQ/ZYYCjOHKfJcWj8ILICXnvf9A7ZQChNzIbr9x/ZAxA6xAZlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
ScrollReveal().reveal('.reveal', { viewFactor: .75 });
ScrollReveal().reveal('.reveal-25', { viewFactor: .25 });
var imgs = [
"https://sbosticdesign.com/wp-content/uploads/2021/08/92779698_127033365574854_7924887828524171264_n-scaled.jpeg",
"https://sbosticdesign.com/wp-content/uploads/2021/08/iPhone-XS-isometric-onfloor-Mockup.jpeg",
"https://sbosticdesign.com/wp-content/uploads/2021/08/cropped-Screen-Shot-2021-08-27-at-10.03.21-PM.png"
];
$(".site-header").prepend("<div id='masthead' class='carousel slide w-100 h-100'><div class='carousel-inner w-100 h-100'></div></div>");
imgs.forEach((image) => {
$("#masthead > .carousel-inner").prepend("<div class='carousel-item h-100 w-100'></div>");
// $(".carousel-item").first().prepend("<img class='d-block h-100 w-100' src='" + image + "' />");
$(".carousel-item").first().prepend("<div class='d-block h-100 w-100'>");
$(".carousel-item").first().css({
"background-image": "linear-gradient(rgba(0,0,0,.50),rgba(0,0,0,.50)),url(" + image + ")",
"background-repeat": "no-repeat",
"background-size": "cover"
});
});
$(".carousel-item").first().addClass("active"); // Starts the Carousel
$(window).on('load', function() {
var carousel = new bootstrap.Carousel(document.querySelector('#masthead'), {
pause: false,
touch: false,
ride: "carousel",
keyboard: false
}).cycle();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment