Using Bootstrap CSS and JavaScript specifically for carousel functionality

Custom Styles and Scripts for Bootstrap Carousel

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>

Looking for Custom CSS and JavaScript to enhance Carousel function without conflicting with main CSS.

javascripthtmlcssbootstrap-4

Answer №1

I stumbled upon an old Pen and decided to make some customizations to better fit your requirements.

Presenting a Bootstrap 4 Carousel that stands alone without any external dependencies (including jQuery):

Update 1: Images source has been added and the default height is now set to 70vh

Update 2: Video - iframe support has been added. As it appears that SOF does not support video/iframe backgrounds, here is a codepen source.

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

*,
*::after,
*::before {
...

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

Answer №2

For those utilizing bundler tools such as Webpack, it is possible to import and compile specific components individually, as elaborated in the instructions found here

Answer №3

If you're looking to incorporate a slider on your website without using Bootstrap for other sections, I recommend opting for an external library specifically for the slider functionality. This will allow you to easily filter out only the slider code without cluttering your project with unnecessary Bootstrap components.

For a reliable slider solution, you can check out this website:

The Slider library provided on the above link is highly customizable and offers numerous options for setting slider properties using jQuery.

By using this dedicated Slider Library, you can effectively address your slider needs without causing conflicts with your main CSS styles. Simply integrate this library into your code without any worries.

Hopefully, this suggestion proves helpful in resolving your slider-related issues. Thank you for considering this recommendation!

Answer №4

Here is an illustration of Nathaniel's suggestion for you to consider.

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

Although you are using Bootstrap in your case, this visual aid can assist you in understanding part of Nathaniel's recommendation.

After that, you can simply select the Bootstrap class names you require and incorporate them in the HTML that you will include in your JavaScript file.

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

Next, you need to display that HTML on the page, so you can create an element in your HTML like this:

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

Then, in your JavaScript file, you can do the following:

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

The response.data you provide can be the data object videoDetail that you might have retrieved through:

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

It's possible that there are some missing params in that axios.get() for YouTube to fetch a specific video based on an id, but I don't currently have the YouTube API documentation in front of me.

Answer №5

To enhance your website's appearance, consider revising your code to incorporate The Bootstrap, a popular web pattern. By utilizing all the features of The Bootstrap, your site will look more appealing and user-friendly. Download the complete Bootstrap package from https://getbootstrap.com/docs/4.4/getting-started/download/ to maximize its potential. The era of information technology has just begun, and after a decade, The Bootstrap is now fully refined. Remember, the program's effectiveness is not determined by its file size.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An instructional guide on utilizing Python to extract the URLs of companies from a LinkedIn search

I'm having an issue extracting company profile URLs from a LinkedIn search as I keep getting a "not found" message. Despite my code running smoothly, the problem persists. Here is my code: import requests import csv import time import numpy from bs4 ...

pythonhtmlselenium-webdriverbeautifulsoupspring-social-linkedin

Get the number of elements that match your XPath expression

Currently engaged in an XML and XSLT project with a challenging task; the query requires me to count the number of open ports with a specific port number using the following path: liste_hotes --) hote --) liste_ports --) port num_p ...

htmlxmlxsltxpath

Encountering a problem with utilizing the equalTo() method in Firebase Realtime Database in a React

I'm having trouble randomizing and querying a specific node in my database based on the ShopNo When I use equalTo, I can't seem to retrieve the desired node. Instead, I'm only getting a randomized value based on the total number of Shop ent ...

javascriptreactjsreact-nativefirebase-realtime-databaseexpo

Change to the parent frame using webdriver

I am facing an issue while trying to switch to the parent frame or iFrame using webdriver.js. Although I have implemented a function that works, it only goes up to the second level of frames. When attempting to switch to the parent frame from a deeper fr ...

javascriptnode.jsselenium-webdriver

Tips for creating a vertical drawer using jQuery and CSS

Hello, I am currently working on developing a drawer component using Ember.js. If you want to view the progress so far, feel free to check out this jsbin http://jsbin.com/wulija/8/edit My goal is to have the drawer look like the following initially: +--- ...

javascriptjqueryhtmlcss

Is there a way for me to receive the status code response from my backend server?

My component makes a call to a servlet, which then sends a POST HTTP request to the backend (using Spring Boot). I want the backend to return the status of the POST request that was sent earlier. This is my code: res= this.CS.postcompetenze(this.comp) Th ...

javascripttypescriptspring-bootjpa

I want to create a feature where a video will automatically play when a user clicks on a specific item in a list using Angular

Currently, I'm working on a project that involves displaying a list of videos and allowing users to play them in their browser upon clicking. The technology stack being used is Angular 2. Below is the HTML code snippet for achieving this functionalit ...

javascriptangularvideotypescript

Error: An error occurred due to an unexpected asterisk symbol. The import call only accepts one argument in Posenet

While attempting to utilize posenet on a python http server, I encountered a syntax error in the camera.js file at this specific line. import * as posenet from '@tensorflow-models/posenet'; This piece of code has been cloned from the following G ...

javascripthtmlimport

The inline style in Angular 2 is not functioning as expected when set dynamically

Having a small dilemma... I'm trying to apply an inline style within a div like this: div style="background: url(..{{config.general.image}})"></div Oddly enough, it was functioning in beta 16 but ever since the RC1 upgrade, it's no longer ...

javascripttypescriptangular

Incorporating an NPM JavaScript library into Laravel version 8

I've integrated the mobiscroll javascript component library into my new Laravel 8 app by adding the minified css/js files to the public/css and public/js directories. However, I'd like to find a more seamless way to include these components by us ...

javascriptlaravelnpmlaravel-8

Experiencing the issue of receiving `undefined` when trying to access res.query with a JSON query string using

Utilizing qs for constructing JSON-based query parameters for my REST API request: On the client side: import qs from "qs"; let query = { dateTime: { $gte: 1664557995000 } }; let q = qs.stringify(query); let url = "http://lo ...

javascriptnode.jsrestquery-stringqs

Tips for customizing the border of an outlined TextField in MUI

Below is the current configuration of a TextField component: const styles = { resize: { fontSize: '50px', } } const textField = (props) => { const { classes } = props; return ( <TextField valu ...

javascriptreactjsmaterial-ui

Retrieve the IDs of list elements in order to dynamically update a div using AJAX

I'm facing a bit of a challenge at the moment. I have a webpage that uses jQuery to load three different views: one displaying all categories associated with the user, another showing the image and name of items within the selected category, and a thi ...

javascriptajaxasp.net-mvc-4

The process of JavaScript for detecting and extracting text from

After much searching, I stumbled upon this intriguing piece of JavaScript code at this location. Curiously, I was able to remove a few eggs using the following script: var eggCoordinates = []; for (var i = 0; i < 5; i++) { eggCoordinates.push(new E ...

javascript

Printing documents from a database using Mongoose version 7.3.1: A comprehensive guide

Currently, with Mongoose 7.3.1, I have inserted some documents into the MongoDB database. However, when I try to log these documents using console.log() by using Fruit.find({}) and outputting it to the console, I get a massive dataset of unwanted objects. ...

javascriptnode.jsmongodbmongoose

Passing User Authentication State from Express/Passport to a React Client: A Step-by-Step Guide

I want to pass a basic boolean value const isLoggedIn = true; (provided by Passport) from my Express backend to my React frontend. I'm looking for an alternative to embedding it in the HTML through a templating engine. This seems like a common req ...

javascriptreactjsexpresspassport.js

Having trouble configuring the proxy port for my Vue.js application

I'm currently developing a web application using vue.js for the front end and node.js for the server. Vue is running on port 8080 and Node.js is running on port 3001. To make API calls, I have set up a proxy in my vue.config.js file, but it doesn&apos ...

javascriptvue.jsproxyvuejs2axios

Implement a function to trigger and refresh components in various Vuejs2 instances simultaneously

I currently have index.html with two Vue instances in different files: <!DOCTYPE html> <html lang="en"> <body> <div id="appOne"> </div> <div id="appTwo"> </div> </body> </html ...

javascripthtmlnode.jsvuejs2

Designing a Dynamic Page Layout with Flexbox or Grid

I have been attempting to create this specific layout using a grid system. Unfortunately, I have not been successful in achieving the desired result with my current code snippet. Please note: The DOM Structure cannot be altered https://i.stack.imgur.com/b ...

htmlcssflexboxgrid

`Can Beautiful Soup extract data (text) from elements that share the same class identifier?`

Currently working on a personal project focused on web scraping, using beautiful soup to extract data from a website. Encountered an issue where data with the same class but different attributes is present. For instance: <div class="pi--secondary-price ...

pythonhtmlbeautifulsoup