How does Bootstrap Carousel work?

HTML & CSS
1

Hey guys. Just curious as to how carousel actually works under the hood? Or a better question, how can I implement a carousel or slider with vanilla CSS and HTML?

I was kinda confused as to how this works without using javascript.

2

Correct me if I’m wrong but I’m pretty sure it uses Javascript.

3

you ain’t wrong… https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Plugins can be included individually (using Bootstrap’s individual “carousel.js” file), or all at once (using “bootstrap.js” or “bootstrap.min.js”).

If you aren’t already using bootstrap i’d look for a vanilla version if you are just adding a carousel

4

Here is an example for you to examine at your leisure…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<base href="https://coothead.co.uk/images/">

<title>CSS slider with animation pause</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

#container {
    position: relative;
    width: 40%;
    padding: 23.6% 0 0 0;
    margin: 1em auto;
    border: 0.06em solid #999;
    box-shadow: 0.4em 0.4em 0.4em #999;
    overflow: hidden;
    list-style: none;
 }

#container li {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    animation: slide1 24s  ease-in-out infinite;
 }

#container a, #container img {
    display: block;
    width: 100%;
    height: auto;
 }
#container li:nth-child(1) { left: 0%; animation-name: slide0; }
#container li:nth-child(3) { animation-delay: 4s; }
#container li:nth-child(4) { animation-delay: 8s; }
#container li:nth-child(5) { animation-delay: 12s; }
#container li:nth-child(6) { animation-delay: 16s; }


#container:focus *,
#container:hover *,
#container:active * {
    animation-play-state: paused;
 }

@keyframes slide0 {
    0%     { left: 0; z-index: 2; }
    12.5%  { left: 0; }
    16.67% { left: -100%; }
    17%    { left: 100%; z-index: 0; }
    95.83% { left: 100%; z-index: 2; }
    100%   { left: 0; }
 }

@keyframes slide1 {
    0%     { left: 100%; z-index: 1; }
    12.5%  { left: 100%; }
    16.67% { left: 0; }
    29.17% { left: 0; }
    33.34% { left: -100%; }
    34%    { left: 100%; z-index: 0; }
   100%    { left: 100%; }
 }
</style>

</head>
<body> 

 <ul id="container" tabindex="1">
  <li><img src="face-3.jpg" alt="face three"></li>
  <li><img src="face-4.jpg" alt="face four"></li>
  <li><img src="face-5.jpg" alt="face five"></li>
  <li><img src="face-6.jpg" alt="face six"></li>
  <li><img src="face-7.jpg" alt="face seven"></li>
  <li><img src="face-8.jpg" alt="face eight"></li>
 </ul>

</body>
</html>

coothead

4 Likes
5

Hi,
Bootstrap carousels won’t work without Javascript (minified or CDN).
You can take a look at this page: https://mobirise.com/bootstrap-carousel/
There are simple examples of Bootstrap carousels, tutorials and code snippets, so everything you are looking for.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.