CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
greenboxgoolu
greenboxgoolu

Reputation: 139

Bootstrap CSS/Javascript For Carousel Only

Bootstrap CSS/Javascript For Carousel Only

Currently using Carousel With Controls

https://getbootstrap.com/docs/4.0/components/carousel/

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
     <video controls="true">
      <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
    </video>
    </div>
    <div class="carousel-item">
     <video controls="true">
       <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
    </video>

    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Anyone have CSS Codes and Javascript Codes for this function ? (Don't want the whole file as it would conflict with my main CSS)

Upvotes: 9

Views: 7607

Answers (6)

Matt Lavin
Matt Lavin

Reputation: 980

I had the same desire for Bootstrap Carousel (3.x) without all the rest of Bootstrap. I put up a small git repo and instructions for how to use it here: https://github.com/mdlavin/bootstrap-carousel-standalone

Upvotes: 2

user2618529
user2618529

Reputation:

You should rewrite your code. Because The Bootstrap is a pattern of World Wide Web 2.0. Your Site will be looked pretty with all functions of The Bootstrap. Please download the Full Bootstrap package and use it all and do not something. Use https://getbootstrap.com/docs/4.4/getting-started/download/ .It is begun the post information era after ten years - The Bootstrap will have been finalized. And finally, The program is not the data size.

Upvotes: 2

Daniel
Daniel

Reputation: 15433

Here is an example of what Nathaniel is suggesting you do.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css" />
<link rel="stylesheet" href="style.css" />

Of course in your case you are using Bootstrap, but hopefully this visual helps you understand that part of Nathaniels recommendation.

Then you just grab the Bootstrap class names you need and you can implement that in the HTML you will write inside your JavaScript file.

const carouselTemplate = (videoDetail) => {
   return `<div class=“carousel-item-active”>
            <video controls=“true”>
              <source src=“${videoDetail.id}”>
            </video>
          </div>`;
}

Then you want to render that HTML to the DOM, so you can create an element in your HTML like so:

<div id="carousel"></div>

and then back in your JavaScript file you do the following:

document.querySelector('#carousel').innerHTML = carouselTemplate(response.data);

That response.data you pass in can be the videoDetail data object which I am assuming you may have fetched via:

const onVideoSelect = async video => {
  const response = await axios.get('http://www.youtube.com/');
  document.querySelector('#carousel').innerHTML = carouselTemplate(response.data)
}

There are probably some params object missing in that axios.get() for YouTube to fetch a video of a specific id, but I do not presently have the YouTube API docs in front of me.

Upvotes: 2

awran5
awran5

Reputation: 4536

I found an old Pen and customized it a bit to suit your needs.

Here is a standalone Bootstrap 4 Carousel with no dependencies (even jQuery):

Update 1: Added images source and set the default height to 70vh

Update 2: Added video - iframe support. It seems that SOF is not allowing video/iframe backgrounds so here is the a codepen source.

const carousel = document.getElementById('carouselExampleControls')
const items = carousel.querySelectorAll('.carousel-item');
let currentItem = 0;
let isActive = true;

function setCurrentItem(index) {
  currentItem = (index + items.length) % items.length;
}

function hideItem(direction) {
  isActive = false;
  items[currentItem].classList.add(direction);
  items[currentItem].addEventListener('animationend', function() {
    this.classList.remove('active', direction);
  });
}

function showItem(direction) {
  items[currentItem].classList.add('next', direction);
  items[currentItem].addEventListener('animationend', function() {
    this.classList.remove('next', direction);
    this.classList.add('active');
    isActive = true;
  });
}

document.getElementById('carouselPrev').addEventListener('click', function(e) {
  e.preventDefault()
  if (isActive) {
    hideItem('to-right');
    setCurrentItem(currentItem - 1);
    showItem('from-left');
  }
});

document.getElementById('carouselNext').addEventListener('click', function(e) {
  e.preventDefault()
  if (isActive) {
    hideItem('to-left');
    setCurrentItem(currentItem + 1);
    showItem('from-right');
  }
});
*,
*::after,
*::before {
  box-sizing: border-box;
}

img {
  display: block;
  vertical-align: middle;
}

body {
  margin: 0;
  font-family: sans-serif;
}

.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner>.carousel-item {
  position: relative;
  display: none;
  animation: 0.6s ease-in-out;
  height: 70vh; /* Set your height */
}

.carousel-item>.carousel-img {
  width: 100%;
  min-height: 70vh; /* same height */
  height: auto;
}
.carousel-item.carousel-video {
  display: block;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  /* uncomment the following line if you want to prevent mouse (or touch) clicks */
  /* pointer-events: none; */
}
.carousel-inner>.active,
.carousel-inner>.next {
  display: block;
}

.carousel-inner>.next {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner>.to-left {
  animation-name: left;
}

.carousel-inner>.from-right {
  animation-name: right;
}

.carousel-inner>.to-right {
  animation-name: right;
  animation-direction: reverse;
}

.carousel-inner>.from-left {
  animation-name: left;
  animation-direction: reverse;
}

.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  cursor: pointer;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}

.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat 50% / 100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

@keyframes left {
  from {
    left: 0;
  }
  to {
    left: -100%;
  }
}

@keyframes right {
  from {
    left: 100%;
  }
  to {
    left: 0;
  }
}
<div id="carouselExampleControls" class="carousel">
  <div class="carousel-inner">
    <!-- YouTube Video -->
    <div class="carousel-item active">
      <iframe class="carousel-video" width="100%" height="100%" src="https://www.youtube.com/embed/QEbuc3cgmsI" frameborder="0"
        allowfullscreen></iframe>
      <!-- add "?autoplay=1" at the end of the URL for autoplay i.e. https://www.youtube.com/embed/QEbuc3cgmsI?autoplay=1 -->
    </div>
    <!-- Local Video -->
    <div class="carousel-item">
      <video class="carousel-video" autoplay muted loop playsinline preload="metadata"
        poster="http://techslides.com/demos/sample-videos/small.jpg">
        <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
        <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
      </video>
    </div>
    <!-- Image -->
    <div class="carousel-item">
      <img class="carousel-img" alt="Second slide" src="https://source.unsplash.com/collection/190728/1920x1080">
    </div>
  </div>

  <a id="carouselPrev" class="carousel-control-prev" href="#carouselExampleControls" role="button">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a id="carouselNext" class="carousel-control-next" href="#carouselExampleControls" role="button">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Upvotes: 7

KuldipKoradia
KuldipKoradia

Reputation: 3031

If you don't have to use bootstrap for your website for other sections except slider section then I have suggest you to use external library only for slider because from bootstrap libraries it is not easy to filter only slider code.

This is the reference website link for only slider: https://kenwheeler.github.io/slick/

This slier is easy to customize and there are so many options to set slider properties using Jquery.

I hope this will help you to solve your problem and this is only SLider Library so it will not conflict your main css so you can easily add this library to your code.

Thank you...

Upvotes: 2

ibex
ibex

Reputation: 1113

If you are using bundler like Webpack, your could import and compile individual components as explained in here

Upvotes: 2

Related Questions